摘要：这节课主要是对上节做的布局做了一个完善，利用列表加上了下拉导航菜单样式，导航下拉框主要用到的知识点有：定位：position:relative(相对定位)/absolute(绝对定位)；导航下拉原理：先定位实现导航需要出现在网页的位置，然后display属性设置鼠标动作：即先给需要出现下拉效果的a元素一个定位，使其作为参照物，然后给需要展示的下拉内容b元素设置为绝对定位，这样b元素就会始终相对于a
这节课主要是对上节做的布局做了一个完善，利用列表加上了下拉导航菜单样式，导航下拉框主要用到的知识点有：
定位：position:relative(相对定位)/absolute(绝对定位)；
导航下拉原理：先定位实现导航需要出现在网页的位置，然后display属性设置鼠标动作：即先给需要出现下拉效果的a元素一个定位，使其作为参照物，然后给需要展示的下拉内容b元素设置为绝对定位，这样b元素就会始终相对于a元素位置固定，最后设置鼠标移动上去之前是不可见的，移动上去后才以块级元素的方式显示：
div{
display:none;
}
div:hover{
display:block;
}
相对定位的参照物是其本身原始的位置，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存时一样，所以 它们可以覆盖页面上其他的元素
参考：https://blog.csdn.net/zgrkaka/article/details/60465183。
完成效果：
代码部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.header {
text-align: center;
width: 100%px;
height: 35px;
background: #F4F4F4;
}
.header-content {
width: 1000px;
height: 35px;
background-color: #F4F4F4;
margin: 0 auto;
}
.left {
width: 300px;
height: 35px;
background-color: #F4F4F4;
float: left;
}
.right {
width: 600px;
height: 35px;
background-color: #F4F4F4;
float: right;
}
.clear {
clear: both;
}
a {
display: inline-block;
height: 35px;
font-size: 13px;
text-decoration: none;
color: #6c6c6c;
margin: 8px 0 -8px 8px;
;
}
a:hover {
color: red;
}
#sign {
color: red;
}
#tao {
margin-left: 15px;
}
.myt {
width: 88px;
position: relative;
text-align: left;
display: inline-block;
height: 35px;
}
.cart {
display: inline-block;
height: 35px;
}
.myt:hover {
background: white;
}
.fa-cart-arrow-down {
color: #FF0000;
}
.else {
text-align: center;
margin: 0 auto;
margin-top: 50px;
width: 1000px;
height: 500px;
background-color: bisque;
}
ul {
position: absolute;
display: none;
border: 1px solid #f4f4f4;
border-top: 0px;
}
li {
font-size: 13px;
text-align: left;
text-indent: 5px;
list-style-type: none;
background-color: #ffffff;
width: 86px;
height: 30px;
line-height: 30px;
}
.myt:hover ul {
display: block;
}
li:hover {
background: #f4f4f4;
}
</style>
</head>
<body>
<div class="header">
<div class="header-content">
<div class="left">
<a id="sign" href="">亲，请登录</a>
<a href="">免费注册</a>
<a id="tao" href="">手机逛淘宝</a>
<div class="clear"></div>
</div>
<div class="right">
<a href="">淘宝首页</a>
<span class="myt">
<a href="">我的淘宝</a>
<i class="fa fa-sort-desc" aria-hidden="true"></i>
<ul>
<li>已买到的宝贝</li>
<li>我的足迹</li>
</ul>
</span>
<span class="cart">
<i class="fa fa-cart-arrow-down" aria-hidden="true"></i>
<a id="" href="">购物车</a>
</span>
<span class="myt">
<a href="">卖家中心</a>
<i class="fa fa-sort-desc" aria-hidden="true"></i>
<ul>
<li>正在出售</li>
<li>已出售</li>
<li>待发货</li>
<li>已发货</li>
</ul>
</span>
<a href="">联系客服</a>
<div class="clear"></div>
</div>
</div>
</div>
<div class="else">总结<br>
前面学过的知识这节课主要用到的： <br> 1- 将行内元素转换成块级元素（display:inline-block）<br>
2- 伪类hover改变字体和背景颜色<br>
3- 浮动和清除浮动:float:left/right;(浮动设置完后，
<br> 可以在同级元素最后设置一个空的div标签，
<br> 用css给它设置属性：clear:both即可。)<br>
4- 图标字体库的引用:引入方式跟引入外部css文件一样。<br>
</div>
</body>
</html>
批改老师：灭绝师太批改时间：2018-11-30 09:09:16
老师总结：上次作业已经说过代码有冗余，没有修改奥！定位知识理解的不错！
