lovecoding
/
web0715


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
							<!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{
            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 .hn-right .car-content{
            float: right;
            background-color: #424242;
            color: #b0b0b0;
            padding: 0 20px;
            margin-left: 20px;
        }
    </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>下载app </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>