仿写小米商城导航栏

最新推荐文章于 2022-09-01 15:36:43 发布

Destiny,635

最新推荐文章于 2022-09-01 15:36:43 发布

阅读量493

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_56319791/article/details/122388084

版权

效果图
在这里插入图片描述

上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城</title>
    <link rel="shortcut icon" href="https://s02.mifile.cn/assets/static/image/logo-mi2.png" type="image/x-icon">
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        a{
            text-decoration: none;
        }
        @font-face {
            font-family: 'iconfont';
            src: url('font/iconfont.ttf?t=1641648941995') format('truetype');
            }
        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
         }

        .top-bar{
            width: 100%;
            height: 40px;
            font-size: 12px;
            background-color: #333;
        }
        .container{
            width: 1326px;
            height: 40px;
            margin: 0 auto;

        }
        .top-bar .child-l{
            width: 900px;
            height: 40px;
            float: left;
        }
        .top-bar .child-r{
            width: 100px;
            height: 40px;
            float: right;
        }
        .top-bar .child-info{
            width: 152px;
            height: 40px;
            float: right;
        }
        .top-bar a{  
            line-height: 40px;
            color: #b0b0b0;
        }
        .top-bar a:hover{
            color: #fff;
            display: inline-block;
        }
        .top-bar span{
            margin: .3em;
            color: #424242;
        }
        .header{
            width: 100%;
            height: 100px;
        }
        .header img{
            width: 56px;
            height: 56px;
        }
        .header .header-logo{
            float: left;
            width: 56px;
            height: 56px;
            margin-top: 22px;
        }
        ul,li{
            list-style:none;
        }
        .header-nav{
            float: left;
            width: 800px;
            height: 100px;
            margin-left: 152px;
        }
        .header .nav-list li{
            float: left; 
            margin: 0 .2em; 
        }
        .header .nav-list{
            margin-top: 32px;
            margin-left: 50px;
        }
        .header .nav-list a{
            color: #b0b0b0;
            font-size: 16px;
            display: inline-block;
            width: 56px;
            height: 78px;
        }
        .header .nav-list a:hover{
            color: #FF6600;
        }
        .header-search{
            float: right;
            width: 300px;
            height: 100px;
        }
        .header-search .search-content{
            width: 240px;
            height: 50px;
            margin-top: 22px;
        }
    </style>
</head>
<body>
    <div class="top-bar">
        <div class="container">
            <div class="child-l">
                <a href="#">小米商城</a>
                <span>|</span>
                <a href="#">MIUI</a>
                <span>|</span>
                <a href="#">loT</a>
                <span>|</span>
                <a href="#">云服务</a>
                <span>|</span>
                <a href="#">天星数科</a>
                <span>|</span>
                <a href="#">有品</a>
                <span>|</span>
                <a href="#">小爱开放平台</a>
                <span>|</span>
                <a href="#">企业团购</a>
                <span>|</span>
                <a href="#">资质证照</a>
                <span>|</span>
                <a href="#">协议规则</a>
                <span>|</span>
                <a href="#">下载app</a>
                <span>|</span>
                <a href="#">智能生活</a>
                <span>|</span>
                <a href="#">SelectLocation</a>
            </div>
            <div class="child-r">
                <span class="iconfont">&#xf0179;</span>
                <a href="#">购物车 (0)</a>
            </div>   
            <div class="child-info">
                <a href="#">登录</a>
                <span>|</span>
                <a href="#">注册</a>
                <span>|</span>
                <a href="#">消息通知</a>
            </div>
        </div>
    </div>
    <div class="header">
        <div class="container">
            <a href="#" class="header-logo"><img src="https://s02.mifile.cn/assets/static/image/logo-mi2.png" alt="小米官网"></a>
            <div class="header-nav">
                <ul class="nav-list">
                    <li><a href="#"><span>Xiaomi手机</span></a></li>
                    <li><a href="#"><span>Redmi红米</span></a></li>
                    <li><a href="#"><span>电视</span></a></li>
                    <li><a href="#"><span>笔记本</span></a></li>
                    <li><a href="#"><span>平板</span></a></li>
                    <li><a href="#"><span>家电</span></a></li>
                    <li><a href="#"><span>路由器</span></a></li>
                    <li><a href="#"><span>服务</span></a></li>
                    <li><a href="#"><span>社区</span></a></li>
                </ul>
            </div>
            <div class="header-search">
            <input class="search-content" type="text" placeholder="路由器">
            </div>
        </div>
    </div>
</body>
</html>