淘寶頂部導航——待解決的問題——已解決

控制檯顯示:

多了三個空的a標籤。 

 

HTML: 

<!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">
    <link rel="stylesheet" href="中國大陸.css">
    <title>淘寶網 - 淘!我喜歡</title>
</head>
<body>
    <div id="main_page">

        <div id="page_top">
            <!-- 左邊欄一級導航 -->
            <ul class="nav_left">
                <li><a href="#">中國大陸</a>
                    <!-- 二級導航開始 -->
                    <ul>
                        <li><a href="#1">全球</a></li>
                        <li><a href="#1">中國大陸</a></li>
                        <li><a href="#1">中國澳門</a></li>
                        <li><a href="#1">中國臺灣</a></li>
                        <li><a href="#1">韓國</a></li>
                        <li><a href="#1">馬來西亞</a></li>
                        <li><a href="#1">澳大利亞</a></li>
                        <li><a href="#1">新加坡</a></li>
                        <li><a href="#1" >新西蘭</a></li>
                        <li><a href="#1">加拿大</a></li>
                        <li><a href="#1">美國</a></li>
                        <li><a href="#1">日本</a></li>
                    </ul>
                    <!-- 二級導航結束 -->
                </li>
                <li><a href="#">親,請登錄</a></li>
                <li><a href="#">免費註冊</a></li>
                <li><a href="#">手機逛淘寶</a></li>
            </ul>
            
            <!-- 右邊欄一級導航 -->
            <ul class="nav_right">
                <li><a href="#">我的淘寶</a>
                    <!-- 二級導航開始 -->
                    <ul>
                        <li><a href="#2">已買到的寶貝</a></li>
                        <li><a href="#2">我的寶貝</a></li>
                    </ul>
                    <!-- 二級導航結束 -->
                </li>
                <li><a href="#">購物車</a></li>
                <li><a href="#">收藏夾</a>

                    <!-- 二級導航開始 -->
                    <ul>
                        <li><a href="#3">收藏的寶貝</a></li>
                        <li><a href="#3">收藏的店鋪</a></li>
                    </ul>
                     <!-- 二級導航結束 -->
                </li>
                <li><a href="#">商品分類</a></li>
                <li><a href="#">千賣家中心</a>
                    <!-- 二級導航開始 -->
                    <ul>
                        <li><a href="#4">免費開店</a></li>
                        <li><a href="#4">已賣出的寶貝</a></li>
                        <li><a href="#4">出售中的寶貝</a></li>
                        <li><a href="#4">賣家服務市場</a></li>
                        <li><a href="#4">賣家培訓中心</a></li>
                        <li><a href="#4">體驗中心</a></li>
                        <li><a href="#4">問商友</a></li>
                    </ul>
                    <!-- 二級導航結束 -->
                </li>
                <li><a href="#">聯繫客服</a>
                    <!-- 二級導航開始 -->
                    <ul>
                        <li><a href="#5">消費者客服</a></li>
                        <li><a href="#5">賣家客服</a></li>
                    </ul>
                    <!-- 二級導航結束 -->
                </li>
                <li><a href="#">網站導航</a></li>
            </ul>
        </div>


    </div>
</body>
</html>

CSS:

*{
    margin: 0;
    padding: 0;
}
/* 設置頂部導航的背景  高寬 */
#main_page #page_top{
    background-color: #f5f5f5;
    width: 1190px;
    height: 30px;
    margin: 0 auto;
}
/* 設置左邊的導航向左浮動 右邊的向右浮動 */
#page_top ul.nav_left{
    float: left;
    list-style: none;
    overflow: hidden;
}
#page_top ul.nav_right{
    float: right;
    list-style: none;
    overflow: hidden;
}
/* 爲了使列表項在一行上面,
讓列表項也浮動 */
#page_top ul.nav_left > li,#page_top ul.nav_right > li{
     float: left;  /*不要忘記解決高度塌陷問題 */
}

/* 設置左邊欄一級導航中的連接 */
#page_top > ul.nav_left > li > a{
    display: block;
    text-decoration: none;
    text-align: center;
    color: black;
    font: 12px/30px "微軟雅黑";
    width: 75px;
    height: 30px;
}
#page_top > ul.nav_left > li:nth-child(2) > a{
    color: red;
}

/* 右邊一級導航 */
#page_top > ul.nav_right > li > a{
    display: block;
    text-decoration: none;
    text-align: center;
    color: black;
    font: 12px/30px "微軟雅黑";
    width: 90px;
    height: 30px;
}

/* 默認二級導航不顯示 */
#page_top > ul.nav_left > li > ul,#page_top > ul.nav_right > li > ul{
    display: none;
}

/* 左邊一級導航欄中的二級導航部分 */
#page_top > ul.nav_left > li:hover > ul{
    list-style: none;
    box-sizing: border-box;
    border: 1px #f5f5f5 solid;
}

#page_top > ul.nav_left > li > ul a{
    display: block;
    text-decoration: none;
    color: black;
    /* 一級導航的寬度爲解決 */
    width: 200px;
    height: 30px;
    font: 12px/30px "微軟雅黑";
    box-sizing: border-box;
    padding-left: 10px;
}

/* 右邊一級導航欄中的二級導航 */
#page_top > ul.nav_right > li > ul{
    list-style: none;
    box-sizing: border-box;
    border: 1px #f5f5f5 solid;
}
#page_top > ul.nav_right > li > ul a{
    display: block;
    text-decoration: none;
    color: black;
    width: 75px;
    height: 30px;
    font: 12px/30px "微軟雅黑";
    box-sizing: border-box;
    padding-left: 10px;
}

 

 

 

 

emmmmmm,都快對自己無語死了,是自己粗心造成的

原因——a標籤沒有閉合!!!

要細心!!!要細心!!!要細心!!!

重要的事情說三遍!!!!

發佈了42 篇原創文章 · 獲贊 4 · 訪問量 1788
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章