小米商城html/css_小米商城htmlcss代码

导航条——

 <header>
        <div class="header-wrap">
            <div class="header-left">
                <ul>
                    <li>
                        <a href="">小米官网</a>
                    </li>
                    <li class="space">|</li>
                    <li>
                        <a href="">小米商城</a>
                    </li>
                    <li class="space">|</li>
                    <li>
                        <a href="">MIUI</a>
                    </li>
                    <li class="space">|</li>
                    <li>
                        <a href="">IoT</a>
                    </li>
                    <li class="space">|</li>
                    <li>
                        <a href="">云服务</a>
                    </li>
                    <li class="space">|</li>
                    <li>
                        <a href="">天星数科</a>
                    </li>
                    <li class="space">|</li>
                    <li>
                        <a href="">有品</a>
                    </li>
                    <li class="space">|</li>
                    <li>
                        <a href="">小爱开放平台</a>
                    </li>
                    <li class="space">|</li>
                    <li>
                        <a href="">企业团购</a>
                    </li>
                    <li class="space">|</li>
                    <li>
                        <a href="">资质证照</a>
                    </li>
                    <li class="space">|</li>
                    <li>
                        <a href="">协议规则</a>
                    </li>
                    <li class="space">|</li>
                    <li>
                        <a href="">下载app</a>
                        <i class="triangle"></i>
                        <div class="download">
                            <img src="./download.png">
                            <p style="font-size:14px ;">小米商城APP</p>
                        </div>
                    </li>
                    <li class="space">|</li>
                    <li>
                        <a href="">Selec Location</a>
                    </li>
                </ul>
            </div>
            <div class="header-right">
                 <ul>
                    <li>
                        <a href="">登录</a>
                    </li>
                    <li class="space">|</li>
                    <li>
                        <a href="">注册</a>
                    </li>
                    <li class="space">|</li>
                    <li>
                        <a href="">消息通知</a>
                    </li>
                    <li class="space">|</li>
                    <li class="cart">
                        <a href="">
                            <i class="iconfont icon-gouwuche"></i>
                            购物车(0)
                        </a>
                        <div class="cart-menu">
                            <span>购物车中还没有商品，赶紧选购吧!</span>
                        </div>
                    </li>
                 </ul>
 
            </div>
        </div>
    </header>

CSS样式——

/* 头部开始 */
header{
    width: 100%;
    height: 40px;
    background-color: #333;
}
.header-wrap{
    width: 1226px;
    height: 40px;
    margin: 0 auto;
    line-height: 40px;
    font-size: 12px;
}
.header-wrap a{
  color: #b0b0b0;  
}
.header-left ul>li:hover>a{
    color: #fff;
}
.header-right li:not(.cart):hover>a{
    color: #fff;
}
.header-left{
    float: left; 
}
header li{
    position: relative;
    padding-left: 2.5px;
    padding-right: 2.5px;
}
.header-left li{
    float: left;
}   
/* 二维码 */
.download{
    z-index: 20;
    width: 124px;
    height: 0;
    overflow: hidden;
    transition: all .7s;
    text-align: center;
    line-height: 28px;
    background-color: #fff;
    box-shadow: 0 2px 10px rgb(0 0 0 / 15%);
    position: absolute;
    top: 40px;
    left: 50%;
    margin-left: -62px;
}
.download>img{
    width: 90px;
    margin: 18px 15px 12px;
}
li:hover>.download{
    height: 160px;
}
/* 三角形 */
.triangle{
    width: 0px;
    height: 10px;
    border: 10px solid;
    border-color:transparent transparent #fff transparent; 
    position: absolute;
    right: 10px;
    top: 10px;
    visibility: hidden; 
}
.header-left>ul>li:hover>i{
    visibility: visible;
}
 
.header-right{
    float: right;
}
.header-right li{
    float: left;  
}
/* 购物车 */
.cart{
    width: 120px;
    height: 40px;
    background-color: rgba(96, 96, 96,0.3);
    text-align: center;
    position: relative;
}
.cart i{
    margin-right: 4px;
}
.cart:hover>a{
    color:#ff6700;
}
.cart:hover{
    background-color: #fff;
}
.cart-menu{
    z-index: 10;
    width: 316px;
    height: 0;
    overflow: hidden;
    text-align: center;
    position: absolute;
    line-height:80px ;
    top: 40px;
    right: 0;
    background-color: #fff;
    box-shadow: 0 2px 10px rgb(0 0 0 / 15%);
    transition: all .7s;
    
}
.cart:hover .cart-menu{
    height: 80px;
}
/* 头部结束 */

如有错误，欢迎指正！