- html 部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米商城 - 小米11、Redmi Note 9、小米MIX Alpha，小米电视官方网站</title>
<link rel="icon" href="//s01.mifile.cn/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="http:at.alicdn.com/t/font_2364852_tc4n61npwke.css">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="header">
<div class="site-topbar">
<div class="container">
<div class="topbar-nav">
<a rel="nofollow" href="//www.mi.com/index.html">小米商城</a>
<span class="sep">|</span>
<a rel="nofollow" href="//www.miui.com/" target="_blank">MIUI</a>
<span class="sep">|</span>
<a rel="nofollow" href="//iot.mi.com" target="_blank">IoT</a>
<span class="sep">|</span>
<a rel="nofollow" href="//i.mi.com/" target="_blank">云服务</a>
<span class="sep">|</span>
<a rel="nofollow" href="//airstar.com/home" target="_blank">天星数科</a>
<span class="sep">|</span>
<a rel="nofollow" href="//youpin.mi.com/" target="_blank">有品</a>
<span class="sep">|</span>
<a rel="nofollow" href="//xiaoai.mi.com/" target="_blank">小爱开放平台</a>
<span class="sep">|</span>
<a rel="nofollow" href="//qiye.mi.com/" target="_blank">企业团购</a>
<span class="sep">|</span>
<a rel="nofollow" href="//www.mi.com/aptitude/list/?id=41" target="_blank">资质证照</a>
<span class="sep">|</span>
<a rel="nofollow" href="//www.mi.com/aptitude/list/" target="_blank">协议规则</a>
<span class="sep">|</span>
<a rel="nofollow" href="//www.mi.com/appdownload/" target="_blank" id="J_siteDownloadApp"
class="topbar-download">下载app
<span class="appcode">
<img src="//i1.mifile.cn/f/i/17/appdownload/download.png?1" alt="小米商城" width="90"
height="90">
小米商城APP
</span>
</a>
<span class="sep">|</span>
<a rel="nofollow" href="https://xiaomishare.mi.com/?from=micom" target="_blank">智能生活</a>
<span class="sep">|</span>
<a rel="nofollow" href="javascript:;" class="J_siteGlobalRegion">Select Location</a>
</div>
<div id="J_miniCartTrigger" class="topbar-cart">
<a rel="nofollow" id="J_miniCartBtn" href="//www.mi.com/buy/cart" class="cart-mini">
<em class="iconfont icon-Shapecopy"></em> 购物车（0）
<div id="J_miniCartMenu" class="cart-menu">
<div class="msg msg-empty hide">购物车中还没有商品，赶紧选购吧！</div>
</div>
</a>
</div>
<div id="J_siteUserInfo" class="topbar-info">
<a rel="nofollow" href="javascript:void(0);" data-agreement="true" data-login="true" class="link"
data-href="//order.mi.com/site/login?redirectUrl=https://www.mi.com/">
登录
</a>
<span class="sep">|</span>
<a rel="nofollow" href="javascript:void(0);" data-agreement="true" data-register="true" class="link"
data-href="//account.xiaomi.com/pass/register">
注册
</a>
<span class="sep">|</span>
<span class="message">
<a rel="nofollow" href="javascript:void(0);" data-href="//www.mi.com/user/message"
class="J_needAgreement" data-login="true" data-agreement="true">
消息通知
<i class="J_miMessageTotal"></i>
</a>
</span>
</div>
</div>
</div>
<div class="site-header">
<div class="container">
<div class="header-logo">
<a href="https://www.mi.com/index.html" title="小米官网" class="logo" stat_exposure="true"></a>
</div>
<div class="header-nav">
<ul class="nav">
<li><a href="#">小米手机</a></li>
<li><a href="#">Redmi红米</a></li>
<li><a href="#">电视</a></li>
<li><a href="#">笔记本</a></li>
<li><a href="#">家电</a></li>
<li><a href="#">路由器</a></li>
<li><a href="#">智能硬件</a></li>
<li><a href="#">服务器</a></li>
<li><a href="#">社区</a></li>
<div class="goods_info"></div>
</ul>
</div>
<div class="header-search">
<form class="search" action="//search.mi.com/search" method="GET">
<input class="search-inp" type="text">
<button class="search-btn">
<i class="iconfont icon-sousuo"></i>
</button>
</form>
</div>
</div>
</div>
</div>
<div class="home-hero-container container">
<div class="home-hero">
<div id="J_homeSwiper" class="swiper-container">
<div class="left-menu">
<ul class="nav">
<li class="item">
<a href="https://www.mi.com/p/1915.html" class="list-item">手机 电话卡
<i class="iconfont icon-youjiantou"></i>
</a>
</li>
<li class="item">
<a href="https://www.mi.com/a/h/9819.html" class="list-item">电视 盒子
<i class="iconfont icon-youjiantou"></i>
</a>
</li>
<li class="item">
<a href="https://www.mi.com/a/h/7529.html" class="list-item">笔记本 显示器
<i class="iconfont icon-youjiantou"></i>
</a>
</li>
<li class="item">
<a href="https://www.mi.com/p/9285.html" class="list-item">家电 插线板
<i class="iconfont icon-youjiantou"></i>
</a>
</li>
<li class="item">
<a href="https://www.mi.com/p/9289.html" class="list-item">出行 穿戴
<i class="iconfont icon-youjiantou"></i>
</a>
</li>
<li class="item">
<a href="https://www.mi.com/a/h/8363.html" class="list-item">智能 路由器
<i class="iconfont icon-youjiantou"></i>
</a>
</li>
<li class="item">
<a href="https://www.mi.com/p/9290.html" class="list-item">电源 配件
<i class="iconfont icon-youjiantou"></i>
</a>
</li>
<li class="item">
<a href="https://www.mi.com/p/9291.html" class="list-item">健康 儿童
<i class="iconfont icon-youjiantou"></i>
</a>
</li>
<li class="item">
<a href="https://www.mi.com/p/9292.html" class="list-item">耳机 音响
<i class="iconfont icon-youjiantou"></i>
</a>
</li>
<li class="item">
<a href="https://www.mi.com/buy?product_id=11674" class="list-item">生活 箱包
<i class="iconfont icon-youjiantou"></i>
</a>
</li>
</ul>
</div>
<div class="Carousel-map">
<div class="banner">
<ul class="img-list">
<li>
<a href="https://www.mi.com/buy?product_id=10000214">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c682c6c4bb7768e7278023bbd3dfd121.jpg?w=2452&h=920"
alt="">
</a>
</li>
<li>
<a href="https://www.mi.com/buy?product_id=10000267">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6a60c7eb2229733d85d8b4aea3be4ddd.jpg?thumb=1&w=1533&h=575&f=webp&q=90"
alt="">
</a>
</li>
<li>
<a href="https://www.mi.com/redmitv/98/">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9ebff5f5c1f52f2dbdd611897adbefd4.jpg?thumb=1&w=1533&h=575&f=webp&q=90"
alt="">
</a>
</li>
<li>
<a href="https://www.mi.com/a/h/17671.html">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0ef4160c861b998239bce9adb82341e7.jpg?thumb=1&w=1533&h=575&f=webp&q=90"
alt="">
</a>
</li>
</ul>
<div class="pointer">
<a class="action" href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
<div class="prev-next">
<a class="prev" href="#"></a>
<a class="next" href="#"></a>
</div>
</div>
</div>
</div>
<div class="home-hero-sub row">
<ul class="home-channel-list clearfix">
<li>
<a href="https://www.mi.com/buy/seckill">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48"
alt="">
小米秒杀
</a>
</li>
<li>
<a href="https://qiye.mi.com/">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48"
alt="">
企业团购
</a>
</li>
<li>
<a href="https://www.mi.com/order/fcode">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eded6fa3b897a058163e2485532c4f10.png?w=48&h=48"
alt="">
F码通道
</a>
</li>
<li>
<a href="https://www.mi.com/mimobile/">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/43a3195efa6a3cc7662efed8e7abe8bf.png?w=48&h=48"
alt="">
米粉卡
</a>
</li>
<li>
<a href="https://www.mi.com/a/h/16769.html">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4846bca6010a0deb9f85464409862af.png?w=48&h=48"
alt="">
以旧换新
</a>
</li>
<li>
<a href="https://recharge.10046.mi.com/">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a76d7636b08e0988efb4fc384ae497b.png?w=48&h=48"
alt="">
话费充值
</a>
</li>
</ul>
<ul class="home-promo-list">
<li class="pro">
<a href="https://www.mi.com/buy/detail?product_id=12511">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5d4298059889417157e8492750328492.jpg?w=632&h=340"
alt="">
</a>
</li>
<li class="pro">
<a href="https://www.mi.com/buy?product_id=10000244">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8a43378b96501d7e227a9018fe2668c5.jpg?w=632&h=340"
alt="">
</a>
</li>
<li>
<a href="https://www.mi.com/buy?product_id=12931">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/793913688bfaee26b755a0b0cc8575fd.jpg?w=632&h=340"
alt="">
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
- css 部分
body {
font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
color: #333;
background-color: #fff;
min-width: 1226px;
}
.clearfix{
clear: both;
}
.site-topbar {
position: relative;
height: 40px;
font-size: 12px;
color: #b0b0b0;
z-index: 30;
background-color: #333;
}
.site-topbar .container {
width: 1226px;
height: 40px;
margin: 0 auto;
}
.topbar-nav {
float: left;
height: 40px;
}
.topbar-nav a:hover{
color: white;
}
.site-topbar a {
text-decoration: none;
color: #b0b0b0;
line-height: 40px;
}
.site-topbar .sep {
margin: 0 .3em;
color: #424242;
}
.topbar-download {
position: relative;
}
.site-topbar .topbar-download .appcode {
position: absolute;
top: 27px;
left: 50%;
width: 124px;
height: 0px;
background: #fff;
margin-left: -55px;
-webkit-box-shadow: #aaa 0 1px 5px;
box-shadow: 0 1px 5px #aaa;
text-align: center;
font-size: 14px;
color: #333;
line-height: 1;
overflow: hidden;
-webkit-transition: height .3s;
transition: height .3s;
}
.topbar-download:hover::after {
/* display: none; */
content: '';
position: absolute;
width: 0px;
height: 0px;
top: 20px;
left: 15px;
border: 7px solid transparent;
border-top: none;
border-bottom-color: white;
}
.topbar-download:hover .appcode {
height: 140px;
}
.topbar-download .appcode img {
margin: 10px 14px;
}
.site-topbar .topbar-cart {
position: relative;
float: right;
width: 120px;
height: 40px;
margin-left: 15px;
-webkit-transition: all .2s;
transition: all .2s;
font-size: 12px;
}
.topbar-cart .cart-mini {
display: block;
height: 40px;
line-height: 40px;
color: #b0b0b0;
background-color: #424242;
text-align: center;
}
.topbar-cart .cart-mini .icon-Shapecopy {
margin-right: 4px;
}
.site-topbar .topbar-info {
position: relative;
height: 40px;
line-height: 40px;
float: right;
}
.site-topbar .cart-menu {
font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
font-size: 12px;
position: absolute;
right: 0;
top: 40px;
z-index: 31;
width: 316px;
color: #424242;
background: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
overflow: hidden;
transition: height .3s;
height: 0px;
}
.msg-empty {
width: 300px;
height: 40px;
line-height: 40px;
font-size: 14px;
/* background-color:#666; */
margin: 30px 20px;
}
.cart-mini:hover {
background-color: white;
color: orange;
}
.cart-mini:hover .cart-menu {
height: 100px;
}
.site-header {
z-index: 20;
height: 100px;
position: relative;
}
.site-header .container {
width: 1226px;
height: 100px;
margin: 0 auto;
position: relative;
/* background-color: aquamarine; */
}
.header-logo {
float: left;
width: 62px;
margin-top: 22px;
}
.site-header .logo {
position: relative;
display: block;
width: 55px;
height: 55px;
overflow: hidden;
background-color: #ff6700;
}
.header-logo::after, .header-logo::before {
position: absolute;
top: 23px;
left: 0;
width: 55px;
height: 55px;
content: '';
z-index: 1;
transition: all .2s;
transform-origin: 50% 50%;
transform: translateZ(0);
}
.header-logo::after {
margin-left: -55px;
background: url(https://s02.mifile.cn/assets/static/image/mi-home.png) no-repeat 50% 50%;
}
.header-logo::before {
background: url(https://s02.mifile.cn/assets/static/image/mi-logo.png) no-repeat 50% 50%;
opacity: 1;
}
.header-logo:hover::after, .header-logo:hover::before {
transform: translate(55px);
}
.header-nav .nav{
height: 88px;
width: 700px;
/* background-color: orchid; */
margin-top: 8px;
margin-left: 180px;
float: left;
}
.header-nav .nav li{
float: left;
display: block;
padding-right:26px;
}
.header-nav .nav a{
line-height: 88px;
color: #333;
text-decoration: none;
}
.header-nav .nav a:hover{
color: #ff6700;
}
.header-nav .nav .goods_info{
height: 0;
/* height: 228px; */
overflow: hidden;
width: 1523px;
background-color: #fff;
position: absolute;
top: 90px;
left: -150px;
transition: height .3s;
}
.header-nav .nav li:hover ~ .goods_info,
.goods_info:hover{
height: 228px;
box-shadow: 0 5px 3px rgba(0, 0, 0, .2);
border-top: 1px solid rgb(224, 224, 224);
}
.header-search{
width: 280px;
height: 50px;
/* background-color: red; */
float: right;
margin-top: 25px;
}
.header-search .search-inp{
float: left;
border: 1px solid rgb(224, 224, 224);
font-size: 16px;
width: 207px;
padding: 0 10px;
height: 50px;
outline: none;
}
.header-search .search-btn{
float: left;
height: 52px;
border: 1px solid rgb(224, 224, 224);;
border-left: none;
padding: 0;
width: 51px;
background-color: #fff;
}
.header-search .search-inp:hover,
.header-search .search-inp:hover + .search-btn{
border-color: gray;
}
.header-search .search-inp:focus,
.header-search .search-inp:focus + button
{
border-color: #ff6700;
}
.header-search .search-btn:hover{
background-color: #ff6700;
color: white;
}
.home-hero{
position: relative;
width: 1226px;
height: 644px;
margin-bottom: 26px;
margin-left: 146px;
/* background-color: purple; */
}
.swiper-container .left-menu{
height: 460px;
width: 234px;
border: 0px;
position: absolute;
background-color: rgba(105,101,101,.6);
color:#fff;
z-index: 3;
}
.swiper-container .left-menu .nav{
width: 100%;
height: 420px;
margin-top: 20px;
position: relative;
/* background-color: rebeccapurple; */
}
.swiper-container .left-menu .nav li{
width: 234px;
height: 42px;
line-height: 42px;
/* background-color: #ff6700; */
}
.left-menu .nav li a{
display: block;
text-decoration: none;
margin-left: 40px;
color: #fff;
}
.left-menu .nav li a .icon-youjiantou{
float: right;
margin-right: 20px;
}
.left-menu .nav li:hover{
background-color: #ff6700;
}
.Carousel-map .banner{
position: relative;
height: 460px;
}
.Carousel-map .banner img{
width: 100%;
vertical-align: top;
}
.Carousel-map .banner .img-list li{
position: absolute;
}
.Carousel-map .banner .pointer{
position: absolute;
bottom: 0;
right: 0;
margin-right: 38px;
margin-bottom: 27px;
}
.Carousel-map .banner .pointer a{
float: left;
width: 6px;
height: 6px;
background-color: rgba(0, 0, 0, .4);
border: 2px solid rgba(255, 255, 255, .4);
border-radius: 50%;
margin: 0 4px;
}
.Carousel-map .banner .pointer a:hover,
.Carousel-map .banner .pointer a.action{
border-color: rgba(0, 0, 0, .4);
background-color: rgba(255, 255, 255, .4);
}
.Carousel-map .banner .prev-next{
width: 992px;
height: 69px;
margin-top: 194px;
margin-left: 234px;
position: absolute;
/* background-color: aquamarine; */
}
.Carousel-map .banner .prev-next a{
width: 41px;
height: 69px;
background-image: url(https://i1.mifile.cn/f/i/2014/cn/icon/icon-slides.png);
}
.Carousel-map .banner .prev-next .prev{
float: left;
background-position-x: -84px;
}
.Carousel-map .banner .prev-next .next{
float: right;
background-position-x: -125px;
}
.Carousel-map .banner .prev-next .prev:hover{
background-position-x: 0;
}
.Carousel-map .banner .prev-next .next:hover{
background-position-x: -43px;
}
.home-hero .home-hero-sub{
margin-top: 14px;
height: 170px;
width: 1226px;
/* background-color: aqua; */
position: relative;
}
.home-hero .home-hero-sub .home-channel-list{
background-color: #5f5750;
width: 228px;
height: 164px;
padding: 3px;
margin: 0;
list-style-type: none;
text-align: center;
position: absolute;
float: left;
}
.home-hero .home-hero-sub .home-channel-list li{
width: 70px;
height: 82px;
float: left;
padding: 0 3px;
position: relative;
}
.home-hero .home-hero-sub .home-channel-list li a{
display: block;
padding-top: 18px;
text-overflow: ellipsis;
color: #fff;
opacity: .7;
transition: opacity .2s;
text-decoration: none;
font-size: 12px;
text-align: center;
}
.home-hero .home-hero-sub .home-channel-list li img{
width: 24px;
height: 24px;
display: block;
margin: 0 auto 4px;
}
.home-hero .home-hero-sub .home-channel-list li::before {
top: -1px;
left: 6px;
width: 64px;
height: 1px;
}
.home-hero .home-hero-sub .home-channel-list li::after{
top: 6px;
left: 0px;
width: 1px;
height: 70px;
}
.home-hero .home-hero-sub .home-channel-list li::before,
.home-hero .home-hero-sub .home-channel-list li::after{
position: absolute;
content: '';
background: #665e57;
}
.home-hero-sub .home-promo-list {
width: 978px;
height: 100%;
margin: 0;
position: absolute;
right: 0;
/* background-color: rebeccapurple; */
}
.home-hero-sub .home-promo-list li{
float: left;
width: 316px;
}
.home-hero-sub .home-promo-list .pro{
margin-right: 15px;
}
.home-hero-sub .home-promo-list img{
width: 316px;
}
仅供参考，初次尝试，欢迎指点