lovecoding
/
W250511


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4974983_5en83d04csd.css">
    <style>
        /* css reset 样式重置 把浏览器自带的标签样式去掉 */
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

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

        /* 字体库 */
        /* 声明字体 */
        /* @font-face { */
            /* 字体名称 声明*/
            /* font-family: "iconfont"; */
            /* 引入字体 */
            /* src: url('https://at.alicdn.com/t/c/font_4974983_ok50xp288v.woff2?t=1752545241384') format('woff2'),
                url('https://at.alicdn.com/t/c/font_4974983_ok50xp288v.woff?t=1752545241384') format('woff'),
                url('https://at.alicdn.com/t/c/font_4974983_ok50xp288v.ttf?t=1752545241384') format('truetype');
        } */

        /* 字体图标 使用iconfont这个就是开始使用自定义字体图标*/
        /* .iconfont { */
            /* 字体图标 引用 */
            /* font-family: "iconfont" !important;
            font-size: 16px; */
            /* 字体图标 正常 */
            /* font-style:normal; */
            /* 字体图标 平滑 */
            /* -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        } */
        /* 购物车图标 */
        /* .icon-gouwuchekong:before {
            content: "\e600";
        } */


        /* 头部导航 开始 */
        .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 ul li:nth-child(2n+1):hover {
            cursor: pointer;
            color: #fff;
        }

        .header-nav .car {
            color: #b0b0b0;
            background-color: #444;
            font-size: 12px;
            line-height: 40px;
            margin-left: 20px;
            padding: 0 15px;
            height: 40px;
            position: relative;
        }
        .header-nav .car .car-content{
            position: absolute;
            right: 0;
            top: 40px;
            width: 320px;
            background-color: #fff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
            padding: 20px 0;
            text-align: center;
            display: none;
        }
        .header-nav .car:hover{
            background-color: #fff;
            color: #ff6700;
        }

        .header-nav .car:hover .car-content{
            display: block;
        }
        .download-btn {
            position: relative;
        }

        .download-btn:hover .download-app {
            display: block;
        }

        .download-app {
            position: absolute;
            left: 50%;
            margin-left: -60px;
            box-shadow: 0 0 10px rgba(0, 0, 0, .5);
            padding: 15px;
            line-height: 20px;
            display: none;

        }

        .download-app img {
            width: 90px;
        }

        .download-app p {
            font-size: 12px;
            color: #424242;
            text-align: center;
        }

        .download-app i {
            position: absolute;
            top: -20px;
            left: 50%;
            margin-left: -10px;
            border-top: 10px solid transparent;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid white;
        }
        /* 头部导航 结束 */
    </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 class="download-btn">下载app
                            <!-- 下载APP二维码弹框 -->
                            <div class="download-app">
                                <i></i>
                                <img src="./image/download.png" alt="img">
                                <p>小米商城APP</p>
                            </div>
                        </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> <i class="iconfont icon-gouwuchekong"></i> 购物车（0）</span>
                        <div class="car-content">
                            <p>购物车中还没有商品，赶紧选购吧！</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 头部导航 开始 -->
         <i class="iconfont icon-search"></i>
    </div>
</body>

</html>