小米商城首页样式模仿

<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>
    小米商城 - Xiaomi 11 Ultra、Redmi K40 Pro、MIX FOLD，小米电视官方网站
</title>
<!-- import reset -->
<link rel="stylesheet" href="/xiaomi/css/reset.css">
<!-- import fontawsome -->
<link rel="stylesheet" href="/xiaomi/css/css/all.css">
<!-- import css -->
<link rel="stylesheet" href="/xiaomi/css/index.css">
<link rel="stylesheet" href="/xiaomi/css/base.css">

<!-- 顶部导航条 -->
<!-- 顶部导航条外部容器 -->
<div class="topbar-wrapper">

    <!-- 创建内部容器 -->
    <div class="topbar w clearfix">
        <ul class="service">
            <li>
                <a href="javascript:;">小米商城</a>
            </li>
            <li class="line">|</li>
            <li>
                <a href="javascript:; ">MIUI</a>
            </li>
            <li class="line ">|</li>
            <li>
                <a href="javascript:; ">loT</a>
            </li>
            <li class="line ">|</li>
            <li>
                <a href="javascript:; ">云服务</a>
            </li>
            <li class="line ">|</li>
            <li>
                <a href="javascript:; ">金融</a>
            </li>
            <li class="line ">|</li>
            <li>
                <a href="javascript:; ">有品</a>
            </li>
            <li class="line ">|</li>
            <li>
                <a href="javascript:; ">小米开放平台</a>
            </li>
            <li class="line ">|</li>
            <li>
                <a href="javascript:; ">企业团购</a>
            </li>
            <li class="line ">|</li>
            <li>
                <a href="javascript:; ">资质证照</a>
            </li>
            <li class="line ">|</li>
            <li>
                <a href="javascript:; ">协议规则</a>
            </li>
            <li class="line ">|</li>
            <li class="app-wrapper">
                <a class="app" href="javascript:; ">下载app
                    <!-- 添加二维码 -->
                    <div class="qrcode">
                        <img src="https://i1.mifile.cn/f/i/17/appdownload/download.png?1" alt="">
                        <span>小米商城app</span>
                    </div>
                </a>
            </li>
            <li class="line ">|</li>
            <li>
                <a href="javascript:; ">Select Location</a>
            </li>

        </ul>
        <!-- 购物车 -->
        <ul class="shop-cart ">
            <li>
                <a href="javascript:; ">
                    <i class="fas fa-shopping-cart "></i> 购物车(0)
                </a>
            </li>
        </ul>
        <!-- 登录界面 -->
        <ul class="user-info ">
            <li>
                <a href="javascript:; ">登录</a>
            </li>
            <li class="line ">|</li>
            <li>
                <a href="javascript:; ">注册</a>
            </li>
            <li class="line ">|</li>
            <li>
                <a href="javascript:; ">消息通知</a>
            </li>
        </ul>

    </div>
</div>
<!-- 创建头部外部容器 -->
<div class="header-wrapper">
    <div class="header w clearfix">
        <!-- 创建logo -->
        <h1 class="logo">
            <a href="javasrcipt:;">

            </a>
        </h1>
        <!-- 创建中间导航条容器 -->
        <div class="nav-wrapper">
            <ul class="nav clearfix">

                <li class="all-goods-wrapper">
                    <a class="all-goods" href="javascript:;">全部商品分类</a>
                    <!-- 创建左侧导航菜单 -->
                    <ul class="left-menu">
                        <li>
                            <a href="#">手机 电话卡
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">电视盒子  
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">笔记本 平板  
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">家电 插线板  
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">出行 穿戴  
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">智能 路由器  
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">电源 配件  
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">健康 儿童  
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">耳机 音箱  
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">生活 箱包  
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                    </ul>

                </li>
                <li class="show-goods">
                    <a href="javascript:;">Xiaomi手机</a>
                </li>
                <li class="show-goods">
                    <a href="javascript:;">Redmi红米</a>
                </li>
                <li class="show-goods">
                    <a href="javascript:;">电视</a>
                </li>
                <li class="show-goods">
                    <a href="javascript:;">笔记本</a>
                </li>
                <li class="show-goods">
                    <a href="javascript:;">平板</a>
                </li>
                <li class="show-goods">
                    <a href="javascript:;">家电</a>
                </li>
                <li class="show-goods">
                    <a href="javascript:;">路由器</a>
                </li>
                <li>
                    <a href="javascript:;">服务</a>
                </li>
                <li>
                    <a href="javascript:;">社区</a>
                </li>
                <!-- 创建一个弹出层 -->
                <div class="goods-info"></div>
            </ul>
        </div>
        <!-- 创建搜索框 -->
        <div class="search-wrapper">
            <form action="#">
                <input class="search-inp" type="text">
                <button class="search-btn">
                    <i class="fas fa-search"></i>
                </button>
            </form>

        </div>

    </div>
</div>
<!-- 创建banner -->
<div class="banner-wrapper">
    <div class="banner w">
        <ul class="img-list">
            <li>
                <a href="#">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9e66e9d1e25726cc0dcb6b743e5b388b.png" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9e66e9d1e25726cc0dcb6b743e5b388b.png" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9e66e9d1e25726cc0dcb6b743e5b388b.png" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9e66e9d1e25726cc0dcb6b743e5b388b.png" alt="">
                </a>
            </li>

        </ul>
        <div class="pointer">
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
        </div>
    </div>

</div>

