亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

天貓頂部導(dǎo)航的改寫

??? 2019-02-11 15:57:36 255
????：<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title&g

11111111.png

2222.png

333333.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="bootstrap/css/style.css">
    <script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<!--仿天貓頭部導(dǎo)航-->
<div class="top">
    <div class="top_content">
       <div class="logo_info">
           <em>喵，歡迎來天貓</em>
           <a href="#">請登錄</a>
           <a href="#">免費注冊</a>
       </div>
        <div class="sn-quick-menu">
            <ul>
                <li>
                    <a href="#">我的淘寶</a><span class="caret"></span>
                    <div class="myTao_down">
                        <a href="#">已買到的寶貝</a>
                        <a href="#">已出售的寶貝</a>
                    </div>
                </li>
                <li><i class="glyphicon glyphicon-shopping-cart"></i> <a href="#">購物車<span id="num">0</span>件</a></li>
                <li>
                    <a href="#">收藏夾</a><span class="caret"></span>
                    <div class="myTao_Sc">
                        <a href="#">收藏的寶貝</a>
                        <a href="#">收藏的店鋪</a>
                    </div>
                </li>
                <li><i class="glyphicon glyphicon-phone"></i><a href="#">手機版</a></li>
                <li><a href="#">淘寶網(wǎng)</a></li>
                <li><a href="#">商家支持</a><span class="caret"></span></li>
                <li> <i class="glyphicon glyphicon-list"></i><a href="#">網(wǎng)站導(dǎo)航</a> <span class="caret"></span></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

CSS：

*,body,ul{margin: 0;padding: 0;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight: normal}
.top{height:33px;background-color:#f2f2f2;width: 100%;line-height: 33px;font-size: 12px;color:#999;border-bottom: 1px #e5e5e5 solid}
.top a{color:#999}
.top a:hover{text-decoration: none;color:red}
.top_content{width:1230px;margin: 0 auto;}
.logo_info{width:228px;float:left;}
.logo_info em{font-style: normal;}
.logo_info a{padding:0 10px;}
.sn-quick-menu{width:545px;float:right;}
.sn-quick-menu li{float: left;list-style:none;}
.sn-quick-menu li{padding:0 10px;position: relative}
.sn-quick-menu li .caret{font-size: 10px;}
.sn-quick-menu li:hover{background-color: white}
.myTao_down{width:94px;height:60px;display:none;position: absolute;border:1px solid #e5e5e5;left:0;border-top:none}
.myTao_down a{width: 100%;display:block;text-align: center;height: 30px;line-height: 30px;}
.sn-quick-menu li:nth-child(1):hover .myTao_down{display: block;}
.sn-quick-menu li:nth-child(2) i,.sn-quick-menu li:nth-child(4) i,.sn-quick-menu li:nth-child(7) i{color:red;letter-spacing:3px;}
#num{color:#999;font-weight: bold;font-size: 13px;padding:2px}
.myTao_Sc{width:94px;height:60px;display:none;position: absolute;border:1px solid #e5e5e5;left:0;border-top:none}
.myTao_Sc a{width: 100%;display:block;text-align: center;height: 30px;line-height: 30px;}
.sn-quick-menu li:nth-child(3):hover .myTao_Sc{display: block;}


?? ???：滅絕師太?? ??：2019-02-11 16:07:22
???? ??：頁面完成的很好,布局細節(jié)掌握的很好,下次提交記得附上代碼哦

??? ??

?? ??