摘要：前面学过的知识这节课主要用到的： 1- 将行内元素转换成块级元素（display:inline-block）2- 伪类hover改变字体和背景颜色3- 浮动和清除浮动:float:left/right;(浮动设置完后，<br> 可以在同级元素最后设置一个空的div标签，<br> 用css给它设置属性：clear:both即可。)4- 图标字体库的引用:
前面学过的知识这节课主要用到的：
1- 将行内元素转换成块级元素（display:inline-block）
2- 伪类hover改变字体和背景颜色
3- 浮动和清除浮动:float:left/right;(浮动设置完后，
<br> 可以在同级元素最后设置一个空的div标签，
<br> 用css给它设置属性：clear:both即可。)
4- 图标字体库的引用:引入方式跟引入外部css文件一样用link标签。
完整代码如下，另外还有本地的css文件夹。
完成图：
演示：https://code.sololearn.com/WOxQLLuBXqf7/#
<!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: dimgrey;
margin: 8px;
}
a:hover {
color: red;
}
#sign {
color: red;
}
#tao {
margin-left: 15px;
}
.myt {
display: inline-block;
height: 35px;
margin-right: 10px;
}
.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;
}
}
</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>
</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>
</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-29 14:12:42
老师总结：布局效果完成了，冗余代码太多，布局时，用最少的代码完成最好的效果，才是最好的！加油！
