小米商城头部实例

在用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;
}