摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>淘寶導航</title> <link rel="stylesheet" href="css/style05.css"> <link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css"> </head> <body> <!-- 頁面顯示內(nèi)容開始 --> <div class="content"> <!-- 1.號導航條開始 --> <!-- 1號導航條位置居中，尺寸大小設(shè)置 --> <div class="menu"> <!-- 1號導航條左邊，位置靠左，尺寸大小，每個列表項間距設(shè)置，字體居中 --> <ul class="mbl"> <li class="l gj" >中國大陸 <i class="fa fa-angle-down";></i> <!-- 下拉菜單 --> <div class="gjb"> <div >英國</div> <div >英國</div> <div >英國</div> <div >英國</div> <div >英國</div> <div >英國</div> </div> </li> <li class="l"><a href="" style="color:#F72900;">親，請登錄</a></li> <li class="l"><a href="">免費注冊</a></li> <li class="l"><a href="">手機逛淘寶</a></li> </ul> <!-- 1號導航條右邊，位置靠右，尺寸大小，每個列表項間距設(shè)置，字體居中 --> <ul class="mbr r"> <li class="l tb"><a href="">我的淘寶 <i class="fa fa-angle-down"></i></a> <div class="wdtb"> <div >已買到的寶貝</div> <div >我的足跡</div> </div> </li> <li class="l"><a href=""><span class="fa fa-cart-plus" style="color:#F72900;"></span>購物車<i class="fa fa-angle-down"></i></a></li> <li class="l sc"><a href=""><span class="fa fa-star"></span>收藏夾<i class="fa fa-angle-down"></i></a> <div class="scj"> <div >收藏的寶貝</div> <div >收藏的店鋪</div> </div> </li> <li class="l"><a href="">商品分類<i class="fa fa-angle-down"></i></a></li> <li class="l mjz"><a href="">賣家中心<i class="fa fa-angle-down"></i></a> <div class="mjzx"> <div>免費開店</div> <div>已賣出的寶貝</div> <div>出售中的寶貝</div> <div>賣家服務(wù)市場</div> <div>賣家培訓中心</div> <div>體檢中心</div> <div>問商友</div> </div> </li> <li class="l kf"><a href="">聯(lián)系客服<i class="fa fa-angle-down"></i></a> <div class="lxkf"> <a class="aa" href="">消費者客服</a> <a class="aa" href="">賣家客服</a> </div> </li> <li class="l dh"><a href=""><span class="fa fa-reorder"></span>網(wǎng)址導航<i class="fa fa-angle-down";></i></a> <div class="wzdh"> <a href="">主題市場</a> <a href="">特色市場</a> <a href="">阿里市場</a> <a href="">精彩推薦</a> </div> </li> </ul> </div> </div> </body> </html>
*{margin: 0px;padding-bottom: 0px;} /* 清除所有邊距 */
a{text-decoration: none; color:#6C6C6C;font-size: 13px;}/* 清除a標簽的樣式 */
.l{float: left;}/* 左浮動 */
.r{float: right;}/* 右浮動 */
.clear{clear: both;}/* 清除浮動 */
ul li{list-style: none;}/* 清除列表項前面的黑點 */
/* <!-- 1號導航條背景，尺寸大小設(shè)置 --> */
.content{width:100%;background: #f5f5f5;}
/* <!-- 1號導航條位置居中，尺寸大小設(shè)置 --> */
.menu{width: 1200px;height:40px;margin:0px auto;}
/* 1號導航條左邊，每個列表項間距設(shè)置，字體居中 。*/
.mbl li{margin-right: 10px;line-height: 40px;}
.mbl li a:hover {color:#F72900; }
.gj{color:#6C6C6C;width: 90px;height: 40px;font-size: 13px;text-align: center; position: relative;}
.gjb{display: none;width: 270px;height: 300px;position: absolute;border:1px solid #f5f5f5;border-top:none; }
.gjb div{display: inline-block;width: 100%; line-height: 25px;color:#6C6C6C;text-align: left; left:0px;}
.gj:hover{background: #ffff;border:1px solid #f5f5f5;border-bottom:none;}
.gj:hover .gjb{color:#6C6C6C;display: block;}
.gjb div:hover{background:#f5f5f5;font-size: 13px;color:#6C6C6C;}
/* 1號導航條右邊，每個列表項間距設(shè)置，字體居中 。*/
.mbr li{margin-right: 10px;line-height: 40px;}
.mbr li a:hover {color:#F72900; }
.mbr li a i{margin-left: 5px;}
.mbr li a span{margin-right: 5px;}
/* 我的淘寶下拉框 */
.tb{position: relative;width: 80px;}
.wdtb{display: none;width: 80px;height: 50px;border: 1px solid #f5f5f5 ;
border-top: none;position: absolute;}
.wdtb div{width: 80px;height: 20px;line-height: 20px;font-size: 13px;padding: 1px;color: #6C6C6C;}
.tb:hover .wdtb{display: block;background: #ffff;}
.tb:hover{background: #ffff;border:1px solid #f5f5f5;border-bottom: none;}
.wdtb div:hover{background:#f5f5f5;}
/* 收藏夾下拉框 */
.sc{position: relative;width: 80px;}
.scj{display: none;width: 80px;height: 70px;position: absolute;padding:5px 0px;
border:1px solid #f5f5f5;border-top: none;}
.scj div{height: 20px;line-height: 20px;font-size: 13px;text-align: center;padding: 5px;color: #6C6C6C;}
.sc:hover .scj{display: block;}
.sc:hover{background: #ffff;border:1px solid #f5f5f5;border-bottom: none;}
.scj div:hover{background: #f5f5f5;}
/* 賣家中心下拉框 */
.mjz{position: relative;width: 80px;}
.mjzx{display: none;width: 80px;height: 70px;position: absolute;padding:5px 2px;
border:1px solid #f5f5f5;border-top: none;}
.mjzx div{height: 20px;line-height: 20px;font-size: 13px;color: #6C6C6C;}
.mjz:hover .mjzx{display: block;}
.mjz:hover{background: #ffff;border:1px solid #f5f5f5;border-bottom: none;}
.mjzx div:hover{background: #f5f5f5;}
/* 聯(lián)系客服下拉框 */
.kf{position: relative;width: 80px;}
.lxkf{display: none;width: 80px;height: 70px; position: absolute;border:1px solid #f5f5f5;border-top: none;
padding: 2px 0px;}
.lxkf a{display: block; height: 20px;line-height: 20px;font-size: 13px;padding: 2px 0px;}
.kf:hover .lxkf{display: block;}
.kf:hover{background: #ffff;border:1px solid #f5f5f5;border-bottom: none;}
.lxkf .aa:hover{background: #f5f5f5;color: #6C6C6C;}
/* 網(wǎng)址導航下拉框 */
.dh{position: relative;}
.wzdh{display: none;width: 1200px;height: 300px;position: absolute;right: 0px;
border: 1px solid #f5f5f5;border-top: none;}
.wzdh a{display: block; width: 298px;height:299px;border: 1px solid#f5f5f5 ;
border-top: none;float: left;text-align: center;}
.dh:hover .wzdh{display: block;}
.dh:hover{background: #ffff;border: 1px solid #f5f5f5;border-bottom: none;}
批改老師：天蓬老師批改時間：2019-02-02 11:58:15
老師總結(jié)：任何效果, 一定要搞清原理, 了解關(guān)鍵代碼是什么, 先寫對, 再求好, 例如本例, 就是考察的絕對定位, 了解了原理, 就好辦了,對不對?