淘宝顶部导航——待解决的问题
程序员文章站
2022-04-16 09:53:19
...
控制台显示：
多了三个空的a标签。
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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;
}
上一篇： LeetCode 80. 删除排序数组中的重复项 II
下一篇： windows基础-2