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

效果展示

代码

HTML

"en">

    "UTF-8">
    
    "main.css" rel="stylesheet">


"mr-content">
    
"mr-top">
        
手机
        
"mr-p1">手机风暴
        
"mr-p2">>
        
"mr-p2">更多手机
        
"mr-p2">OPPO
        
"mr-p2">联想
        
"mr-p2">魅族
        
"mr-p2">乐视
        
"mr-p2">荣耀
        
"mr-p2">小米
    
    "images/8-1.jpg" alt="" class="mr-img1">
    
"mr-right">
        "images/link.png" target="_blank">"images/8-1a.jpg" alt="" att="a">
        "images/link.png" target="_blank">"images/8-1b.jpg" alt="" att="b">
        "images/link.png" target="_blank">"images/8-1c.jpg" alt="" att="c">
        "images/link.png" target="_blank">"images/8-1d.jpg" alt="" att="d">
        "images/link.png" target="_blank">"images/8-1e.jpg" alt="" att="e">
        "images/8-1g.jpg" alt="" class="mr-car1">
        "images/8-1g.jpg" alt="" class="mr-car2">
        "images/8-1g.jpg" alt="" class="mr-car3">
        "images/8-1g.jpg" alt="" class="mr-car4">
        "images/8-1g.jpg" alt="" class="mr-car5">
        
"mr-price1">OPPO R9 Plus
3499.00
        
"mr-price2">vivo Xplay6
4498.00
        
"mr-price3">Apple iPhone 7
5199.00
        
"mr-price4">360 NS4
1249.00
        
"mr-price5">小米 Note4
1099.00
    

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;
}