图片链接（a标签和img标签的使用）

最新推荐文章于 2024-09-12 13:20:20 发布

康立志

最新推荐文章于 2024-09-12 13:20:20 发布

阅读量6.2k

点赞数 1

本文链接：https://blog.csdn.net/weixin_44011306/article/details/106239485

版权

本文介绍了如何在网页中使用HTML的`<a>`标签和`<img>`标签创建图片链接，以及通过CSS来美化和布局图片链接的效果。包括了具体的HTML结构和CSS样式代码示例。

摘要由CSDN通过智能技术生成

图片链接（标签和的使用）

效果展示
代码
- HTML
- css

效果展示

在这里插入图片描述

代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手机选购</title>
    <link href="main.css" rel="stylesheet">
</head>
<body>
<div id="mr-content">
    <div class="mr-top">
        <h2>手机</h2>
        <p class="mr-p1">手机风暴</p>
        <p class="mr-p2">></p>
        <p class="mr-p2">更多手机</p>
        <p class="mr-p2">OPPO</p>
        <p class="mr-p2">联想</p>
        <p class="mr-p2">魅族</p>
        <p class="mr-p2">乐视</p>
        <p class="mr-p2">荣耀</p>
        <p class="mr-p2">小米</p>
    </div>
    <img src="images/8-1.jpg" alt="" class="mr-img1">
    <div class="mr-right">
        <a href="images/link.png" target="_blank"><img src="images/8-1a.jpg" alt="" att="a"></a>
        <a href="images/link.png" target="_blank"><img src="images/8-1b.jpg" alt="" att="b"></a>
        <a href="images/link.png" target="_blank"><img src="images/8-1c.jpg" alt="" att="c"></a>
        <a href="images/link.png" target="_blank"><img src="images/8-1d.jpg" alt="" att="d"></a>
        <a href="images/link.png" target="_blank"><img src="images/8-1e.jpg" alt="" att="e"></a>
        <img src="images/8-1g.jpg" alt="" class="mr-car1">
        <img src="images/8-1g.jpg" alt="" class="mr-car2">
        <img src="images/8-1g.jpg" alt="" class="mr-car3">
        <img src="images/8-1g.jpg" alt="" class="mr-car4">
        <img src="images/8-1g.jpg" alt="" class="mr-car5">
        <p class="mr-price1">OPPO R9 Plus<br/><span>3499.00</span></p>
        <p class="mr-price2">vivo Xplay6<br/><span>4498.00</span></p>
        <p class="mr-price3">Apple iPhone 7<br/><span>5199.00</span></p>
        <p class="mr-price4">360 NS4<br/><span>1249.00</span></p>
        <p class="mr-price5">小米 Note4<br/><span>1099.00</span></p>
    </div>
</div>
</body>
</html>

css

#mr-content{					/*使用ID选择器设置页面布局*/
    width:1200px;
    height:540px;
    border:1px solid red;
    margin:0 auto;
    text-align:left;
    font-size: 12px;/*设置文本对齐方式*/
}
.mr-top{						/*使用类选择器设置页面布局*/
    width:1200px;
    height:45px;
    border-bottom:2px solid; 	/*设置边框*/
    margin:0 auto; 			/*设置外边距*/
}
h2{
    display:inline-block;
    color:#333333;
}
.mr-top .mr-p1{
    /*display:inline-block;*/
    font-size:10px;
    color:#666;
}
.mr-top .mr-p2{
    display:inline-block;
    font-size:10px;
    color:#666;
    float:right;
    padding:10px 20px 0 0;
}
.mr-img1{					/*使用类选择器设置图片浮动*/
    float:left;
}
.mr-right{					/*使用类选择器设置页面布局*/
    width:960px;				/*设置宽度*/
    height:527px;				/*设置高度*/
    float:left;				/*设置浮动*/
    position:relative;		/*设置定位*/
}
[att=a]{ 					/*使用属性选择器设置第1张手机图片位置及大小*/
    width:180px; 				/*设置宽度*/
    height:182px; 			/*设置高度*/
    position:absolute; 		/*设置定位*/
    left:140px;
    top:20px;
}
[att=b]{						/*使用属性选择器设置第2张手机图片位置及大小*/
    width:180px;
    height:182px;
    position:absolute;
    left:700px;
    top:20px;
}
[att=c]{						/*使用属性选择器设置第3张手机图片位置及大小*/
    width:180px;
    height:182px;
    position:absolute;
    left:400px;
    top:180px;
}
[att=d]{						/*使用属性选择器设置第4张手机图片位置及大小*/
    width:180px;
    height:182px;
    position:absolute;
    left:100px;
    top:250px;
}
[att=e]{						/*使用属性选择器设置第5张手机图片位置及大小*/
    width:180px;
    height:182px;
    position:absolute;
    left:650px;
    top:230px;
}
.mr-car1{					/*使用类选择器设置第1个购物车小图标位置*/
    position:absolute;
    left:330px;
    top:170px;
}
.mr-car2{					/*使用类选择器设置第2个购物车小图标位置*/
    position:absolute;
    left:890px;
    top:170px;
}
.mr-car3{					/*使用类选择器设置第3个购物车小图标位置*/
    position:absolute;
    left:590px;
    top:330px;
}
.mr-car4{					/*使用类选择器设置第4个购物车小图标位置*/
    position:absolute;
    left:290px;
    top:380px;
}
.mr-car5{					/*使用类选择器设置第5个购物车小图标位置*/
    position:absolute;
    left:840px;
    top:380px;
}
.mr-price1{					/*使用类选择器设置第1个手机品牌文字的位置*/
    position: absolute;
    left:50px;
    top:170px;
}
.mr-price2{					/*使用类选择器设置第2个手机品牌文字的位置*/
    position: absolute;
    left:620px;
    top:170px;
}
.mr-price3{					/*使用类选择器设置第3个手机品牌文字的位置*/
    position: absolute;
    left:0px;
    top:350px;
}
.mr-price4{					/*使用类选择器设置第4个手机品牌文字的位置*/
    position: absolute;
    left:350px;
    top:300px;
}
.mr-price5{					/*使用类选择器设置第5个手机品牌文字的位置*/
    position: absolute;
    left:560px;
    top:360px;
}
span{						/*使用元素选择器设置5个手机价格字体颜色以及大小*/
    font-size: 10px;
    color: #706A6A;
}