摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>北京美團(tuán)網(wǎng)</title> &n
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>北京美團(tuán)網(wǎng)</title> <link rel="stylesheet" type="text/css" href="demo.css"> </head> <body> <div> <nav> <ul class="nav_left"> <li><a href="">北京</a></li> <li><a href="">切換城市</a></li> <li><a href="">[ 大廠回族自治縣 廊坊 固安縣 ]</a></li> <li><a href="" style="color: #13D1BE;margin-left: 25px;">立即登錄</a></li> <li><a href="">注冊(cè)</a></li> </ul> <ul class="nav_right"> <li><a href="">網(wǎng)站導(dǎo)航</a></li> <li><a href="">商家中心 <ul> <li>登陸商家中心</li> <li>美團(tuán)智能收銀</li> <li>我想合作</li> <li>手機(jī)免費(fèi)開(kāi)店</li> <li>餐飲代理商招募</li> <li>商家申請(qǐng)開(kāi)票</li> <li>免費(fèi)合作美團(tuán)排隊(duì)</li> </ul> </a></li> <li><a href="">手機(jī)app</a></li> <li><a href="">我的美團(tuán) <ul> <li>我的訂單</li> <li>我的收藏</li> <li>抵用券</li> <li>賬戶(hù)設(shè)置</li> </ul> </a></li> </ul> </nav> </div> <div class="clear"></div> </body> </html>
*{margin: 0;padding: 0}
.clear{clear: both;}
ul{list-style: none;}
a:link{text-decoration:none;color:#999;}
a:visited{color:#999;}
div{width: 100%;background-color: #F8F8F8;}
nav{width: 1200px;height: 40px;margin: 0 auto; }
.nav_left a{float: left;line-height: 40px;margin-left: 10px;font-size: 12px;}
.nav_right a{float: right;line-height: 40px;margin-right: 30px;font-size: 12px;position: relative;}
nav a:hover{color: #13D1BE;}
.nav_right a ul{display: none;line-height: 35px;}
.nav_right a:hover ul{display: block;color:#999;position: absolute;width: 140px;}
.nav_right a ul li:hover{color: #13D1BE;}二級(jí)菜單需要用到一個(gè)定位的只是和display的一個(gè)none屬性，而且設(shè)置樣式也比較繁瑣，總的來(lái)說(shuō)只要細(xì)心就能慢慢寫(xiě)出來(lái)
批改老師：天蓬老師批改時(shí)間：2019-03-08 14:25:10
老師總結(jié)：布局的屬性并不多, 但是細(xì)節(jié) 卻很多 ,只有多寫(xiě),多想,才能掌握