<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>无序列表-制作网页特效</title>
<link href="css/style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<!-- 整体内容大小 -->
<div id="mr-box">
<!-- 排行榜内容 -->
<div class="mr-top">
<p>排行榜<span>网罗全民挚爱></span></p>
</div>
<!-- 商品导航展示栏 -->
<div class="mr-bot">
<!-- 导航字体 -->
<div class="mr-item-nav">
<p><span>手机通讯录</span>|<span>手机保护套</span>|<span>大家电</span>|<span>休闲鞋</span>|<span><a href="#" target="_self">隐形眼镜</a></span>
</p>
</div>
<!-- 商品展示 -->
<div class="mr-shop-item">
<ul>
<li>
<div class="mr-late"><img src="images/1.jpg" alt="" title=""/></div>
<p>海昌 隐形眼镜H2O 半年抛2片装</p>
</li>
<li>
<div class="mr-late"><img src="images/2.jpg" alt="" title=""/></div>
<p>海昌 隐形眼镜H2O 半年抛2片装</p>
</li>
<li>
<div class="mr-late"><img src="images/3.jpg" alt="" title=""/></div>
<p>海昌 隐形眼镜H2O 半年抛2片装</p>
</li>
<li>
<div class="mr-late"><img src="images/4.jpg" alt="" title=""/></div>
<p>海昌 隐形眼镜H2O 半年抛2片装</p>
</li>
<li>
<div class="mr-late"><img src="images/5.jpg" alt="" title=""/></div>
<p>海昌 隐形眼镜H2O 半年抛2片装</p>
</li>
<li>
<div class="mr-late"><img src="images/6.jpg" alt="" title=""/></div>
<p>海昌 隐形眼镜H2O 半年抛2片装</p>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
@charset "utf-8";
/**css document*/
* { /*通配选择器，清除所有标签默认样式*/
padding: 0;
margin: 0;
list-style: none;
}
/*总宽437px,总高度415*/
#mr-box { /*id选择器，设置整体内容样式*/
width: 473px;
height: 415px;
margin: 9px auto;
}
.mr-top { /*类选择器，设置排行榜样式*/
height: 60px;
background: rgb(239, 153, 68);
color: rgb(255, 255, 255);
}
.mr-top p { /*类选择器、包含选择器，设置排行榜字体样式*/
line-height: 60px;
margin-left: 60px;
font-size: 28px;
}
.mr-top p span { /*类选择器，包含选择器，设置网罗全民挚爱字体样式>*/
font-size: 15px;
margin-left: 150px;
}
/**商品导航展示栏**/
.mr-bot { /*类选择器，设置商品导航展示栏样式*/
height: 340px;
margin-top: 16px;
}
.mr-item-nav { /*类选择器，设置导航字体颜色样式*/
margin-left: 35px;
color: rgb(176, 176, 176);
}
.mr-item-nav span { /*类选择器，设置字体边距样式*/
margin: 0 5px;
}
.mr-item-nav a { /*类选择器，设置超接字体样式*/
text-decoration: underline red;
color: rgb(176, 176, 176);
}
.mr-shop-item{/*类选择器，设置商品展示样式*/
margin-left: 40px;
color: rgb(176,176,176);
font-size: 12px;
}
.mr-shop-item li{/*类选择器，设置商品展示边框大小样式*/
width: 100px;
height: 136px;
margin: 15px;
float: left;
}
.mr-shop-item li:hover .mr-late{/*伪类选择器，鼠标悬停图片向左平移*/
transform: translateX(-20px);
transition: transform 0.5s linear;
}
![龙珠训练营task04[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)