lovecoding
/
W250511


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
							<!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 样式重置 把浏览器自带的标签样式去掉 */
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }

        /* 工具类 */
        /* 清除浮动 */
        .clearfix::after{
            content: "";
            display: block;
            clear: both;
        }


        /* 头部导航 开始 */
        .header-nav-content{
            width: 1226px;
            margin:0 auto;
        }
        .header-nav{
            background-color: #333;
        }
        .header-nav .header-nav-left{
            float: left;
        }
        .header-nav .header-nav-right{
            float: right;
        }
        .header-nav ul li{
            float: left;
            font-size: 12px;
            color: #b0b0b0;
            height: 40px;
            line-height: 40px;
        }
        .header-nav-right ul,.header-nav-right .car{
            float: left;
        }
        .header-nav ul li:nth-child(2n){
            color: #424242;
            margin:0 6px;
        }
        .header-nav .car{
            color: #b0b0b0;
            background-color: #444;
            font-size: 12px;
            line-height: 40px;
            margin-left: 20px;
            padding:0 15px;
        }
        /* 头部导航 结束 */
    </style>
</head>

<body>
    <div class="container">
        <!-- 头部导航 开始 -->
        <div class="header-nav">
            <div class="header-nav-content clearfix">
                <div class="header-nav-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="header-nav-right">
                    <ul>
                        <li>登录</li>
                        <li>|</li>
                        <li>注册</li>
                        <li>|</li>
                        <li>消息通知</li>
                    </ul>
                    <div class="car">
                        <span>购物车（0）</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 头部导航 开始 -->
    </div>
</body>

</html>