摘要：课堂笔记：间距： 注意层级清晰案例：问题：最后面那个移上去有白色背景为什么我做出来不是整个div都是白色的，而是只有一小块？<!DOCTYPE html><html><head> <meta charset="utf-8"> <title> 天猫</title> <link rel=&
课堂笔记：
间距： 
注意层级清晰
案例：
问题：最后面那个移上去有白色背景为什么我做出来不是整个div都是白色的，而是只有一小块？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 天猫</title>
<link rel="shortcut icon" type="image/x-icon" href="image/1.jpg">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="header">
<div class="header-content">
<div class="header-left">
<!-- <i class="welcome">喵，欢迎来天猫</i> -->
<div class="welcome"> 喵，欢迎来天猫</div>
<a href="https://login.tmall.com/">请登录</a>
<a href="https://register.tmall.com/">免费注册</a>
</div>
<div class="header-right">
<a href="https://login.taobao.com/" class="header-a">我的淘宝 <i class="fa fa-caret-down"></i></a>
<!-- <a href=""><i class="fa fa-cart-plus"></i> 购物车0件</a> -->
<a href=""><span class="fa fa-cart-plus"></span> 购物车0件 </a>
<a href="" class="header-a">收藏夹 <i class="fa fa-caret-down"></i> </a>
<div class="shu">丨</div>
<a href=""><span class="fa fa-mobile phone"></span> 手机版 </a>
<a href="">淘宝网</a>
<a href="" class="header-a">商家支持 <i class="fa fa-caret-down"></i></a>
<a href="" class="header-a"><span class="fa fa-list"></span> 网站导航 <i class="fa fa-caret-down"></i></a>
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
*{margin: 0px;padding:0px;}
.clear{clear:both;}
.header{width: 100%px;height: 31px;background: #F2F2F2;border: 1px solid #E2E2E2}
.header-content{width: 1250px;height: 31px;/*background-color: pink;*/margin: 0px auto;line-height: 28px}
.header-left{width: 300px;height: 31px;float: left;}
.header-right{width: 550px;height: 31px;float: right;}
a{color: #999999;margin-right: 15px;font-size: 9px;text-decoration: none;}
a:hover{color: #FF0036;text-decoration: underline;}
.welcome{color: #999999;margin-right: 15px;font-size: 9px;display: inline-block;}
.shu{color: #999999;font-size: 12px;display: inline-block;}
span{color: #FF0036;}
.header-a:hover{background-color: #fff}
批改老师：灭绝师太批改时间：2018-12-22 10:54:01
老师总结：a是内联元素，你将a连接转换为块级元素，或者给a一个padding就可以解决了，对标签属性的掌握不够透彻，要加油！
