摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet"&nb
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css"><!--引入外部CSS图标框架-->
<title>淘宝导航实战</title>
<style media="screen">
body{margin: 0;padding: 0;font-family:微软雅黑;} /* 清除多余的外边框样式 字体统一微软雅黑*/
.clear{clear: both;} /* 清除浮动带来的影响 */
.header{background:#f5f5f5;font-size:13px;color:#6C6C6C;}/*设置最外一层的背景和父级下所以文字大小统一12px*/
.header a{text-decoration: none;color:#6C6C6C;margin-right: 10px;}/*清掉A标签的演示，并设置自己想要的颜色*/
.header_nav{width: 1190px;margin: 0 auto;height: 35px;line-height: 35px;}/*nav导航条设宽1190px，居中显示给高+行高让文字上下居中显示*/
.header_left{float:left;width:300px;}/*向左浮动，脱离文档流*/
.header_right{float:right;width:580px;}/*向右浮动，脱离文档流*/
.margin-left{margin: 0px 5px 0px 0px;}/* 上0px，左10px，下0px，右0px */
.margin-lr{margin: 0px 10px;}/*左右10px ，上下0px*/
a:hover{color: #ff5000;}/*鼠标划入A标签变色*/
</style>
</head>
<body>
<div> <!-- 头部 -->
<div> <!-- 头部下的 nav 开始-->
<div> <!-- 头部下的左侧部分 开始 -->
<a href="#" style="color:#000;">中国大陆<i class="fa fa-angle-down" aria-hidden="true"></i></a>
<a href="#" style="color: #ff5000;">亲，请登陆</a>
<a href="#">免费注册</a>
<a href="#">手机逛淘宝</a>
</div> <!-- 头部下的左侧部分 结束 -->
<div> <!--头部下的右边部分 开始-->
<a href="#">我的淘宝</a>
<i class="fa fa-angle-down" aria-hidden="true"></i>
<i style="color: #ff5000;" class="fa fa-shopping-cart" aria-hidden="true"></i>
<a href="#">购物车</a>
<i class="fa fa-star" aria-hidden="true"></i>
<a href="#">收藏夹</a>
<a href="#">商品分类<span>|</span></a>
<i class="fa fa-angle-down" aria-hidden="true"></i>
<a href="#">卖家中心</a>
<a href="#">联系客服</a>
<i class="fa fa-angle-down margin-lr" aria-hidden="true"></i>
<i style="color: #ff5000;" class="fa fa-bars margin-lr" aria-hidden="true"></i>
<a href="#">网站导航</a>
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div> <!--头部下的右边部分 结束-->
<div></div>
</div> <!-- 头部下的 nav 结束-->
</div>
</body>
</html>以前感觉做个布局感觉挺难的，看了视频，只要把层级关系搞清楚，思路清晰问题就不大，不过有时候我理解的时候，我就会用审查元素直接在浏览器调试效果，然后满意后我就会把代码修改成想要的效果，在做这个练习的过程中遇到一个小问题，就是清除浮动的时候一行只需要清除一次，如果每浮动一次清除一次就会出现问题。总的来说，这次练习还算挺轻松的，我不知道我这个代码加上css3能完美不。还需要在那方便进行改善呢？
批改老师：灭绝师太批改时间：2018-11-19 13:47:16
老师总结：代码不错，清除浮动也是分情况的，父级高度给的足够的情况下，不需要清除也可以，父级高度是由子元素撑开的话，就一定需要清除浮动！清除浮动是在当前父级元素结束时清除
