行内元素a不能包含块级元素p，否则会失效
.download >a{
display: block; //转换成块级元素
}
绘制一个三角形(不知道为什么，在模块里，功能没实现)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 0;
height: 0;
border-top: 10px solid red;
// border-bottom:10px solid blue;
border-left: 10px solid transparent;
border-right: 10px solid transparent; //变为透明
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
至此，头部模块结束
<!--头部开始--><div class="header"><div class="wrap"><ul class="header-left"><li><a href="#">小米商城</a> <span>|</span></li><li><a href="#">MIUI</a><span>|</span></li><li><a href="#">loT</a><span>|</span></li><li><a href="#">云服务</a><span>|</span></li><li><a href="#">天星数科</a><span>|</span></li><li><a href="#">有品</a><span>|</span></li><li><a href="#">小爱开放平台</a><span>|</span></li><li><a href="#">企业团购</a><span>|</span></li><li><a href="#">资质证照</a><span>|</span></li><li><a href="#">协议规则</a><span>|</span></li><li><a href="#">下载app</a><span>|</span><div class="download"><a href="#"><img src="img/download.png" alt=""><p>小米商城APP</p></a></div><div class="triangle"> </div></li><li><a href="#">智能生活</a><span>|</span></li><li><a href="#">Select Location</a><span>|</span></li></ul><ul class="header-right"><li><a href="#">登录</a><span>|</span></li><li><a href="#">注册</a><span>|</span></li><li><a href="#">消息通知</a></li><li class="cart"><a href="#"><i class="iconfont"></i>购物车(0)</a><div class="cart-list">购物车中还没有商品，赶紧选购吧 </div><!-- <div class="cart-list">购物车中还没有商品，赶紧选购吧！</div> --></li></ul></div></div><!--头部结束-->
css
/*pc段布局1）浮动2）布局思路：从外到里，div嵌套*//*头部样式开始*/.header{width: 100%;height: 40px;line-height: 40px;/*//设置height和line-height相等，这样文字就居中了*/background-color:#333;font-size: 12px;}.wrap{width: 1226px;margin: 0 auto;}.header-left{float: left; //导航栏左浮}.header-right{float: right; //购物车那四个导航栏右浮}.header li{float: left; // 把所有有序列表向左浮动position: relative; }.header a {color: #b0b0b0;}.header a:hover{color: #fff;}.header span{color: #424242;margin: 0 6px;}/*购物车*/.cart{position: relative;height: 40px;width: 120px;background-color: #424242;margin-left: 25px;cursor: pointer; //将鼠标转换成小手}/*点击购物车，背景变白*/.cart:hover{background-color: #fff;}/*鼠标悬停在li上，里面的a字体变为橘色，不能直接用.cart:hover（因为字体有颜色不会继承父元素的） */.cart:hover>a{color: #ff6700;}/*购物车、下载app思路1） 绝对定位到正常的位置2）隐藏3）鼠标悬停显示*/.cart-list{/* display: none;隐藏自己，隐藏购物车下面模块 */position: absolute; /* //绝对定位相对于父元素定位 */top : 40px;right: 0;width: 316px;height: 0; /* //元素中高度设置为0，元素中内容溢出 */overflow: hidden; /* //？溢出的部分隐藏掉 */line-height: 100px;background-color: #fff;box-shadow: 0 2px 10px rgba(0 ,0,0, .15);/* //阴影 *//* // */ transition:all .3s;}/*可以过渡的属性1）颜色2）数值3）阴影4）转换*//*鼠标悬停在cart上，子元素cart-list显示*/.cart:hover >.cart-list{height: 100px;/* //高度取值为数值，可以过渡 *//* display: block; */}.download{position: absolute;top: 40px; //绝对定位/* 水平居中 */left: 50%;margin-left: -62px;width: 124px;height: 0px;background-color: #fff;box-shadow: 0 1px 5px #aaa;overflow: hidden;transition: all .3s; //延缓出现0.3s}.download img{width: 90px;margin: 18px 0 12px ;}/* 重新设置a的行高 */.download >a{display: block; //转换成块级元素}.download p{color: #333;font-size: 14px;line-height: 14px;position: relative;top: -15px;}.header-left>li:hover>.download{ height: 148px;} /* 绘制三角形 */.triangle{display: none;position: absolute;bottom: 0;left: 50%;margin-left: -8px;width: 0;height: 0;border-bottom: 8px solid red;border-right: 8px solid transparent; border-left: 8px solid transparent;}/*头部样式结束*/.header-left>li:hover>.triangle{display: block;}
