小米商城首页模仿

mi.png

HTML代码

<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>
    小米商城 - 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">

</head>

<body>

<!-- 顶部导航条 -->
<!-- 顶部导航条外部容器 -->
<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>

CSS代码:

/* 主页样式表 */

/ 顶部导航条容器 /

.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);

}

最后修改:2022 年 03 月 20 日
如果觉得我的文章对你有用,请随意赞赏