小米商城首页模仿
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);}
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
