小米商城HTML+CSS静态主页源代码+运行结果
然后有一些图片资源由于平台限制不能上传，如果有需要的话可以私信我，小宁把代码和图片一起打包发过来。还有一些细节上的处理由于时间不是很多，还是没有时间去完善，大家可以自己去补全。
·
项目运行效果展示：
以下的源代码基本上完全还原了小米商城主页面的HTML+CSS静态效果，以下是项目的所有源码：
<!DOCTYPE html>
<html lang="zh-CN" xml:lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 小米商城 - Xiaomi 15、REDMI K80、MIX Fold 4，小米电视官方网站</title>
<link rel="shortcut icon" href="./imges/log.png">
<style>
*{
margin: 0;
padding: 0;
/* 内减模式 */
box-sizing: border-box;
}
/* 去掉列表的项目符号 */
li{
list-style: none;
}
/* <!-- 头部半部分 --> */
.header{
width: 100%;
height: 140px;
}
.header .header-top{
background-color:#333333;
height: 40px;
border-top-left-radius: 12px;
}
.header .header-bottom{
height: 100px;
width: 1226px;
margin: 0 auto;
display: flex;
}
.header .header-top .header-top-main{
margin: 0 auto;
width: 1226px;
height: 40px;
display: flex;
justify-content: space-between;
}
.header-top-main-left a{
text-decoration: none;
display: inline-block;
color: #b0b0b0;
line-height: 40px;
font-size:12px ;
margin-right: 4px;
margin-left: 4px;
}
.header-top-main-left .sep{
display: inline-block;
margin: 0 4px;
color: #424242;
font-size: 12px;
}
.header-top-main-right a{
display: inline-block;
color: #b0b0b0;
line-height: 40px;
font-size:12px ;
margin-left: 15px;
text-decoration: none;
}
.header-top-main-right a:hover{
color: #fff;
}
.header-top-main-left a:hover{
color: #fff;
}
.header-top-main-right .gwc:hover{
color:#FF6700;
background-color:#fff;
}
/* 默认显示第一张图 */
.gwc .default-img{
height: 15px;
margin:-3px 10px;
display: inline-block;
}
.gwc .hover-img{
display: none;
}
/* 悬停时切换图片 */
.gwc:hover .default-img {
display: none;
}
.gwc:hover .hover-img {
display: inline-block;
height: 15px;
margin:-3px 10px;
}
.header-bottom .default-img{
height: 22px;
margin-top: 16px;
margin-left: 16px;
display: inline-block;
}
.header-bottom .hover-img{
display: none;
}
.find:hover .default-img{
display: none;
}
.find:hover .hover-img{
display: inline-block;
height: 22px;
margin-top: 16px;
margin-left: 16px;
}
li{
list-style: none;
}
.header-bottom ul{
display: flex;
justify-content: space-between;
margin: 0 auto;
width: 700px;
height: 100px;
}
.header-bottom li a{
text-decoration: none;
display: inline-block;
color: #333;
line-height: 100px;
font-size: 16px;
}
.header-bottom li a:hover{
color: #FF6700;
}
.header-bottom input{
width: 245px;
height: 50px;
margin-top: 24px;
border: 1px solid #E0E0E0;
}
.header-bottom input:hover{
border:#b0b0b0 solid 1px;
}
.header-bottom input:focus {
border-color: #FF6700;
outline: none !important;
}
.header-bottom div:hover{
background-color:#FF6700;
border:#b0b0b0 solid 1px;
}
/* <!-- 第二部分：导航栏 --> */
/* 第二部分上半部分 */
.home-hero-container{
width: 1226px;
height: 660px;
margin:10px auto;
position: relative;
}
.home-hero-container li{
color: #DFDFDF;
height: 42px;
width: 234px;
display: flex;
}
.home-hero-container li:first-child{
margin-top: 20px;
}
.home-hero-container li a{
font-size: 14px;
display: inline-block;
height: 42px;
width: 150px;
margin-left: 30px;
text-decoration: none;
color: #fff;
line-height: 42px;
font-weight: 400;
}
.home-hero-container li img{
height: 25px;
margin-top: 11px;
}
.home-hero-container .oneul li:hover{
background-color: #FF6700;
}
/* 第二部分下半部分 */
.home-hero-container .home-middle{
width: 1226px;
height: 170px;
margin-top: 14px;
font:14px;
display: flex;
}
.home-middle .diffrenct-box{
width: 228px;
height: 170px;
background-color: #424242;
}
.home-middle .box{
display: flex;
margin-left: 5px;
width: 987px;
height: 170px;
margin: 0;
padding: 0;
margin-left: 10px;
justify-content: space-between;
}
/* 设置悬停跳动和阴影 */
.home-middle .box img:hover{
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.box img{
width: 316px;
height: 170px;
}
.kpro{
margin:0 auto;
height: 120px;
width: 1226px;
}
.kpro img{
width: 1226px;
}
/* ------------------------- 第三部分----------------------------------- */
.page-main{
width: 1226px;
height: 680px;
margin: 20px auto;
}
.page-main .title{
display: flex;
justify-content: space-between;
}
.page-main .title h2{
height: 58px;
color: #333333;
line-height: 58px;
font-size: 22px;
font-weight: 300;
}
.page-main .more{
display: flex;
align-items: center;
justify-content: space-around;
height: 58px;
width: 100px;
line-height: 58px;
font-size: 16px;
color: #424242;
}
.page-main .more:hover{
color:#FF6700;
border-bottom: #FF6700 5px solid;
}
.page-main .more div{
height: 20px;
width: 20px;
border-radius: 10px;
background-color: #424242;
}
.page-main .more div:hover{
background-color: #FF6700;
}
.page-main .more div img{
height: 20px;
width: 20px;
margin-bottom: 16px;
margin-left: 1px;
}
.page-main .goods-list{
display: flex;
width: 1226px;
height: 614px;
}
.page-main .goods-list .big-img{
width: 234px;
height: 614px;
}
.page-main .goods-list .big-img:hover{
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.page-main .goods-list .ul-list{
width: 992px;
height: 614px;
}
.goods-list .ul-list ul{
background-color: #fff;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.goods-list .ul-list li:nth-child(-n+4){
margin-bottom:6px ;
}
.goods-list .ul-list li{
width: 234px;
height: 300px;
}
.goods-list .ul-list li:hover{
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.goods-list .ul-list a{
width: 234px;
height: 300px;
display: block;
padding: 20px 0;
text-decoration: none;
}
.goods-list .ul-list a img{
height: 160px;
width: 160px;
margin-left: 35px;
}
.goods-list .ul-list a h3{
color: #333;
font-size: 14px;
margin: 0 10px 2px;
width: 214px;
height: 21px;
line-height: 21px;
text-align: center;
overflow: hidden;
}
.goods-list .ul-list a .p1{
color: #b0b0b0;
width: 214h 18px;
margin: 0 10px 10px;
font-size: 12px;
text-align: center;
overflow: hidden;
}
.goods-list .ul-list a .p2{
color: #FF6700;
width: 214px;
height: 21px;
line-height: 21px;
margin: 0 10px 14px 10px;
text-align: center;
font-size: 14px;
}
.goods-list .ul-list a .p2 del{
margin-left: 10px;
color: #B0B0B0;
}
.goods-list .ul-list li:last-child .sp-box1{
width: 234px;
height: 143px;
margin-bottom: 7px;
display: flex;
justify-content: space-between;
}
.goods-list .ul-list li:last-child .sp-box2{
width: 234px;
height: 143px;
display: flex;
justify-content: space-between;
}
.sp-box1 div p{
height: 42px;
width: 94px;
font-size: 14px;
color: #333;
text-decoration: none;
margin: 40px 0 0 16px;
}
.sp-box1 div span{
margin-left:40px;
text-decoration: none;
font-size: 12px;
color: #FF6700;
}
.sp-box2-title{
display: inline-block;
width: 114px;
height: 143px;
}
.sp-box2-title p{
margin-left: 20px;
margin-top: 50px;
font-size: 19px;
color: #333;
text-decoration: none;
}
.sp-box2-title span{
margin-left: 20px;
font-size: 12px;
color:#757575;
text-decoration: none;
}
.sp-box2-img{
width: 114px;
height: 143px;
}
.footer{
margin-top: 50px;
height: 473px;
width: 100%;
/* background-color: aqua; */
}
.footer-service{
background-color: #fff;
width: 1226px;
height: 80px;
border-bottom: 1px solid #e0e0e0;
padding: 27px 0;
margin: 0 auto;
border-bottom:#E0E0E0 1px solid;
}
.footer-service ul{
display: flex;
justify-content: space-between;
}
.footer-service li{
width: 243px;
height: 25px;
font-size: 16px;
line-height: 25px;
text-align: center;
}
.footer-service li:nth-child(-n+4){
border-right:1px solid #E0E0E0;
}
.footer-service li a{
color: #616161;
text-decoration: none;
}
.footer-service li a:hover{
color: #FF6700;
}
.footer-nav{
height: 392.5px;
width: 1226px;
margin: 0 auto;
padding: 40px 0;
color: #333;
display:flex;
font-size: 14px;
}
.footer-nav-list{
width: 160px;
/* background-color: rgb(205, 141, 23); */
}
.footer-nav .footer-nav-list:last-child{
border-right: #fb0606 1px solid;
}
.footer-nav-list dt{
margin: -1px 0 26px;
font-size: 14px;
color: #424242;
line-height: 1.25;
}
.footer-nav-list dd{
color: #757575;
font-size: 12px;
height: 18px;
margin: 5px 0;
display: block
}
.footer-nav-list dd a{
text-decoration: none;
color: #757575;
}
.footer-nav-list dd a:hover{
color: #FF6700;
}
.last-bigbox{
width: 251px;
/* background-color: #ebd0d0; */
text-align: center;
}
.last-smone{
width: 251px;
height: 81px;
border-left: 1px solid #e0e0e0;
text-align: center;
color: #e0e0e0;
font-size: 14px;
}
.last-bigbox a{
color: #FF6700;
border: 1px solid #FF6700;
background-color: #fff;
width: 118px;
height: 28px;
font-size: 12px;
line-height: 28px;
display: inline-block;
text-align: center;
text-decoration: none;
}
.last-bigbox a:hover{
color: #fff;
background-color: #FF6700;
}
.my-p{
margin: 0 0 3px 0;
font-size: 12px;
text-align: left;
color: #616161;
margin-left: 15px;
width: 170px;
display: inline-block;
}
</style>
</head>
<body>
<div class="app">
<!-- 头部 -->
<div class="header">
<!-- 头部半部分 -->
<div class="header-top">
<div class="header-top-main">
<div class="header-top-main-left">
<a href="">小米官网</a><span class="sep">|</span>
<a href="">小米商城</a><span class="sep">|</span>
<a href="">小米澎湃OS</a><span class="sep">|</span>
<a href="">小米汽车</a><span class="sep">|</span>
<a href="">云服务</a><span class="sep">|</span>
<a href="">loT</a><span class="sep">|</span>
<a href="">有品</a><span class="sep">|</span>
<a href="">小爱开放平台</a><span class="sep">|</span>
<a href="">资质证照</a><span class="sep">|</span>
<a href="">协议规则</a><span class="sep">|</span>
<a href="">下载app</a><span class="sep">|</span>
<a href="">Select Lpcation</a>
</div>
<div class="header-top-main-right">
<a href="">登录 </a>
<a href="">注册</a>
<a href="">消息通知</a>
<a href="" class="gwc" >
<img src="./imges/gwc.svg" class="default-img" alt="">
<img src="./imges/gwc1.svg" class="hover-img" alt="">购物车 （0）
</a>
</div>
</div>
</div>
<!-- 头部下半部分 -->
<div class="header-bottom">
<a href="#" class="log" style="line-height: 100px; display: inline-block; margin-top: 20px;"><img src="./imges/log.png" alt="" style="width: 56px;height: 56px;"></a>
<ul>
<li><a href="#">Xiaomi手机</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>
</ul>
<input type="text" placeholder="小米手环" >
<div style="width: 54px; height: 52px; margin-top: 24px; border:1px solid #E0E0E0;" class="find">
<img src="./imges/find.svg" alt="" class="default-img">
<img src="./imges/find1.svg" alt="" class="hover-img">
</div>
</div>
</div>
<!-- 第二部分：导航栏 -->
<div class="home-hero-container">
<img src="./imges/sp1.jpg" alt="" style="width: 1226px;height: 460" >
<ul class="oneul" style="height: 460px; width: 234px; background-color: #959395; position: absolute; top:0; left:0;margin: 0; padding: 0; ">
<li><a href="">手机</a><img src="./imges/rightjt.svg" alt=""></li>
<li><a href="">电视</a><img src="./imges/rightjt.svg" alt=""></li>
<li><a href="">家电</a><img src="./imges/rightjt.svg" alt=""></li>
<li><a href="">笔记本 平板 显示器</a><img src="./imges/rightjt.svg" alt=""></li>
<li><a href="">出行 穿戴</a><img src="./imges/rightjt.svg" alt=""></li>
<li><a href="">耳机 音响</a><img src="./imges/rightjt.svg" alt=""></li>
<li><a href="">健康 儿童</a><img src="./imges/rightjt.svg" alt=""></li>
<li><a href="">生活 箱包</a><img src="./imges/rightjt.svg" alt=""></li>
<li><a href="">智能 路由器</a><img src="./imges/rightjt.svg" alt=""></li>
<li><a href="">电源 配件</a><img src="./imges/rightjt.svg" alt=""></li>
</ul>
<div class="home-middle">
<div class="diffrenct-box"></div>
<div class="box">
<a href="#"><img src="./imges/xm15.png" alt=""></a>
<a href="#"><img src="./imges/redmids.png" alt=""></a>
<a href="#"><img src="./imges/xmwatch.png" alt=""></a>
</div>
</div>
</div>
<div class="kpro"><img src="./imges/k80pro.png" alt=""></div>
<div class="bigest-box" style="height: 3750px; background-color: #f5f5f5; padding-top: 40px;">
<!------------------------------------------------------------- 第三部分：商品分类展示区 --------------------------------------------------------->
<!-- 手机 -->
<div class="page-main">
<!-- 头部 -->
<div class="title">
<h2>手机</h2>
<div class="more">
查看更多
<div><img src="./imges/rightjt.svg" alt=""></div>
</div>
</div>
<!-- 商品展示区一个皆可用 -->
<div class="goods-list">
<div class="big-img">
<img src="./imges/xiaomi15.png" alt="" style="width: 234px;">
</div>
<div class="ul-list">
<ul>
<li>
<a href="#">
<img src="./imges/smallsp1.png" alt="">
<h3>REDMI Turbo 4 Pro</h3>
<p class="p1">Turbo 4 Pro 好看，更能打！</p>
<p class="p2"><span>1999元起</span><del>2199元</del></p>
</a>
</li>
<li>
<a href="#">
<img src="./imges/smallsp2.png" alt="">
<h3>Xiaomi 15 Ultra</h3>
<p class="p1">徕卡1英寸主摄 | 徕卡2亿超级长焦 |</p>
<p class="p2"><span>6999 元起</span></p>
</a>
</li>
<li>
<a href="#">
<img src="./imges/smallsp3.png" alt="">
<h3>REDMI Turbo 4</h3>
<p class="p1">REDMI Turbo 4 好看又能打</p>
<p class="p2"><span>1799 元</span><del>1999元</del></p>
</a>
</li>
<li>
<a href="#">
<img src="./imges/smallsp4.png" alt="">
<h3>Redmi 14C</h3>
<p class="p1"> 大屏大音量 耐用好品质</p>
<p class="p2"><span>499元起</span></p>
</a>
</li>
<li>
<a href="#">
<img src="./imges/smallsp5.png" alt="">
<h3>REDMI K80 Pro</h3>
<p class="p1">骁龙8至尊版|狂暴引擎4.0|游戏独显D1..</p>
<p class="p2"><span>3299 元起</span><del>3699元</del></p>
</a>
</li>
<li>
<a href="#">
<img src="./imges/smallsp6.png" alt="">
<h3>REDMI K80</h3>
<p class="p1">90W闪充|IP68|超声波指纹</p>
<p class="p2"><span>2499元起</span></p>
</a>
</li>
<li>
<a href="https://www.mi.com/shop/buy/detail?product_id=20618">
<img src="./imges/smallsp7.png" alt="">
<h3>Xiaomi 15</h3>
<p class="p1">徕卡光学 Summilux 高速镜头</p>
<p class="p2"><span>4199元起</span></p>
</a>
</li>
<li>
<a href="#">
<img src="./imges/smallsp8.png" alt="">
<h3>Xiaomi 15 Pro</h3>
<p class="p1">全生态AI助手 超级小爱</p>
<p class="p2"><span>4999元起</span></p>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 电脑 -->
<div class="page-main">
<!-- 头部 -->
<div class="title">
<h2>笔记本 | 平板</h2>
<div class="more">
热门
</div>
</div>
<!-- 商品展示区一个皆可用 -->
<div class="goods-list">
<div class="big-img">
<img src="./imges/padpro.png" alt="" style="width: 234px;">
</div>
<div class="ul-list">
<ul>
<li>
<a href="#">
<img src="./imges/pad1.png" alt="">
<h3>Xiaomi Pad 7 Pro</h3>
<p class="p1">11.2英寸3.2K高清高刷屏</p>
<p class="p2"><span>2399元起</span><del>2499元</del></p>
</a>
</li>
<li>
<a href="#">
<img src="./imges/pad2.png" alt="">
<h3>Xiaomi Pad 7</h3>
<p class="p1"> 第三代骁龙7+ 旗舰芯片</p>
<p class="p2"><span>1999 元起</span></p>
</a>
</li>
<li>
<a href="#">
<img src="./imges/pad3.png" alt="">
<h3>Redmi Pad Pro系列</h3>
<p class="p1">12.1英寸2.5K旗舰机大屏</p>
<p class="p2"><span>2299 元</span></p>
</a>
</li>
<li>
<a href="#">
<img src="./imges/pad4.png" alt="">
<h3>Xiaomi Pad 6S Pro 12.4</h3>
<p class="p1"> 第二代骁龙8 旗舰处理器</p>
<p class="p2"><span>2799元起</span><del>3299元</del></p>
</a>
</li>
<li>
<a href="#">
<img src="./imges/pad5.png" alt="">
<h3>REDMI Book 16 2025</h3>
<p class="p1">47W 满血性能 | 小米澎湃智联</p>
<p class="p2"><span>3899 元起</span><del>4399元</del></p>
</a>
</li>
<li>
<a href="#">
<img src="./imges/pad6.png" alt="">
<h3>REDMI Book 14 2025</h3>
<p class="p1">47W 满血性能 | 小米澎湃智联</p>
<p class="p2"><span>3299元起</span><del>3599元</del></p>
</a>
</li>
<li>
<a href="#">
<img src="./imges/pad7.png" alt="">
<h3>Redmi Book Pro 14 2024</h3>
<p class="p1">65W 满血性能｜全新酷睿 Ultra 处理器</p>
<p class="p2"><span>4999元起</span><del>5299元</del></p>
</a>
</li>
<li>
<a href="#" style="padding: 0;">
<div class="sp-box1">
<div style="width: 117px;">
<p>Redmi Book Pro 16 2024</p>
<span>5999元</span>
</div>
<div style="width: 117px;">
<img src="./imges/pad8.png" alt="" style=" width: 80px; height: 80px; margin: 28px 18px;">
</div>
</div>
<div class="sp-box2">
<div class="sp-box2-title">
<p>浏览更多</p>
<span>热门</span>
</div>
<div class="sp-box2-img">
<img src="./imges/circlejt.svg" alt="" style="height: 60px;width: 60px; margin:40px 0 0 25px;">
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 手表 -->
<div class="page-main">
<!-- 头部 -->
<div class="title">
<h2>智能穿戴</h2>
<div class="more">
热门 穿戴
</div>
</div>
<!-- 商品展示区一个皆可用 -->
<div class="goods-list">
<div class="big-img">
<img src="./imges/sb1.png" alt="" style="width: 234px;">
</div>
<div class="ul-list">
<ul>
<li>
<a href="#">
<img src="./imges/sb2.png" alt="">
<h3>REDMI Watch 5</h3>
<p class="p1">百变表圈 | 旋转表冠</p>
<p class="p2"><span>999元</span></p>
</a>
</li>
<li>
<a href="#">
<img src="./imges/sb3.png" alt="">
<h3>Xiaomi Watch S4</h3>
<p class="p1"> 第三代骁龙7+ 旗舰芯片</p>
<p class="p2"><span>1999 元起</span></p>
</a>
</li>
<li>
<a href="#">
<img src="./imges/sb4.png" alt="">
<h3>小米手环9 Pro</h3>
<p class="p1">超窄四等边大屏</p>
<p class="p2"><span>399 元</span></p>
</a>
</li>
<li>
<a href="#">
<img src="./imges/sb5.png" alt="">
<h3>Redmi 手环 3</h3>
<p class="p1">18天超长续航</p>
<p class="p2"><span>159 元起</span><del>169元</del></p>
</a>
</li>
<li>
<a href="#">
<img src="./imges/sb6.png" alt="">
<h3>小米手环9</h3>
<p class="p1">多彩金属机身 | 高精度运动健康监测</p>
<p class="p2"><span>239 元起</span><del>249元</del></p>
</a>
</li>
<li>
<a href="#">
<img src="./imges/sb7.png" alt="">
<h3>小米手环9 NFC</h3>
<p class="p1">多彩金属机身</p>
<p class="p2"><span>279元起</span><del>299元</del></p>
</a>
</li>
<li>
<a href="#">
<img src="./imges/sb8.png" alt="">
<h3>Xiaomi Watch S4 Sport</h3>
<p class="p1">一体钛机身 蓝宝石玻璃</p>
<p class="p2"><span>1799元起</span><del>4999元</del></p>
</a>
</li>
<li>
<a href="#" style="padding: 0;">
<div class="sp-box1">
<div style="width: 117px;">
<p>小米手环8 Pro 原神定制版</p>
<span>549元</span>
</div>
<div style="width: 117px;">
<img src="./imges/sb9.png" alt="" style=" width: 80px; height: 80px; margin: 28px 18px;">
</div>
</div>
<div class="sp-box2">
<div class="sp-box2-title">
<p>浏览更多</p>
<span>穿戴</span>
</div>
<div class="sp-box2-img">
<img src="./imges/circlejt.svg" alt="" style="height: 60px;width: 60px; margin:40px 0 0 25px;">
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 智能家居 -->
<div class="page-main">
<!-- 头部 -->
<div class="title">
<h2>智能家居</h2>
<div class="more">
小爱音响
</div>
</div>
<!-- 商品展示区一个皆可用 -->
<div class="goods-list">
<div class="big-img">
<img src="./imges/yx1.png" alt="" style="width: 234px;">
<img src="./imges/yx2.png" alt="" style="width: 234px;">
</div>
<div class="ul-list">
<ul>
<li>
<a href="#">
<img src="./imges/yx3.png" alt="">
<h3>Xiaomi智能家庭大屏 10</h3>
<p class="p1">百变表圈 | 旋转表冠</p>
<p class="p2"><span>929元</span><del>999元</del></p>
</a>
</li>
<li>
<a href="#">
<img src="./imges/yx4.png" alt="">
<h3>小米小爱音箱Play 增强版</h3>
<p class="p1">内置红外遥控，一句话控制</p>
<p class="p2"><span>129 元起</span><del>149元</del></p>
</a>
</li>
<li>
<a href="#">
<img src="./imges/yx5.png" alt="">
<h3>小米小爱音箱 Play</h3>
<p class="p1">语音遥控数千款智能产品 </p>
<p class="p2"><span>99元</span><del>109元</del></p>
</a>
</li>
<li>
<a href="#">
<img src="./imges/yx6.png" alt="">
<h3>小米小爱音箱Pro</h3>
<p class="p1">750ml超大音腔容积|组合立体声</p>
<p class="p2"><span>269 元起</span><del>299元</del></p>
</a>
</li>
<li>
<a href="#">
<img src="./imges/yx7.png" alt="">
<h3>小米AI音箱（第二代）</h3>
<p class="p1">低频饱满有深度，人声清晰有细节</p>
<p class="p2"><span>179 元起</span><del>199元</del></p>
</a>
</li>
<li>
<a href="#">
<img src="./imges/yx8.png" alt="">
<h3>小米手环9 NFC</h3>
<p class="p1">多彩金属机身</p>
<p class="p2"><span>279元起</span><del>299元</del></p>
</a>
</li>
<li>
<a href="#">
<img src="./imges/yx9.png" alt="">
<h3>小米小爱音箱</h3>
<p class="p1">8英寸高清大屏，海量优质影视资源</p>
<p class="p2"><span>349元起</span><del>449元</del></p>
</a>
</li>
<li>
<a href="#" style="padding: 0;">
<div class="sp-box1">
<div style="width: 117px;">
<p>Redmi小爱触屏音箱 8英寸</p>
<span>349元</span>
</div>
<div style="width: 117px;">
<img src="./imges/yx11.png" alt="" style=" width: 80px; height: 80px; margin: 28px 18px;">
</div>
</div>
<div class="sp-box2">
<div class="sp-box2-title">
<p>浏览更多</p>
<span>小爱音响</span>
</div>
<div class="sp-box2-img">
<img src="./imges/circlejt.svg" alt="" style="height: 60px;width: 60px; margin:40px 0 0 25px;">
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 生活电器 -->
<div class="page-main">
<!-- 头部 -->
<div class="title">
<h2>生活电器</h2>
<div class="more">
风扇
</div>
</div>
<!-- 商品展示区一个皆可用 -->
<div class="goods-list">
<div class="big-img">
<img src="./imges/fs1.png" alt="" style="width: 234px;">
<img src="./imges/fs2.png" alt="" style="width: 234px;">
</div>
<div class="ul-list">
<ul>
<li>
<a href="#">
<img src="./imges/fs3.png" alt="">
<h3>米家智能直流变频落地扇</h3>
<p class="p1">2分钟整屋循环丨整机一级能效</p>
<p class="p2"><span>319元</span><del>340元</del></p>
</a>
</li>
<li>
<a href="#">
<img src="./imges/fs4.png" alt="">
<h3>米家循环扇</h3>
<p class="p1">内置红外遥控，一句话控制</p>
<p class="p2"><span>129 元起</span><del>149元</del></p>
</a>
</li>
<li>
<a href="#">
<img src="./imges/fs5.png" alt="">
<h3>米家直流变频落地扇 Pro</h3>
<p class="p1">收纳自如丨尽享舒适自然风</p>
<p class="p2"><span>399元</span><del>499元</del></p>
</a>
</li>
<li>
<a href="#">
<img src="./imges/fs6.png" alt="">
<h3>米家智能直流变频塔扇2</h3>
<p class="p1">DIY自然风 | 环抱式柔和送风 </p>
<p class="p2"><span>329 元起</span><del>349元</del></p>
</a>
</li>
<li>
<a href="#">
<img src="./imges/fs7.png" alt="">
<h3>米家智能直流变频循环扇</h3>
<p class="p1">智能温湿度控风</p>
<p class="p2"><span>429 元起</span><del>499元</del></p>
</a>
</li>
<li>
<a href="#">
<img src="./imges/fs8.png" alt="">
<h3>直流变频循环扇</h3>
<p class="p1">多彩金属机身</p>
<p class="p2"><span>279元起</span><del>299元</del></p>
</a>
</li>
<li>
<a href="#">
<img src="./imges/fs9.png" alt="">
<h3>米家桌面移动风扇</h3>
<p class="p1">桌面手持二合一|7羽扇叶出风</p>
<p class="p2"><span>129元起</span></p>
</a>
</li>
<li>
<a href="#" style="padding: 0;">
<div class="sp-box1">
<div style="width: 117px;">
<p>Redmi小爱触屏音箱 8英寸</p>
<span>349元</span>
</div>
<div style="width: 117px;">
<img src="./imges/fs10.png" alt="" style=" width: 80px; height: 80px; margin: 28px 18px;">
</div>
</div>
<div class="sp-box2">
<div class="sp-box2-title">
<p>浏览更多</p>
<span>风扇</span>
</div>
<div class="sp-box2-img">
<img src="./imges/circlejt.svg" alt="" style="height: 60px;width: 60px; margin:40px 0 0 25px;">
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="kpro"><img src="./imges/pen.png" alt=""></div>
<!-- 第四部分:页脚 -->
<div class="footer">
<div class="footer-service">
<ul>
<li>
<a href="#">
<img src="" alt="">
<span>预约维修服务</span>
</a>
</li>
<li>
<a href="#">
<img src="" alt="">
<span>7天无理由退货</span>
</a>
</li>
<li>
<a href="#">
<img src="" alt="">
<span>15免费换货</span>
</a>
</li>
<li>
<a href="#">
<img src="" alt="">
<span>满69包邮</span>
</a>
</li>
<li>
<a href="#">
<img src="" alt="">
<span>1100余家售后网点</span>
</a>
</li>
</ul>
</div>
<div class="footer-nav">
<dl class="footer-nav-list" style="margin-left: 80px;">
<dt>选购指南</dt>
<dd><a href="">手机</a></dd>
<dd><a href="">电视</a></dd>
<dd><a href="">笔记本</a></dd>
<dd><a href="">平板</a></dd>
<dd><a href="">穿戴</a></dd>
<dd><a href="">耳机</a></dd>
<dd><a href="">家电</a></dd>
<dd><a href="">路由器</a></dd>
<dd><a href="">音箱</a></dd>
<dd><a href="">配件</a></dd>
</dl>
<dl class="footer-nav-list" style="margin-left: 80px;">
<dt>服务中心</dt>
<dd><a href="">申请售后</a></dd>
<dd><a href="">售后政策</a></dd>
<dd><a href="">维修服务价格</a></dd>
<dd><a href="">订单查询</a></dd>
<dd><a href="">以旧换新</a></dd>
<dd><a href="">保障服务</a></dd>
<dd><a href="">防伪查询</a></dd>
<dd><a href="">F码通道</a></dd>
</dl>
<dl class="footer-nav-list" style="margin-left: 80px;">
<dt>线下门店</dt>
<dd><a href="">小米之家</a></dd>
<dd><a href="">服务网点</a></dd>
<dd><a href="">授权体验店/专区</a></dd>
</dl>
<dl class="footer-nav-list" style="margin-left: 80px;">
<dt>关于小米</dt>
<dd><a href="">了解小米</a></dd>
<dd><a href="">加入小米</a></dd>
<dd><a href="">投资者关系</a></dd>
<dd><a href="">ESG与可持续发展</a></dd>
<dd><a href="">廉洁举报</a></dd>
</dl>
<dl class="footer-nav-list" style="margin-left: 80px;">
<dt>关于我们</dt>
<dd><a href="">新浪微博</a></dd>
<dd><a href="">官方微信</a></dd>
<dd><a href="">练习我们</a></dd>
<dd><a href="">公益基金会</a></dd>
</dl>
<div class="last-bigbox">
<div class="last-smone">
<p style="font-size: 22px;line-height: 1;color: #FF6700; margin: 10px 0 5px 0;">950818</p>
<p class="my-p">8:00-18:00(仅收市话费)</p>
<a href="#">人工客服</a>
</div>
<p style="font-size: 22px;line-height: 1;color: #FF6700; margin: 10px 0 5px 0;">950818</p>
<p class="my-p">8:00-18:00(仅收市话费)</p>
<p class="my-p">手机适用于：Xiaomi MIX Fold系列、MIX Flip系列、数字12系列及以上</p>
<p class="my-p">电视适用于：98寸、100寸电视</p>
<a href="#">人工客服</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>还有一些细节上的处理由于时间不是很多，还是没有时间去完善，大家可以自己去补全。
然后有一些图片资源由于平台限制不能上传，如果有需要的话可以私信我，小宁把代码和图片一起打包发过来。
openvela 操作系统专为 AIoT 领域量身定制，以轻量化、标准兼容、安全性和高度可扩展性为核心特点。openvela 以其卓越的技术优势，已成为众多物联网设备和 AI 硬件的技术首选，涵盖了智能手表、运动手环、智能音箱、耳机、智能家居设备以及机器人等多个领域。
更多推荐
45
0- 0
已为社区贡献1条内容
所有评论(0)