图⽚链接（a标签和img标签的使⽤）图⽚链接（标签和的使⽤）
效果展⽰
代码
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;*/
/*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;href标签怎么用
}
.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;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。