html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>易淘</title>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<link rel="stylesheet" type="text/css" href="css/header.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.css"/>
<body>
<nav id="header" class="header">
<span><a class="tag" href="#">中国大陆</a>
<ul>
<li><a href="#">全球</a></li>
<li><a href="#">中国大陆</a></li>
<li><a href="#">香港</a></li>
<li><a href="#">台湾</a></li>
<li><a href="#">澳门</a></li>
<li><a href="#">韩国</a></li>
<li><a href="#">马来西亚</a></li>
<li><a href="#">澳大利亚</a></li>
<li><a href="#">新加坡</a></li>
<li><a href="#">新西兰</a></li>
<li><a href="#">加拿大</a></li>
<li><a href="#">美国</a></li>
<li><a href="#">日本</a></li>
</ul>
</span>
<span><a href="#">亲,请登录</a></span>
<span><a href="#">免费注册</a></span>
<span><a href="#">手机淘宝</a></span>
<span><a class="tag" href="#">我的淘宝</a>
<ul>
<li><a href="#">已卖到的宝贝</a></li>
<li><a href="#">我的足迹</a></li>
</ul>
</span>
<span><a class="Tag" href="#">购物车</a></span>
<span><a href="#">收藏夹</a>
<ul>
<li><a href="#">收藏的宝贝</a></li>
<li><a href="#">收藏的店家</a></li>
</ul>
</span>
<span><a href="#">商品分类</a></span>
<span><a class="tag" href="#">卖家中心</a>
<ul>
<li><a href="#">免费开店</a></li>
<li><a href="#">已卖出的宝贝</a></li>
<li><a href="#">出售中的宝贝</a></li>
<li><a href="#">卖家服务市场</a></li>
<li><a href="#">卖家培训中心</a></li>
<li><a href="#">体验中心</a></li>
<li><a href="#">问商友</a></li>
</ul>
</span>
<span><a class="tag" href="#">联系客服</a>
<ul>
<li><a href="#">消费者客服</a></li>
<li><a href="#">卖家客服</a></li>
</ul>
</span>
<span><a class="tag" href="#">网站导航</a></span>
<div style="clear: both;"></div>
</nav>
</body>
</html>
<!-- 这次的解决了二级目录上回的问题,上回问题为html元素空间分配不佳所导致,
所以写html页面也得仔细考虑结构问题(挺重要) -->
css:
html,
body {
height: 100%;
width: 100%;
}
* {
margin: 0px;
border: 0px;
}
.header {
background: lavender;
}
a{
text-decoration: none;
color: black;
font-family: "仿宋";
}
/* 必须要设置为absolute,因为css层叠问题,,,
网址https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ */
ul{
position: absolute;
padding: 5px 0;
margin-left: -6px;
display: none;
opacity: 0;/* 透明度 */
list-style: none;
border: 1px solid lavender;
border-top: none;
}
ul li{margin-top: 10px;}
ul li:hover{background-color: lavender;}
.header span{
float: left;
padding: 5px 15px 5px 5px;
margin-left: 10px;
}
.header span:nth-child(1)>ul{
width: 300px;
height: 250px;
overflow-y: scroll;
}
/* 图标 */
.Tag::after,
.tag::after{
position: absolute;
display: block;
height: 3px;
width: 3px;
margin: -15px 0 0 70px;
content: "";
transform: rotateZ(45deg);
border: 2px solid darkgray;
border-top: none;
border-left: none;
}
.Tag::after{margin: -15px 0 0 53px;}
.header span>a:hover{color: orange;}
.header span:nth-child(1){}
.header span:nth-child(1):hover{background-color: white;}
.header span:nth-child(1):hover ul{
display: block;
opacity: 1;
left: 0px;
margin:5px 0 0 9px;
}
.header span:nth-child(2) a{color: orange;}
.header span:nth-child(2):hover a{}
.header span:nth-child(3) a:nth-child(1){}
.header span:nth-child(4){margin-right: 20%;}
.header span:nth-child(4) a:nth-child(1){}
.header span:nth-child(5) a:nth-child(5){}
.header span:nth-child(5):hover{background-color: white;}
.header span:nth-child(5):hover ul{
display: block;
opacity: 1;
}
.header span:nth-child(7):hover{background-color: white;}
.header span:nth-child(7):hover ul{
display: block;
opacity: 1;
}
.header span:nth-child(9):hover{background-color: white;}
.header span:nth-child(9):hover ul{
display: block;
opacity: 1;
}
.header span:nth-child(10):hover{background-color: white;}
.header span:nth-child(10):hover ul{
display: block;
opacity: 1;
}
截图:
总的来说:这次然我深深的感触到了html排版选用标签的重要性,空间分配,还有css层叠,菜鸟爬行中。。。。。