/* 主页样式表 */
/ 顶部导航条容器 /
.topbar-wrapper {
/* 设置宽度全屏 行高  垂直 背景色*/
width: 100%;
height: 40px;
line-height: 40px;
background-color: #333;
}
/ 设置超链接颜色 /
.topbar a {
font-size: 12px;
color: #b0b0b0;
display: block;
}
.topbar a:hover {
color: #fff;
}
/ 设置超链接颜色 /
.topbar .line {
font-size: 12px;
color: #424242;
margin: 0 8px;
margin-top: -1px;
}
/ 设置左侧导航栏 /
.service,
.topbar-wrapper li {
float: left;
}
.app {
position: relative;
}
/ 设置app下拉 /
.app .qrcode {
/* display: none; */
position: absolute;
left: -40px;
/* margin-left: -62px; */
width: 124px;
height: 0px;
overflow: hidden;
background-color: #fff;
line-height: 1;
text-align: center;
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
transition: height 1s;
}
.app-wrapper:hover>.app .qrcode {
display: block;
height: 148px;
}
/ 设置app三角 /
.app-wrapper:hover>.app::after {
display: block;
/* 设置绝对定位 */
position: absolute;
width: 0;
height: 0;
content: '';
border: 8px solid transparent;
border-top: none;
border-bottom-color: #fff;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
/ 设置二维码图片 /
.app .qrcode img {
width: 90px;
margin: 17px 17px;
margin-bottom: 10px;
}
/ 设置二维码文字 /
.app .qrcode span {
font-size: 14px;
color: #000;
}
/ 右侧导航栏 /
.shop-cart,
.user-info {
float: right;
}
/ 设置购物车样式 /
.shop-cart {
margin-left: 26px;
}
.shop-cart a {
width: 120px;
background-color: #424242;
text-align: center;
}
.shop-cart:hover a {
background-color: #fff;
color: #ff6700;
}
.shop-cart i {
margin-right: 2px;
}
/ 设置中间header /
.header {
height: 100px;
}
.header-wrapper {
position: relative;
}
.header .logo {
float: left;
margin-top: 22.5px;
}
.header .logo a {
display: block;
width: 55px;
height: 55px;
background-image: url(https://s02.mifile.cn/assets/static/image/logo-mi2.png);
background-position: center;
background-size: 100% 100%;
}
/ 设置中间导航条 /
.header .nav-wrapper {
float: left;
margin-left: 7px;
}
/ 设置导航条 /
.header .nav {
/* width: 898px; */
height: 100px;
line-height: 100px;
/* background-color: #bfa; */
padding-left: 58px;
}
/ 设置导航条中的li /
.nav>li {
float: left;
}
.nav-wrapper li a {
display: block;
font-size: 10px;
margin-right: 20px;
}
.nav-wrapper li a:hover {
color: #ff6700;
}
/ 设置左侧导航条 /
.all-goods-wrapper {
position: relative;
}
.left-menu {
padding: 20px 0;
width: 214px;
height: 420px;
background-color: rgba(0, 0, 0, .6);
position: absolute;
z-index: 9;
left: -120px;
line-height: 1;
}
.left-menu a i {
float: right;
line-height: 42px;
}
ul .left-menu li a {
display: block;
height: 42px;
line-height: 42px;
color: white;
margin-right: 0;
padding: 0 30px;
}
ul .left-menu li a:hover {
color: white;
background-color: #ff6700;
}
/ 隐藏全部是商品 /
.all-goods {
visibility: hidden;
}
.nav .goods-info {
height: 0;
width: 100%;
background-color: #fff;
/* border-top: 1px solid rgb(224, 224, 224); */
position: absolute;
top: 100px;
left: 0;
transition: height 0.3s;
/* box-shadow: 0 5px 3px rgba(0, 0, 0, .1); */
z-index: 999;
}
.show-goods:hover~.goods-info,
.goods-info:hover {
height: 228px;
border-top: 1px solid rgb(224, 224, 224);
box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
}
/ 设置搜索框 /
.search-wrapper {
width: 296px;
height: 50px;
float: right;
margin-top: 25px;
}
.search-wrapper .search-inp {
box-sizing: border-box;
width: 244px;
float: left;
padding: 0 10px;
height: 50px;
font-size: 16px;
border: 1px solid rgb(224, 224, 224);
outline: none;
}
/ 设置获取焦点后样式 /
.search-wrapper .search-inp:focus,
.search-wrapper .search-inp:focus+button {
border-color: #ff6700;
}
.search-wrapper .search-btn {
float: left;
height: 50px;
width: 52px;
padding: 0;
border: none;
background-color: #fff;
color: #616161;
font-size: 16px;
border: 1px solid rgb(224, 224, 224);
border-left: none;
}
.search-wrapper .search-btn:hover {
background-color: #ff6700;
color: white;
border: none;
}
/ 设置banner /
.banner {
position: relative;
height: 460px;
}
.banner .img-list li {
position: absolute;
}
.banner img {
width: 100%;
vertical-align: top;
}
/ 设置导航点 /
.pointer {
position: absolute;
bottom: 22px;
right: 35px;
margin-left: 6px;
}
.pointer a {
float: left;
width: 6px;
height: 6px;
border: 2px solid rgba(255, 255, 255, 0.8);
border-radius: 50%;
background-color: rgba(56, 56, 56, 0.4);
margin-left: 6px;
}
.pointer a:hover {
border: 2px solid rgba(56, 56, 56, 0.4);
background-color: rgba(255, 255, 255, 0.8);
}