淘宝顶部导航——待解决的问题——已解决

控制台显示:

多了三个空的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
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章