abstract：<!DOCTYPE html> <html> <head> <title>導(dǎo)航欄常用布局</title> </head> <style type="text/css"> *{margin: 0;padding: 0;} a{text-decorati
<!DOCTYPE html>
<html>
<head>
<title>導(dǎo)航欄常用布局</title>
</head>
<style type="text/css">
*{margin: 0;padding: 0;}
a{text-decoration:none;padding:auto 5px;}
i{border: solid black;border-width: 0 1px 1px 0;display: inline-block;padding: 3px;margin:0 5px 5px 5px;transform: rotate(45deg);-webkit-transform: rotate(45deg);}
body{width: 100%;height:23px;}
nav{width: 1280px;height:23px; margin: auto ;background-color: yellow;}
ul{list-style:none;}
li{display: inline;margin:0;}
hr{width: 2px;line-height: 10px;color: pink;margin:2px auto;padding:3px 2px ;display: inline;text-align: center;}
.left{width: 40%;line-height:22px;background-color: ;float: left;}
.right{width: 58%;line-height:22px;float: right;text-align: right;}
a:hover{color:#ff5000;}
.clear{clear: both;}
</style>
<body>
<nav>
<ul class="left">
<li><a href="#">中國(guó)大陸 <i></i> </a></li>
<li><a href="#">親，請(qǐng)登錄</a> </li>
<li><a href="#">免費(fèi)注冊(cè)</a> </li>
<li><a href="#">手機(jī)逛淘寶</a></li>
</ul>
<ul class="right">
<li><a href="#">我的淘寶<i></i></a></li>
<li><a href="#">購(gòu)物車(chē)<i></i></a></li>
<li><a href="#">收藏夾<i></i></a></li>
<li><a href="#">商品分類(lèi)</a></li>
<li> <hr> </li>
<li><a href="#">賣(mài)家中心<i></i></a></li>
<li><a href="#">聯(lián)系客服<i></i></a></li>
<li><a href="#">網(wǎng)站導(dǎo)航<i></i></a></li>
</ul>
</nav>
<div class="clear"></div>
</body>
</html>這里寫(xiě)了一個(gè)基本的導(dǎo)航欄布局，難點(diǎn)主要是在于兩個(gè)，一個(gè)是如何把hr標(biāo)簽給豎起來(lái)，另一個(gè)就是i標(biāo)簽的向下箭頭的樣式調(diào)整，這兩個(gè)標(biāo)簽的調(diào)整著實(shí)費(fèi)了點(diǎn)事。
Correcting teacher：查無(wú)此人Correction time：2019-07-11 13:28:07
Teacher's summary：完成的不錯(cuò)。很多寫(xiě)好的樣式，可以保存下來(lái)，留著以后用。繼續(xù)加油。