在用html+css写小米商城首页时，最繁琐的可谓是头部和导航栏，在这里对头部进行实现
可以看到头部有16个超链接形式，左边12个，右边4个，并且整个布局的内容是在中间宽度的，所以可以在头部标签嵌套一个宽度为1226px的标签wrap，为了实现内容，在wrap里面设置两个盒子
一个header-left，一个headder-right，区分左右盒子，如图
<div class="header"><div class="wrap"> <ul class="header-left"></ul><ul class="header-right"></ul>为了实现左右如此多数量的超链接，这里使用的是ul>li>a的形式，也就是在li里嵌套a，将文字输入可将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><div class="cart2"><a href="#"><img src="images/wx-img.png" alt=""><p>小米商城APP</p></a></div><div class="triangle"></div><span> | </span></li><li><a href="#">Select Location</a></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="#">购物车</a><div class="cart-list">购物车还没有商品，赶紧选购吧</div></li></ul></div></div>在这里用两个重点内容，就是怎么实现鼠标悬停在下载app上出现一个图片，并且图片上面三角形的制作，如图所示
先给出头部相关css代码
.cart2 {z-index: 800;position: absolute;top: 40px;/* 水平居中 */left: 50%;margin-left: -62px;width: 124px;height: 0;overflow: hidden;background-color: #fff;box-shadow: 0 1px 5px #aaa;transition: height 0.5s;
}.cart2 img {width: 90px;margin: 18px 16px 12px;
}.cart2 p {position: relative;top: -15px;color: #333;font-size: 14px;line-height: 14px;text-align: center;
}.header-left>li:hover>.cart2 {height: 148px;
}
实现悬停鼠标出现图片首先要先将图片隐藏，这里使用display：none
在鼠标悬停时使用display：block
即可实现鼠标悬停时出现图片
下一个效果是怎么将图片摆在下载app的正下方，这里用到定位
在.cart2上加入绝对定位，在li上加入相对定位，图片相对与li上的位置的摆放
top：40px
left：50%
margin-left：-62px（宽的一半）
这三行代码实现的是图片的位置，还有为了让图片有过渡动画需要使用transition
CSS transition 属性
在这里有进行介绍
而关于三角形的绘制有很多种，这里我使用的是边框绘制，代码如下
.triangle {display: none;position: absolute;bottom: 0;left: 50%;margin-left: -8px;width: 0;height: 0;border-bottom: 8px solid #fff;border-left: 8px solid transparent;border-right: 8px solid transparent;}.header-left>li:hover>.triangle {display: block;
}
