前端學習之京東左側導航欄
阿新 • • 發佈：2022-03-23
1. 學會用 nav 製作導航欄；
2. 居中設定：margin : xpx auto ;
3. 去掉下劃線：text-decoration ;
4. 文字垂直居中：line-hight: x px，這裡的x設定為與父元素的行高（hight）一樣的數值 ；
整體程式碼如下：
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>京東左側導航欄</title>
<style> body{ background-color: #bfa; } .left-nav{ background-color: #fff; height: 450px; width: 190px; padding: 10px 0px; margin: 50px auto; } .item:hover{ background-color:#D9D9D9; } .item{ padding-left: 18px; height: 25px; line-height: 25px; font-size: 14px;
} a{ color: black; font-size: 14px; } a:hover{ color: red; } a{ text-decoration: none; } span{ padding: 2px; } </style> </head>
<body> <nav class="left-nav"> <div class="item"> <a href="#" class="a">家用電器</a> </div> <div class="item"> <a href="#">手機</a><span>/</span><a href="#">運營商</a><span>/</span><a href="#">數碼</a> </div> <div class="item"> <a href="#">電腦</a><span>/</span><a href="#">辦公</a> </div> <div class="item"> <a href="#">家居</a><span>/</span><a href="#">傢俱</a><span>/</span><a href="#">家裝</a><span>/</span><a href="#">廚具</a> </div> <div class="item"><a href="#">男裝</a><span>/</span><a href="#">女裝</a><span>/</span><a href="#">童裝</a><span>/</span><a href="#">內衣</a> </div>
<div class="item"> <a href="#">美妝</a><span>/</span><a href="#">個體清潔</a><span>/</span><a href="#">寵物</a> </div>
<div class="item"> <a href="#">女鞋</a><span>/</span><a href="#">箱包</a><span>/</span><a href="#">鐘錶</a><span>/</span><a href="#">珠寶</a> </div>
<div class="item"> <a href="#">男鞋</a><span>/</span><a href="#">運動</a><span>/</span><a href="#">戶外</a> </div>
<div class="item"> <a href="#">房產</a><span>/</span><a href="#">汽車</a><span>/</span><a href="#">汽車用品</a> </div>
<div class="item"> <a href="#">母嬰</a><span>/</span><a href="#">玩具樂器</a> </div>
<div class="item"> <a href="#">食品</a><span>/</span><a href="#">酒類</a><span>/</span><a href="#">生鮮</a><span>/</span><a href="#">特產</a> </div>
<div class="item"> <a href="#">藝術</a><span>/</span><a href="#">禮品鮮花</a><span>/</span><a href="#">農資綠植</a> </div>
<div class="item"> <a href="#">醫藥保健</a><span>/</span><a href="#">計生情趣</a> </div>
<div class="item"> <a href="#">圖書</a><span>/</span><a href="#">文娛</a><span>/</span><a href="#">教育</a><span>/</span><a href="#">電子書</a> </div>
<div class="item"> <a href="#">機票</a><span>/</span><a href="#">酒店</a><span>/</span><a href="#">旅遊</a><span>/</span><a href="#">生活</a> </div>
<div class="item"> <a href="#">理財</a><span>/</span><a href="#">眾籌</a><span>/</span><a href="#">白條</a><span>/</span><a href="#">保險</a> </div>
<div class="item"> <a href="#">安裝</a><span>/</span><a href="#">維修</a><span>/</span> <a href="#">清洗</a><span>/</span><a href="#">二手</a> </div>
<div class="item"> <a href="#">工業品</a> </div>
</nav>
</body>
</html>