小米商城（HTML5+CSS3版）
正在学习HTML5+CSS3的小伙伴们如果想练手的话，可以先照着小米商城的网站敲。因为还没有学到JS，下面代码只实现了部分功能：
index：html
小米官网
- 手机>
- 电视>
-
骨传导耳机
Necklace
Xiaomi Bud 4 Pro
Redmi Bud 4 Pro
Redmi Bud 4
Xiaomi无线降噪耳机
Xiaomi 无线降噪耳机3
Redmi Buds 3
Air2 SE
Redmi Buds 3青春版
小米圈铁耳机Pro
小米活塞耳机
小米小爱触屏音箱Pro 8
小米小爱随身音箱
Xiaomi智能家庭屏6
小米小爱音箱Art
Xiaomi Sound
Redmi小爱触屏音箱Pro 8
Xiaomi智能家庭屏10
小爱音箱Pro
小爱音箱Play增强版
小米小爱触屏音箱
小米小暖音箱Play
小米小爱音箱Art电池版
- 家电>
- 健康>
手机
Redmi Note 12 5G
三星 OLED 护眼屏｜骁龙 5G 芯｜5000mAh 电量
1199元起
Redmi K50
2K直屏的狠旗舰
1699元起
Redmi Note 12 Pro
IMX766 防抖相机｜OLED 柔性直屏｜67W 闪充
2099元起
Redmi Note 12 Pro+
2亿超清防抖相机｜OLED 柔性直屏
1099元起
Redmi Note 11 5G
5000mAh大电量
2099元起
Redmi Note 11T Pro
天玑8100｜真旗舰芯
1599元起
Xiaomi 12S Pro
骁龙8+ 旗舰处理器 | 徕卡影像
4399元起
Redmi K50 至尊版
骁龙8+ ｜1.5K 高清直屏
2699元起
智能家居
小米小爱音箱 Pro
澎湃低音，语音遥控传统家电
899元 999元
小米AI音箱（第二代）
低频饱满有深度，人声清晰有细节
199元 299元
Xiaomi智能家庭屏 10
MIUI Home｜10.1" 高清大屏｜115°超广角摄像头｜儿童模式｜家庭 KTV｜小爱同学
499元 599元
小米小爱音箱Play 增强版
LED时钟显示，语音控制传统家电
99元 199元
小米小爱音箱 Play
听音乐、语音遥控家电
219元 299元
小米小爱触屏音箱
可视化智能家居，海量视听资源
269元 299元
Xiaomi Sound
HARMAN工程师专业调音，高保真震撼音质
179元 199元
日用百货
米家声波电动牙刷T700
智能洁齿丨强劲动力
29元 39元
米家电动剃须刀S500
3刀头360°浮动丨超长续航
159元 179元
米家理发器
米家理发器
129元 149元
米家自动洗手机套装
伸手出泡，抑菌有效
69元 79元
米家电动冲牙器
超长待机丨4挡模式
199元 219元
米家声波电动牙刷T500
过压提醒丨健康报告
159元 199元
米家电子体温计
快速知体温，精准更智能
89元 99元
小米商城| MIUI |米家|米聊|多看|游戏|政企服务|小米天猫店|小米集团隐私政策|小米公司儿童信息保护规则|小米商城隐私政策|小米商城用户协议|问题反馈|Select Location
北京互联网法院法律服务工作站|中国消费者协会|北京市消费者协会
© mi.com京ICP证110507号 京ICP备10046444号 公网安备11010802020134号 京网文[2020]0276-042号
(京) 网械平台备字 (2018) 第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告
增值电信业务许可证 网络食品经营备案 京食药网食备202010048 食品经营许可证
违法和不良信息举报电话: 171-5104-4404 知识产权侵权投诉本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
保障服务
企业团购
F码通道
米粉卡
以旧换新
话费充值
/css/index.css
* {
margin: 0;
padding: 0
}
.clearfix:before,.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7yi5yk');
src: url('fonts/icomoon.eot?7yi5yk#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7yi5yk') format('truetype'),
url('fonts/icomoon.woff?7yi5yk') format('woff'),
url('fonts/icomoon.svg?7yi5yk#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
button {
cursor: pointer;
}
button,
input {
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
border: 0;
outline: none;
}
ul li {
list-style: none;
}
a{
text-decoration: none;
}
.w1 {
width: 1226px;
height: 100%;
margin: 0 auto;
}
.w2 {
width: 100%;
}
.advertisement {
height: 96px;
background-image: url(/images/顶部广告.png);
background-position: 50%;
background-repeat: no-repeat;
}
/* 导航栏 */
.nav {
height: 40px;
background-color: rgb(51, 51, 51);
}
.header {
height: 100%;
margin: 0 auto;
}
.nav-left li {
float: left;
line-height: 40px;
}
.nav-left .app{
position: relative;
}
.sub-app img{
margin-top: 5px;
width: 90px;
height: 90px;
}
.sub-app{
position: absolute;
top: 40px;
left: 41%;
width: 124px;
height: 0;
background: #fff;
margin-left: -55px;
box-shadow: 0 1px 5px #aaa;
text-align: center;
font-size: 14px;
color: #333;
line-height: 1;
overflow: hidden;
transition: height .3s;
z-index: 99;
}
.nav-left a,
.nav-right a {
font-size: 12px;
color: #b0b0b0;
text-decoration: none;
transition: color .2s linear 0s;
}
.nav-left a:hover,
.nav-right a:hover{
color: #fff;
}
.app:hover>.sub-app{
height: 120px;
}
.app:hover>.top-triango{
visibility: visible;
}
.app:hover>a{
color: #ffffff;
}
.nav-left span,
.nav-right span {
font-style: 10px;
color: #424242;
margin: 0 7px;
}
.nav-right li {
float: right;
line-height: 40px;
}
.car{
position: relative;
width: 120px;
height: 40px;
background-color: #424242;
/* 字体水平居中 */
text-align: center;
margin-left: 20px;
transition: all .2s linear 0s;
}
.car a{
display: inline-block;
font-family: 'icomoon';
width: 100%;
height: 100%;
transition: all .2s linear 0s;
}
.car i{
font-style: normal;
font-size: 15px;
}
.empty{
position: absolute;
right: 0;
top: 40px;
z-index: 31;
width: 316px;
height: 0;
color: #424242;
font-size: 12px;
line-height: 100px;
background: #fff;
box-shadow: 0 2px 10px rgb(0 0 0 / 15%);
overflow: hidden;
transition: height .3s;
}
.car:hover{
background-color: #fff;
}
.car:hover>a{
color: #ff6700;
}
.car:hover>.empty{
height: 100px;
}
/* 副导航栏 */
.big-sub{
width: 100%;
height: 100px;
}
.sub-main{
position: relative;
width: 1226px;
height: 100%;
/* border: 1px solid red; */
margin: 0 auto;
}
.sub-left{
float: left;
height: 100px;
width: 850px;
border: 1px solid transparent;
}
.sub-left li{
float: left;
position: relative;
line-height: 100px;
margin-left: 23px;
}
.sub-left li img{
height: 60px;
width: 60px;
margin-left: -10px;
margin-right: 100px;
margin-top: 20px;
}
.sub-left li a{
font-size: 16px;
color: #333333;
text-decoration: none;
transition: all .2s linear 0s;
}
.left-change{
position: absolute;
top: 97px;
left: -1267%;
width: 2560px;
height: 0;
background: #fff;
margin-left: -55px;
box-shadow: 0 1px 5px #aaa;
text-align: center;
font-size: 16px;
color: #333;
/* line-height: 1; */
overflow: hidden;
transition: height .3s;
z-index: 99;
}
.left-change ul{
width: 1226px;
height: 100%;
background-color: #fff;
margin-left: 669px;
}
.left-change li{
float: left;
width: 160px;
height: 238px;
margin-left: 42px;
}
.left-change li::before{
position: absolute;
top: 26px;
right: 164px;
width: 1px;
height: 100px;
content: "";
background: rgb(225, 225, 225);
margin: 0 26px;
}
.left-change1::before{
visibility: hidden;
}
.left-change p{
height: 21px;
}
.left-change i{
font-style: normal;
font-size: 12px;
color: #ff6700;
}
.left-change1{
margin-left: 50px;
}
.left-change ul li img{
display: block;
width: 160px;
height: 110px;
}
.sub-left li:hover>a{
color: #ff6700;
}
.sub-left li:hover>.left-change{
height: 238px;
}
.sub-right{
position: absolute;
width: 374px;
height: 100px;
line-height: 100px;
right: -6%;
/* text-align: right; */
}
.search{
display: inline-block;
width: 245px;
height: 50px;
margin-right: -4px;
border: 1px solid #e0e0e0;
border-right: none;
color: rgb(117, 117, 117);
/* vertical-align:top； */
}
button{
position: absolute;
display: inline-block;
width: 52px;
height: 52px;
margin-right: 50px;
top: 25px;
right: 26px;
border: 1px solid #e0e0e0;
background-color: #ffffff;
font-family: 'icomoon';
transition: all .2s linear 0s;
/* vertical-align:top； */
}
button:hover{
color: white;
background-color: #ff6700;
}
/* 轮播图 */
.m1{
height: 460px;
}
.lbt{
position: relative;
width: 100%;
height: 100%;
background-image: url(/images/轮播图1.webp);
background-size: 1226px 460px;
background-repeat: no-repeat;
animation:10s movie infinite;
}
@keyframes movie {
0%{background-image: url(/images/轮播图1.webp)}
25%{background-image: url(/images/轮播图2.jpg)}
50%{background-image: url(/images/轮播图1.webp)}
75%{background-image: url(/images/轮播图2.jpg)}
100%{background-image: url(/images/轮播图1.webp)}
}
.button-right{
position: absolute;
right: 1px;
top: 50%;
width: 41px;
height: 69px;
margin-top: -35px;
z-index: 10;
/* outline: none; */
}
.button-right i{
position: absolute;
display: block;
font-style: normal;
left: -14px;
}
.button-left{
position: absolute;
left: 234px;
top: 50%;
width: 41px;
height: 69px;
margin-top: -35px;
z-index: 10;
}
.button-right,
.button-left{
font-family: 'icomoon';
font-size: 55px;
color: rgb(216, 216, 217);
background-color: transparent;
line-height: 69px;
cursor: pointer;
text-align: center;
}
.button-right:hover,
.button-left:hover{
color: #fff;
background-color: rgb(124,124,126);
}
.hdm{
position: absolute;
width: 234px;
height: 100%;
background: rgba(105, 101, 101, .6);
}
.hdm ul{
margin-top: 20px;
}
.hdm li{
width: 100%;
height: 42px;
line-height: 42px;
}
.hdm .hdm-left{
background: rgba(105, 101, 101, 0);
}
.hdm li a{
color: #ffffff;
font-size: 14px;
text-decoration: none;
margin-left: 21px;
}
.hdm i{
float: right;
font-style: normal;
font-weight: 900;
color: #e0e0e0;
margin-right: 20px;
}
.hdm-list{
position: absolute;
top: 0px;
left: 289px;
width: 0px;/* 992px */
height: 460px;
background: #fff;
margin-left: -55px;
box-shadow: 0 1px 4px #aaa;
text-align: center;
/* font-size: 16px;
color: #333;
line-height: 1; */
overflow: hidden;
transition: height .3s;
z-index: 20;
}
.hdm-list ul{
float: left;
margin-top: 0;
}
.hdm-list li{
width: 247px;
height: 76px;
line-height: 76px;
background-color: #fff;
}
.color-change{
font-size: 12px;
color: #000;
font-weight: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: all .2s;
}
.hdm-list img{
float: left;
width: 40px;
height: 40px;
margin: 17px 14px 0 54px;
}
.hdm li:hover>.hdm-left{
background-color: rgb(255,103,0);
}
.hdm li:hover>.hdm-list{
width: 992px;
}
.hdm-list li:hover>.color-change{
color: #ff6700;
}
/* 促销商品区 */
.m2{
height: 170px;
margin-top: 20px;
margin-bottom: 25px;
}
.sp-div{
float: left;
width: 316px;
height: 170px;
background-color: red;
margin-left: 14px;
}
.sp-div img{
width: 100%;
}
.sp-first{
width: 234px;
background-color: #5F5750;
margin-left: 0;
}
.sp-last{
transition: box-shadow .3s linear 0s;
}
.sp-last:hover{
box-shadow: -5px 7px 23px 4px rgb(0,0,0,30%);
}
.sp-first li{
float: left;
position: relative;
width: 70px;
height: 82px;
margin: 0 3px;
/* background-color: red; */
}
.sp-first li a{
display: block;
padding-top: 18px;
text-overflow: ellipsis;
color: #fff;
opacity: .7;
font-size: 10px;
text-align: center;
transition: opacity 0.5s linear 0s;
}
.sp-first li a:hover{
opacity: 1;
}
.sp-first li img{
display: block;
width: 24px;
height: 24px;
margin: 0 auto 4px;
}
.sp-first li::before{
top: 0px;
left: 6px;
width: 64px;
height: 1px;
}
.sp-first li::after{
top: 6px;
/* left: 0; */
width: 1px;
height: 70px;
}
.sp-first li::after,
.sp-first li::before{
position: absolute;
content: "";
background: #665e57;
}
/* 商品区 */
.m{
width: 100%;
height: 2380px;
background: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
overflow: hidden;
}
.m3{
height: 120px;
margin-top: 30px;
margin-bottom: 20px;
}
.m3 img{
height: 100%;
}
.phone h2{
font-size: 22px;
font-weight: 200;
color: #333;
margin: 15px 0;
}
.phone-left{
float: left;
width: 234px;
height: 614px;
}
.phone-left img{
height: 100%;
width: 100%;
transition: all .2s linear 0s;
}
.phone-right{
float: right;
/* width: 992px; */
height: 614px;
text-align: center;
}
.right1{
width: 992px;
}
.right2{
width: 1226px;
}
.phone-right div{
float: left;
width: 234px;
height: 300px;
background-color: #FFFFFF;
margin-left: 14px;
margin-bottom: 14px;
transition: all .3s linear 0s;
}
.phone-right div:hover,
.phone-left img:hover{
transform: translateY(-4px);
box-shadow: -5px 7px 23px 4px rgb(0,0,0,30%);
}
.phone-right img{
width: 160px;
height: 160px;
margin-top: 35px;
}
.phone-right h3{
margin: 0 10px 2px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-size: 14px;
font-weight: 400;
color: #333;
}
.phone-right p{
margin: 0 10px 10px;
height: 18px;
font-size: 12px;
color: #b0b0b0;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.phone-right i{
font-style: normal;
font-size: 14px;
color: #ff6700;
/* margin: 10px 0px 10px 14px; */
}
.phone{
height: 614px;
margin-bottom: 60px;
}
.phone-right .left-move{
margin-left: 0px;
}
.phone-right .left-move img{
width: 100%;
height: 100%;
margin-top: 0;
}
.phone-right del{
color: #b0b0b0;
font-size: 14px;
}
.phone-right .small-box{
position: relative;
z-index: 1;
float: left;
width: 234px;
height: 143px;
margin-left: 14px;
margin-bottom: 14px;
background: #fff;
}
.small-box i{
display: block;
margin: 0 125px 0 0;
}
.small-box h3{
display: block;
margin: -10px 110px 5px 30px;
font-size: 14px;
font-weight: 400;
}
.small-box img{
/* display: inline-block; */
float: right;
position: absolute;
width: 80px;
height: 80px;
}
.small-box a{
display: inline-block;
margin: 61px -16px 0px -20px;
}
.small-box p{
display: block;
margin: 0 88px 0 0;
}
.small-box h2{
font-family: 'icomoon';
float: right;
position: absolute;
font-size: 48px;
color: #ff6700;
margin: 46px 0px 0px 151px;
}
.kong{
height: 1px;
}
/* 踝部区 */
.mm{
height: 472px;
}
.m4{
height: 80px;
border-bottom: 1px solid #e0e0e0;
}
.mm ul{
padding: 27px 0;
}
.mm ul li a{
float: left;
width: 19.7%;
height: 25px;
border-left: 1px solid #e0e0e0;
font-size: 16px;
line-height: 25px;
text-align: center;
color: #979797;
font-weight: 400;
transition: all .25s ;
}
.mm ul li a:hover{
color: #ff6700;
}
.mm ul li i{
font-family: 'icomoon';
font-style: normal;
font-size: 24px;
}
#border-out{
border-left: 0px;
}
.m5{
height: 312.5px;
padding: 40px 0;
}
.footer-dl{
float: left;
width: 160px;
}
#footer-dl{
margin-left: 160px;
}
.footer-dl dt{
margin: -1px 0 26px;
font-size: 14px;
line-height: 1.25;
color: #424242;
}
.footer-dl dd a{
color: #757575;
font-size: 12px;
transition: all .3s;
}
.footer-dl dd a:hover{
color: #ff6700;
}
.phone-number{
float: right;
width: 251px;
border-left: 1px solid #e0e0e0;
text-align: center;
color: #616161;
}
.phone-number i{
font-style: normal;
font-size: 22px;
line-height: 1;
color: #ff6700;
margin: 0 0 5px 0;
}
.phone-number p{
margin: 0 0 5px 0;
font-size: 12px;
color: #616161;
}
.phone-number a{
display: inline-block;
font-family: 'icomoon';
width: 118px;
height: 28px;
font-size: 12px;
line-height: 28px;
background: #fff;
color: #ff6700;
border: 1px solid #ff6700;
transition: all .4s;
}
.phone-number a em{
font-style: normal;
font-size: 13px;
}
.phone-number a:hover{
color: #fff;
background-color: #ff6700;
}
/* 底部区 */
.mmm{
height: 210px;/* 204px */
padding: 30px 0;
font-size: 12px;
background: #fafafa;
}
.m6{
position: relative;
height: 157px;
color: #b0b0b0;
padding-left: 77px;
font-size: 12px;
}
.bottom-logo{
width: 56px;
height: 56px;
margin-right: 20px;
background: url(/images/logo.png) no-repeat;
background-size: 56px;
position: absolute;
top: 0;
left: 0;
}
.bottom-font{
color: #b0b0b0;
padding-left: 4px;
font-size: 12px;
}
.bottom-img{
height: 28px;
margin: 4px 0 15px;
padding-left: 5px;
}
.bottom-img img{
width: auto;
height: 28px;
margin-left: 0;
}
.bottom-change{
color: #757575;
transition: all .2s;
}
.bottom-change:hover{
color: #ff6700;
}
/* 功能区 */
.set{
position: fixed;
right: 0;
bottom: 40px;
text-align: center;
z-index: 99;
}
.set1,
.set2{
position: relative;
margin-top: -1px;
background-color: #fff;
border: 1px solid #f5f5f5;
width: 25px;
height: 40px;
/* text-align: center; */
font-family: 'icomoon';
}
.set2{
margin-top: 14px;
}
.set1 a,
.set2 a{
position: absolute;
bottom: -2px;
left: -2px;
width: 30px;
height: 30px;
color: #757575;
transition: opacity .3s;
}
.set1 :hover,
.set2 :hover{
color: #ff6700;
}
.set-1{
display: block;
width: 100px;
height: 100px;
margin: 6px auto;
/* visibility: hidden; */
}
.set-2{
display: block;
width: 82px;
margin: 14px auto 0;
color: #757575;
text-align: center;
}
.set-2max{
width: 56px;
font-size: 14px;
margin-top: 0;
}
#set-{
position: absolute;
left: -138px;
top: 0;
padding: 14px;
background: #fff;
border: 1px solid #f5f5f5;
transition: opacity .3s;
/* transform: translateZ(0); */
/* opacity: 0; */
visibility: hidden;
z-index: 99;
}
#set-change{
position: absolute;
left: -84px;
top: 0;
padding: 9px;
background: #fff;
border: 1px solid #f5f5f5;
transition: opacity .3s;
/* transform: translateZ(0); */
/* opacity: 0; */
visibility: hidden;
z-index: 99;
}
.right-triango{
position: absolute;
height: 0;
width: 0;
border: 8px solid #fff;
border-right: 0;
border-top-color: transparent;
border-bottom-color: transparent;
top: 11px;
right: -6px;
z-index: 100;
visibility: hidden;
}
.top-triango{
z-index: 100;
position: absolute;
height: 0;
width: 0;
border: 8px solid white;
border-top: 0;
border-left-color: transparent;
border-right-color: transparent;
top: 32px;
right: 12px;
visibility: hidden;
}
.set1:hover>#set-,
.set1:hover>#set-change,
.set2:hover>#set-change{
visibility: visible;
}
.last{
clear: both;
margin: 30px auto 0;
width: 100%;
height: 19px;
background: url(/images/last.png) no-repeat center 0;
}因为博主是新人，所以代码可能不太规范，望大佬们海涵。新手同志们最好是先自己敲一遍，熟练一下套路。有文件需求的同学，点赞关注后私信给我哟