abstract：<!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>喵，我是天貓！</title> <link rel="shortcut icon" type="image/x-icon" href="static/images/logo1.png"> <link rel="stylesheet" type="text/css" href="static/css/style.css"> <link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css"> </head> <body> <div class="top"> <div class="content"> <div class="left"> <span>喵，歡迎來(lái)到天貓</span> <a href="">請(qǐng)登錄</a> <a href="">免費(fèi)注冊(cè)</a> </div> <div class="right"> <li> <a href="#" class="wo">我的寶貝 <i class="fa fa-angle-down"></i></a> <div class="taobao"> <a href="" >買到的寶貝</a><br> <a href="" >賣出的寶貝</a> </div> </li> <li> <a href=""><i class="fa fa-heart"></i> 我關(guān)注的品牌</a> </li> <li> <a href=""><i class="fa fa-shopping-cart"></i> 購(gòu)物車0件</a> </li> <li> <a href=""> 收藏夾</a> </li> <li> <span>|</span> </li> <li> <a href=""><i class="fa fa-shopping-cart"></i> 手機(jī)版</a> </li> <li> <a href="">淘寶網(wǎng)</a> </li> <li> <a href=""><i class="fa fa-shopping-cart"></i> 網(wǎng)站導(dǎo)航</a> <div id="website"></div> </li> </div> </div> </div> </body> </html>
*{margin: 0px;padding: 0px;}
ul,li{list-style: none;}
a{text-decoration: none;color: #6D6E6A;font-size: 12px;}
a:hover{color:red;}
span{text-decoration: none;color: #6D6E6A;font-size: 12px;margin-right:18px;}
.top{width:100%;height:35px;background: #F2F2F2;}
.content{width:1230px;margin:auto;}
.left{float:left;height:35px;line-height: 35px;width:300px;}
.left a{margin-right: 18px;}
.right{float:right;height:35px;line-height: 35px;}
.right li{float:left;margin-left:15px;position:relative;}
.right li div{background: #fff;text-align: center;box-shadow: 2px 1px 5px #ccc;width:120px;display:none;}
.right li:hover div{display:block;}
.right li i{color:red;}
.wo{ display:block;padding:0 10px; font-size:12px;}
.wo:hover{ display:block;background:#fff;padding:0 10px; font-size:12px;}
.taobao{width:120px;position:absolute;left:0px;top:35px;}
#website{width: 1230px;height: 250px;position: absolute;right: 0px;top: 35px;}
Correcting teacher：西門大官人Correction time：2019-01-28 16:29:14
Teacher's summary：代碼寫的比較規(guī)范，導(dǎo)航中的下拉還可以使用js來(lái)實(shí)現(xiàn)，不過(guò)效果沒有css的好，感興趣的話可以了解下