![]()
![]()
<!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;
}
