lovecoding
/
web0715


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* css reset */
        body,ul,p{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        /* css 工具类 */
        .clearfix::after{
            content: "";
            display: block;
            clear: both;
        }
        .content{
            width: 1226px;
            margin:0 auto;
        }

        /* 头部导航 css start */
        .header-nav{
            background-color: #333;
            color: #b0b0b0;
            font-size: 12px;
            line-height: 40px;
        }
        .header-nav .content{
            height: 40px;
        }
        .header-nav .hn-left{
            float: left;
        }
        .header-nav .hn-right{
            float: right;
        }
        .header-nav li{
            display: inline-block;
        }
        
        .header-nav .hn-right ul{
            float: left;
        }
        .header-nav li:nth-child(even){
            color: #424242;
        }
        .header-nav li:nth-child(odd):hover{
            cursor: pointer;
            color: #fff;
        }
        .header-nav .hn-right .car-content{
            float: right;
            background-color: #424242;
            color: #b0b0b0;
            padding: 0 20px;
            margin-left: 20px;
        }
        .header-nav .download-btn{
            position: relative;
        }
        .header-nav .download-btn .appcode{
            display: none;
            position: absolute;
            left: 50%;
            margin-left: -62px;
            box-shadow: 0 1px 5px #aaa;
            width: 124px;
            text-align: center;
        }
        .header-nav .download-btn:hover .appcode{
            display: block;
        }
        .header-nav .download-btn .appcode::before{
            content: "";
            width: 0;
            height: 0;
            display: block;
            border-top: 10px solid rgba(0, 0, 0, 0);
            border-left: 10px solid rgba(0, 0, 0, 0);
            border-right: 10px solid rgba(0, 0, 0, 0);
            border-bottom: 10px solid #fff;
            /* margin: -30px auto 0; */
            position: absolute;
            left: 50%;
            top:-20px;
            margin-left: -10px;
        }
        .header-nav .appcode img{
            width: 90px;
            height: 90px;
            /*      上   左右  下*/
            margin:18px auto  0;
        }
        .header-nav .appcode p{
            font-size: 14px;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 头部导航 -->
        <div class="header-nav">
            <div class="content clearfix">
                <div class="hn-left">
                    <ul>
                        <li>小米官网</li>
                        <li>|</li>
                        <li>小米商城 </li>
                        <li>|</li>
                        <li>小米澎湃OS </li>
                        <li>|</li>
                        <li> 小米汽车 </li>
                        <li>|</li>
                        <li>云服务 </li>
                        <li>|</li>
                        <li>IoT </li>
                        <li>|</li>
                        <li>有品 </li>
                        <li>|</li>
                        <li>小爱开放平台 </li>
                        <li>|</li>
                        <li>资质证照 </li>
                        <li>|</li>
                        <li>协议规则 </li>
                        <li>|</li>
                        <li class="download-btn">下载app 
                            <div class="appcode">
                                <img src="./img/download.png" alt="二维码">
                                <p>小米商城APP</p>
                            </div>
                        </li>
                        <li>|</li>
                        <li> Select Location</li>
                    </ul>
                </div>
                <div class="hn-right">
                    <ul>
                        <li>登录</li>
                        <li>|</li>
                        <li>注册</li>
                        <li>|</li>
                        <li>消息通知</li>
                    </ul>
                    <div class="car-content">
                        <span>购物车(0)</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 顶部导航 -->
        <div class="top-nav"></div>
        <!-- 轮播图区域 -->
        <div class="slider-content"></div>
        <!-- 商品展示区域 -->
        <div class="goods-content"></div>
    </div>
</body>
</html>