无序列表-制作网页特效

无序列表-制作网页特效

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。