admin管理员组文章数量:1530518
导语
包含完整代码，如有错误欢迎改正。
观察小米官网的布局，首先他有两行导航栏，第一行导航栏相对简单，但是注意下载APP处有一个下拉设计，第二栏在logo和导航栏空白处是有一个下拉列表的，直接覆盖在轮播图上，然后轮播图下简单来看就是四个小盒子其中三个样式相同，然后就是区域展示，样式基本雷同，只需写好一个。图片资源可去小米官网右键下载。
实现效果：
头部
头部的话分为左右两部分，左边注意一下下载APP
HTML部分
<div class="head">
<!--黑色导航栏-->
<div class="head1">
<div class="top">
<div class="top-left">
<a href="" class="link">小米官网</a>
<span>|</span>
<a href="" class="link">小米商城</a>
<span>|</span>
<a href="" class="link">MIUI</a>
<span>|</span>
<a href="" class="link">loT</a>
<span>|</span>
<a href="" class="link">云服务</a>
<span>|</span>
<a href="" class="link">天星数科</a>
<span>|</span>
<a href="" class="link">有品</a>
<span>|</span>
<a href="" class="link">小爱开放平台</a>
<span>|</span>
<a href="" class="link">企业团购</a>
<span>|</span>
<a href="" class="link">资质证照</a>
<span>|</span>
<a href="" class="link">协议规则</a>
<span>|</span>
<a href="" class="links"
>下载app
<span class="appcode">
<img src="download.png" width="90px" height="90px" />
</span>
</a>
<span>|</span>
<a href="" class="link">SelectLocation</a>
</div>
<div class="car">
<a href="" class="car-son">购物车 </a>
<div class="car-nav">购物车中还没有商品，赶紧选购吧！</div>
</div>
<div class="top-right">
<a href="" class="link">登录</a>
<span>|</span>
<a href="" class="link">注册</a>
<span>|</span>
<a href="" class="link">消息通知</a>
</div>
</div>
</div>
</div>CSS部分
.head{
padding: 0;
margin: 0;
font-size: 12px;
width: 100%;
}
.head1{
margin: 0;
padding: 0;
font: 12px;
background: #333333;
height: 40px;
color: #B0B0B0;
}
.top{
width: 1226px;
margin: 0 auto;
padding: 0;
}
.top-left a:hover{
color: #ffffff;
}
.top-left{
float: left;
height: 40px;
font-size: 12px;
margin-left: auto;
margin-right: auto;
}
.top-left a{
text-decoration: none;
color: #B0B0B0;
line-height: 40px;
font-size: 12px;
display: inline-block;
}
.head1 span{
width: 3.23px;
height: 16px;
font-size: 12px;
color: #424242;
margin: 0 3.6px;
}
.top-left .links span{
top: 40px;
margin-left: -20px;
position:absolute;
display: block;
background: #ffffff;
box-shadow: 0 1px 5px #aaa;
height: 0px;
color: #333333;
z-index: 33;
}
.links .appcode img{
height: 0;
display: block;
position: relative;
}
.links:hover > span{
height: 90px;
transition:height 1s;
}
.links:hover > span img{
height: 90px;
transition:height 1s;
}
.top-right{
float: right;
height: 40px;
}
.top-right a{
text-decoration: none;
color: #B0B0B0;
line-height: 40px;
font-size: 0.8px;
}
.car{
position: relative;
margin-left: 10px;
display: block;
float: right;
height: 40px;
line-height: 40px;
width: 120px;
background-color: #424242
}
.car .car-son{
text-decoration: none;
margin: 35px 0 0 40px ;
color:#B0B0B0;
font-size: 1px;
}
.car-nav{
position: absolute;
background: #ffffff;
box-shadow: 0 1px 5px #aaa;
top: 40px;
width: 295px;
height: 0px;
overflow: hidden;
transition: height 1s;
right: 0;
text-align: center;
z-index: 33;
line-height: 100px;
}
.car:hover > .car-nav{
height: 100px;
}导航栏
分为三部分，logo，菜单栏，搜索框
第二大部分
首先是轮播图，轮播图左边还有菜单栏，滑动门样式（这个我写在了导航栏logo和菜单栏空白处作为它的下拉菜单）然后是下方的四个小盒子
第三大部分
广告处，只需一个图片。注意好它与上边下边的距离
第四大部分
一个大盒子分为上下，下边的盒子又分为左右两部分。样式基本一样
第五部分
网页底部。
HTML代码
<!DOCTYPE html>
<html lang="en">
<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>小米商城</title>
<link rel="stylesheet" href="wolf.css" />
<link rel="stylesheet" href="pics.css" />
</head>
<body>
<div class="head">
<!--黑色导航栏-->
<div class="head1">
<div class="top">
<div class="top-left">
<a href="" class="link">小米官网</a>
<span>|</span>
<a href="" class="link">小米商城</a>
<span>|</span>
<a href="" class="link">MIUI</a>
<span>|</span>
<a href="" class="link">loT</a>
<span>|</span>
<a href="" class="link">云服务</a>
<span>|</span>
<a href="" class="link">天星数科</a>
<span>|</span>
<a href="" class="link">有品</a>
<span>|</span>
<a href="" class="link">小爱开放平台</a>
<span>|</span>
<a href="" class="link">企业团购</a>
<span>|</span>
<a href="" class="link">资质证照</a>
<span>|</span>
<a href="" class="link">协议规则</a>
<span>|</span>
<a href="" class="links"
>下载app
<span class="appcode">
<img src="download.png" width="90px" height="90px" />
</span>
</a>
<span>|</span>
<a href="" class="link">SelectLocation</a>
</div>
<div class="car">
<a href="" class="car-son">购物车 </a>
<div class="car-nav">购物车中还没有商品，赶紧选购吧！</div>
</div>
<div class="top-right">
<a href="" class="link">登录</a>
<span>|</span>
<a href="" class="link">注册</a>
<span>|</span>
<a href="" class="link">消息通知</a>
</div>
</div>
</div>
</div>
<!--黑色结束-->
<!--白色开始-->
<div class="head2">
<div class="top">
<div class="logo">
<a href="//www.mi" class="logo-son"> </a>
</div>
<div class="head2-nav">
<ul class="nav">
<li class="nav-category">
<a href="" class="ddd"></a>
<div class="category-list">
<ul class="category-nav">
<li class="category-navs">
<a href="" class="ccc"
>手机
<div class="nav-left list1">
<ul class="left-list">
<li class="left-lists">
<img src="s1.webp" width="40px" height="40px" />
<span class="title">Xiaomi MIX系列</span>
</li>
<li class="left-lists">
<img src="s2.webp" width="40px" height="40px" />
<span class="title">Xiaomi 数字系列</span>
</li>
<li class="left-lists">
<img src="s3.webp" width="40px" height="40px" />
<span class="title">Xiaomi Civi系列</span>
</li>
<li class="left-lists">
<img src="s4.webp" width="40px" height="40px" />
<span class="title">Redmi K系列</span>
</li>
<li class="left-lists">
<img src="s5.webp" width="40px" height="40px" />
<span class="title">Redmi Note系列</span>
</li>
<li class="left-lists">
<img src="s6.webp" width="40px" height="40px" />
<span class="title">Redmi 数字系列</span>
</li>
</ul>
</div>
</a>
<a href="" class="ccc">
电视
<div class="nav-left list3">
<ul class="left-list">
<li class="left-lists">
<img src="d1.webp" width="40px" height="40px" />
<span class="title">Redmi X55</span>
</li>
<li class="left-lists">
<img src="d2.webp" width="40px" height="40px" />
<span class="title">小米电视6 55"OLED</span>
</li>
<li class="left-lists">
<img src="d3.webp" width="40px" height="40px" />
<span class="title">Redmi X65</span>
</li>
<li class="left-lists">
<img src="d4.webp" width="40px" height="40px" />
<span class="title">小米电视6 65"OLED</span>
</li>
<li class="left-lists">
<img src="d5.webp" width="40px" height="40px" />
<span class="title">小米电视 大师77"OLED</span>
</li>
<li class="left-lists">
<img src="d6.webp" width="40px" height="40px" />
<span class="title">小米电视6 至尊版 55英寸</span>
</li>
</ul>
<ul class="left-list2">
<li class="left-lists">
<img src="d7.webp" width="40px" height="40px" />
<span class="title">小米电视6 至尊版 65英寸</span>
</li>
<li class="left-lists">
<img src="d8.webp" width="40px" height="40px" />
<span class="title">小米电视6 至尊版 75英寸</span>
</li>
<li class="left-lists">
<img src="d9.webp" width="40px" height="40px" />
<span class="title">小米电视 ES43</span>
</li>
<li class="left-lists">
<img src="d10.webp" width="40px" height="40px" />
<span class="title">小米电视 ES55</span>
</li>
<li class="left-lists">
<img src="d11.webp" width="40px" height="40px" />
<span class="title">小米电视 ES65</span>
</li>
<li class="left-lists">
<img src="d12.webp" width="40px" height="40px" />
<span class="title">小米电视 ES75</span>
</li>
</ul>
<ul class="left-list3">
<li class="left-lists">
<img src="d13.webp" width="40px" height="40px" />
<span class="title">大师电视 65英寸 OLED</span>
</li>
<li class="left-lists">
<img src="d14.webp" width="40px" height="40px" />
<span class="title">Redmi 智能电视 MAX 98"</span>
</li>
<li class="left-lists">
<img src="d15.webp" width="40px" height="40px" />
<span class="title">小米电视大师 86英寸 Min……</span>
</li>
</ul>
</div>
</a>
<a href="" class="ccc">
家电
<div class="nav-left list4">
<ul class="left-list">
<li class="left-lists">
<img src="j1.png" width="40px" height="40px" />
<span class="title">壁挂空调</span>
</li>
<li class="left-lists">
<img src="j2.webp" width="40px" height="40px" />
<span class="title">立式空调</span>
</li>
<li class="left-lists">
<img src="j3.webp" width="40px" height="40px" />
<span class="title">冰箱</span>
</li>
<li class="left-lists">
<img src="j4.webp" width="40px" height="40px" />
<span class="title">滚筒洗衣机</span>
</li>
<li class="left-lists">
<img src="j5.webp" width="40px" height="40px" />
<span class="title">波轮洗衣机</span>
</li>
<li class="left-lists">
<img src="j6.webp" width="40px" height="40px" />
<span class="title">米家石墨烯踢脚线电暖器</span>
</li>
</ul>
<ul class="left-list2">
<li class="left-lists">
<img src="j7.jpg" width="40px" height="40px" />
<span class="title">电暖器</span>
</li>
<li class="left-lists">
<img src="j8.webp" width="40px" height="40px" />
<span class="title">米家石墨烯踢脚线电暖器</span>
</li>
<li class="left-lists">
<img src="j9.jpg" width="40px" height="40px" />
<span class="title">净水器</span>
</li>
<li class="left-lists">
<img src="j10.webp" width="40px" height="40px" />
<span class="title">微蒸烤</span>
</li>
<li class="left-lists">
<img src="j11.webp" width="40px" height="40px" />
<span class="title">烟灶</span>
</li>
<li class="left-lists">
<img src="j12.webp" width="40px" height="40px" />
<span class="title">洗碗机</span>
</li>
</ul>
<ul class="left-list3">
<li class="left-lists">
<img src="j13.jpg" width="40px" height="40px" />
<span class="title">扫地机器人</span>
</li>
<li class="left-lists">
<img src="j14.jpg" width="40px" height="40px" />
<span class="title">吸尘器</span>
</li>
<li class="left-lists">
<img src="j15.jpg" width="40px" height="40px" />
<span class="title">空气净化器</span>
</li>
<li class="left-lists">
<img src="j16.jpg" width="40px" height="40px" />
<span class="title">电饭煲</span>
</li>
<li class="left-lists">
<img src="j17.jpg" width="40px" height="40px" />
<span class="title">电磁炉</span>
</li>
<li class="left-lists">
<img src="j18.jpg" width="40px" height="40px" />
<span class="title">水壶</span>
</li>
</ul>
<ul class="left-list4">
<li class="left-lists">
<img src="j19.png" width="40px" height="40px" />
<span class="title">落地风扇</span>
</li>
<li class="left-lists">
<img src="j20.png" width="40px" height="40px" />
<span class="title">投影仪</span>
</li>
<li class="left-lists">
<img src="j21.jpg" width="40px" height="40px" />
<span class="title">灯具</span>
</li>
<li class="left-lists">
<img src="j22.jpg" width="40px" height="40px" />
<span class="title">插线板</span>
</li>
<li class="left-lists">
<img src="j23.jpg" width="40px" height="40px" />
<span class="title">新风机</span>
</li>
<li class="left-lists">
<img src="j24.jpg" width="40px" height="40px" />
<span class="title">料理机</span>
</li>
</ul>
</div>
</a>
<a href="" class="ccc"
>笔记本 电脑
<div class="nav-left list4">
<ul class="left-list">
<li class="left-lists">
<img src="b1.webp" width="40px" height="40px" />
<span class="title">Xiaomi Pad 6 Pro</span>
</li>
<li class="left-lists">
<img src="b2.webp" width="40px" height="40px" />
<span class="title">Xiaomi Pad 6</span>
</li>
<li class="left-lists">
<img src="b3.webp" width="40px" height="40px" />
<span class="title">Redmi Pad</span>
</li>
<li class="left-lists">
<img src="b4.webp" width="40px" height="40px" />
<span class="title">小米平板5 Pro 5G</span>
</li>
<li class="left-lists">
<img src="b5.webp" width="40px" height="40px" />
<span class="title">小米平板5 Pro 12 4</span>
</li>
<li class="left-lists">
<img src="b6.webp" width="40px" height="40px" />
<span class="title">小米平板5 Pro</span>
</li>
</ul>
<ul class="left-list2">
<li class="left-lists">
<img src="b7.webp" width="40px" height="40px" />
<span class="title">小米平板5</span>
</li>
<li class="left-lists">
<img src="b8.webp" width="40px" height="40px" />
<span class="title">办公室显示器</span>
</li>
<li class="left-lists">
<img src="b9.webp" width="40px" height="40px" />
<span class="title">电竞显示器</span>
</li>
<li class="left-lists">
<img src="b10.webp" width="40px" height="40px" />
<span class="title">RedmiBook Pro 15 锐龙</span>
</li>
<li class="left-lists">
<img src="b11.webp" width="40px" height="40px" />
<span class="title">Redmi Book 14</span>
</li>
<li class="left-lists">
<img src="b12.webp" width="40px" height="40px" />
<span class="title">XiaomiBook12.4二合一套装</span>
</li>
</ul>
<ul class="left-list3">
<li class="left-lists">
<img src="b13.webp" width="40px" height="40px" />
<span class="title">Redmi Book 15E</span>
</li>
<li class="left-lists">
<img src="b14.webp" width="40px" height="40px" />
<span class="title">Redmi G 游戏本 锐龙版</span>
</li>
<li class="left-lists">
<img src="b15.webp" width="40px" height="40px" />
<span class="title">Redmi G 游戏本 2022</span>
</li>
<li class="left-lists">
<img src="b16.webp" width="40px" height="40px" />
<span class="title">Redmi Book Pro15 2022</span>
</li>
<li class="left-lists">
<img src="b17.webp" width="40px" height="40px" />
<span class="title">Xiaomi Book Pro 16</span>
</li>
<li class="left-lists">
<img src="b18.webp" width="40px" height="40px" />
<span class="title">Xiaomi Book Pro 14</span>
</li>
</ul>
<ul class="left-list4">
<li class="left-lists">
<img src="b19.webp" width="40px" height="40px" />
<span class="title">小米笔记本 Pro X 14</span>
</li>
<li class="left-lists">
<img src="b20.webp" width="40px" height="40px" />
<span class="title">小米笔记本 Pro X 15</span>
</li>
<li class="left-lists">
<img src="b21.webp" width="40px" height="40px" />
<span class="title">RedmiBook Pro 14 锐龙版</span>
</li>
</ul>
</div>
</a>
<a href="" class="ccc"
>出行 穿戴
<div class="nav-left list4">
<ul class="left-list">
<li class="left-lists">
<img src="c1.webp" width="40px" height="40px" />
<span class="title">小米手环8 迪士尼100周年</span>
</li>
<li class="left-lists">
<img src="c2.webp" width="40px" height="40px" />
<span class="title">Redmi Watch3 青春版</span>
</li>
<li class="left-lists">
<img src="c3.webp" width="40px" height="40px" />
<span class="title">小米手环8</span>
</li>
<li class="left-lists">
<img src="c4.webp" width="40px" height="40px" />
<span class="title">小米手环8 NFC版</span>
</li>
<li class="left-lists">
<img src="c5.webp" width="40px" height="40px" />
<span class="title">Xiaomi Watch S1 Pro</span>
</li>
<li class="left-lists">
<img src="c6.webp" width="40px" height="40px" />
<span class="title">Xiaomi Watch S2</span>
</li>
</ul>
<ul class="left-list2">
<li class="left-lists">
<img src="c7.webp" width="40px" height="40px" />
<span class="title">Redmi Watch 3</span>
</li>
<li class="left-lists">
<img src="c8.webp" width="40px" height="40px" />
<span class="title">Redmi 手环8</span>
</li>
<li class="left-lists">
<img src="c9.webp" width="40px" height="40px" />
<span class="title">小米手环7 Pro</span>
</li>
<li class="left-lists">
<img src="c10.webp" width="40px" height="40px" />
<span class="title">小米手环7 NFC版</span>
</li>
<li class="left-lists">
<img src="c11.webp" width="40px" height="40px" />
<span class="title">小米手环7</span>
</li>
<li class="left-lists">
<img src="c12.webp" width="40px" height="40px" />
<span class="title">Xiaomi Watch S1</span>
</li>
</ul>
<ul class="left-list3">
<li class="left-lists">
<img src="c13.jpg" width="40px" height="40px" />
<span class="title">九号平衡车</span>
</li>
<li class="left-lists">
<img src="c14.webp" width="40px" height="40px" />
<span class="title"> 九号平衡车 Plus</span>
</li>
<li class="left-lists">
<img src="c15.webp" width="40px" height="40px" />
<span class="title">九号平衡车燃动版</span>
</li>
<li class="left-lists">
<img src="c16.webp" width="40px" height="40px" />
<span class="title">米家电动滑板车1S</span>
</li>
<li class="left-lists">
<img src="c17.webp" width="40px" height="40px" />
<span class="title">米家电动滑板车 3 青春版</span>
</li>
<li class="left-lists">
<img src="c18.webp" width="40px" height="40px" />
<span class="title">九号ninebot儿童山地自行车</span>
</li>
</ul>
<ul class="left-list4">
<li class="left-lists">
<img src="c19.webp" width="40px" height="40px" />
<span class="title"
>HIMO Z20 折叠电动助力山地车</span
>
</li>
<li class="left-lists">
<img src="c20.webp" width="40px" height="40px" />
<span class="title">九号卡丁车Pro兰博基尼版</span>
</li>
<li class="left-lists">
<img src="c21.webp" width="40px" height="40px" />
<span class="title">九号平衡车 改装套件</span>
</li>
<li class="left-lists">
<img src="c22.webp" width="40px" height="40px" />
<span class="title">小米车载充电器快充版</span>
</li>
<li class="left-lists">
<img src="c23.webp" width="40px" height="40px" />
<span class="title">小米车载充电器快充版1A</span>
</li>
<li class="left-lists">
<img src="c24.webp" width="40px" height="40px" />
<span class="title">小米无线车充</span>
</li>
</ul>
</div>
</a>
<a href="" class="ccc"
>耳机 音箱
<div class="nav-left list4">
<ul class="left-list">
<li class="left-lists">
<img src="e1.webp" width="40px" height="40px" />
<span class="title">Redmi Buds 4活力版</span>
</li>
<li class="left-lists">
<img src="e2.webp" width="40px" height="40px" />
<span class="title">Xiaomi真无线降噪耳机3 …</span>
</li>
<li class="left-lists">
<img src="e3.webp" width="40px" height="40px" />
<span class="title">Redmi Bubs 4 哈利波特版</span>
</li>
<li class="left-lists">
<img src="e4.webp" width="40px" height="40px" />
<span class="title">Xiaomi真无线降噪耳机3…</span>
</li>
<li class="left-lists">
<img src="e5.webp" width="40px" height="40px" />
<span class="title">Xiaomi Buds 4</span>
</li>
<li class="left-lists">
<img src="e6.webp" width="40px" height="40px" />
<span class="title">Redmi Buds 4青春版</span>
</li>
</ul>
<ul class="left-list2">
<li class="left-lists">
<img src="e7.webp" width="40px" height="40px" />
<span class="title">Xiaomi Buds 4 Pro</span>
</li>
<li class="left-lists">
<img src="e8.webp" width="40px" height="40px" />
<span class="title">Redmi Buds 4 Pro</span>
</li>
<li class="left-lists">
<img src="e9.webp" width="40px" height="40px" />
<span class="title">蒙德最强战力</span>
</li>
<li class="left-lists">
<img src="e10.webp" width="40px" height="40px" />
<span class="title">骨传导耳机</span>
</li>
<li class="left-lists">
<img src="e11.webp" width="40px" height="40px" />
<span class="title">Redmi Buds 4</span>
</li>
<li class="left-lists">
<img src="e12.webp" width="40px" height="40px" />
<span class="title">Xiaomi 真无线降噪耳机 3</span>
</li>
</ul>
<ul class="left-list3">
<li class="left-lists">
<img src="e13.webp" width="40px" height="40px" />
<span class="title">Xiaomi 真无线降噪耳机 3</span>
</li>
<li class="left-lists">
<img src="e14.webp" width="40px" height="40px" />
<span class="title"> Redmi Buds 3</span>
</li>
<li class="left-lists">
<img src="e15.webp" width="40px" height="40px" />
<span class="title">Air2 SE</span>
</li>
<li class="left-lists">
<img src="e16.webp" width="40px" height="40px" />
<span class="title">小米圈铁耳机Pro</span>
</li>
<li class="left-lists">
<img src="e17.webp" width="40px" height="40px" />
<span class="title">Necklace</span>
</li>
<li class="left-lists">
<img src="e18.webp" width="40px" height="40px" />
<span class="title">小米活塞耳机</span>
</li>
</ul>
<ul class="left-list4">
<li class="left-lists">
<img src="e19.jpg" width="40px" height="40px" />
<span class="title">小米小爱音箱 Play</span>
</li>
<li class="left-lists">
<img src="e20.webp" width="40px" height="40px" />
<span class="title">小米小爱触屏音箱 Pro 8</span>
</li>
<li class="left-lists">
<img src="e21.webp" width="40px" height="40px" />
<span class="title">Xiaomi智能家庭屏 6</span>
</li>
<li class="left-lists">
<img src="e22.webp" width="40px" height="40px" />
<span class="title">Xiaomi Sound Move</span>
</li>
<li class="left-lists">
<img src="e23.webp" width="40px" height="40px" />
<span class="title">Xiaomi Sound</span>
</li>
<li class="left-lists">
<img src="e24.webp" width="40px" height="40px" />
<span class="title">Xiaomi智能家庭屏 10</span>
</li>
</ul>
</div>
</a>
<a href="" class="ccc"
>健康 儿童
<div class="nav-left list3">
<ul class="left-list">
<li class="left-lists">
<img src="k1.jpg" width="40px" height="40px" />
<span class="title">洗手机</span>
</li>
<li class="left-lists">
<img src="k2.jpg" width="40px" height="40px" />
<span class="title">剃须刀</span>
</li>
<li class="left-lists">
<img src="k3.webp" width="40px" height="40px" />
<span class="title">修剪器</span>
</li>
<li class="left-lists">
<img src="k4.jpg" width="40px" height="40px" />
<span class="title">牙刷</span>
</li>
<li class="left-lists">
<img src="k5.jpg" width="40px" height="40px" />
<span class="title">吹风机</span>
</li>
<li class="left-lists">
<img src="k6.png" width="40px" height="40px" />
<span class="title">体重秤</span>
</li>
</ul>
<ul class="left-list2">
<li class="left-lists">
<img src="k7.jpg" width="40px" height="40px" />
<span class="title">体脂秤</span>
</li>
<li class="left-lists">
<img src="k8.webp" width="40px" height="40px" />
<span class="title">米家跑步机</span>
</li>
<li class="left-lists">
<img src="k9.webp" width="40px" height="40px" />
<span class="title">智能动感单车</span>
</li>
<li class="left-lists">
<img src="k10.webp" width="40px" height="40px" />
<span class="title">米家mini筋膜枪</span>
</li>
<li class="left-lists">
<img src="k11.jpg" width="40px" height="40px" />
<span class="title">走步机</span>
</li>
<li class="left-lists">
<img src="k12.jpg" width="40px" height="40px" />
<span class="title">早教启智</span>
</li>
</ul>
<ul class="left-list3">
<li class="left-lists">
<img src="k13.webp" width="40px" height="40px" />
<span class="title">益智积木</span>
</li>
<li class="left-lists">
<img src="k14.jpg" width="40px" height="40px" />
<span class="title">儿童手表</span>
</li>
<li class="left-lists">
<img src="k15.jpg" width="40px" height="40px" />
<span class="title">儿童滑板车</span>
</li>
<li class="left-lists">
<img src="k16.jpg" width="40px" height="40px" />
<span class="title">婴儿推车</span>
</li>
<li class="left-lists">
<img src="k17.webp" width="40px" height="40px" />
<span class="title">理发器</span>
</li>
</ul>
</div>
</a>
<a href="" class="ccc"
>生活 箱包
<div class="nav-left list3">
<ul class="left-list">
<li class="left-lists">
<img src="h1.webp" width="40px" height="40px" />
<span class="title">小背包</span>
</li>
<li class="left-lists">
<img src="h2.jpg" width="40px" height="40px" />
<span class="title">双肩包</span>
</li>
<li class="left-lists">
<img src="h3.webp" width="40px" height="40px" />
<span class="title">胸包</span>
</li>
<li class="left-lists">
<img src="h4.webp" width="40px" height="40px" />
<span class="title">旅行箱</span>
</li>
<li class="left-lists">
<img src="h5.webp" width="40px" height="40px" />
<span class="title">收纳袋</span>
</li>
<li class="left-lists">
<img src="h6.jpg" width="40px" height="40px" />
<span class="title">运动鞋</span>
</li>
</ul>
<ul class="left-list2">
<li class="left-lists">
<img src="h7.webp" width="40px" height="40px" />
<span class="title">配饰</span>
</li>
<li class="left-lists">
<img src="h8.jpg" width="40px" height="40px" />
<span class="title">眼睛</span>
</li>
<li class="left-lists">
<img src="h9.jpg" width="40px" height="40px" />
<span class="title">床垫</span>
</li>
<li class="left-lists">
<img src="h10.png" width="40px" height="40px" />
<span class="title">枕头</span>
</li>
<li class="left-lists">
<img src="h11.jpg" width="40px" height="40px" />
<span class="title">螺丝刀</span>
</li>
<li class="left-lists">
<img src="h12.jpg" width="40px" height="40px" />
<span class="title">水杯</span>
</li>
</ul>
<ul class="left-list3">
<li class="left-lists">
<img src="h13.jpg" width="40px" height="40px" />
<span class="title">伞</span>
</li>
<li class="left-lists">
<img src="h14.jpg" width="40px" height="40px" />
<span class="title">驱蚊器</span>
</li>
<li class="left-lists">
<img src="h15.jpg" width="40px" height="40px" />
<span class="title">毛巾/浴巾</span>
</li>
<li class="left-lists">
<img src="h16.webp" width="40px" height="40px" />
<span class="title">米兔</span>
</li>
<li class="left-lists">
<img src="h17.jpg" width="40px" height="40px" />
<span class="title">笔</span>
</li>
<li class="left-lists">
<img src="h18.webp" width="40px" height="40px" />
<span class="title">小米创业思考</span>
</li>
</ul>
</div>
</a>
<a href="" class="ccc"
>智能 路由器
<div class="nav-left list2">
<ul class="left-list">
<li class="left-lists">
<img src="z1.webp" width="40px" height="40px" />
<span class="title">CyberDog</span>
</li>
<li class="left-lists">
<img src="z2.webp" width="40px" height="40px" />
<span class="title">MIJIA K歌麦克风</span>
</li>
<li class="left-lists">
<img src="z3.jpg" width="40px" height="40px" />
<span class="title">打印机</span>
</li>
<li class="left-lists">
<img src="z4.webp" width="40px" height="40px" />
<span class="title">小米路由器</span>
</li>
<li class="left-lists">
<img src="z5.webp" width="40px" height="40px" />
<span class="title">Redmi路由器</span>
</li>
<li class="left-lists">
<img src="z6.webp" width="40px" height="40px" />
<span class="title">智能家庭</span>
</li>
</ul>
<ul class="left-list2">
<li class="left-lists">
<img src="z7.jpg" width="40px" height="40px" />
<span class="title">对讲机</span>
</li>
<li class="left-lists">
<img src="z8.jpg" width="40px" height="40px" />
<span class="title">摄像机</span>
</li>
<li class="left-lists">
<img src="z9.jpg" width="40px" height="40px" />
<span class="title">智能门锁</span>
</li>
<li class="left-lists">
<img src="z10.webp" width="40px" height="40px" />
<span class="title">门铃/猫眼</span>
</li>
<li class="left-lists">
<img src="z11.webp" width="40px" height="40px" />
<span class="title">小爱音箱</span>
</li>
<li class="left-lists">
<img src="z12.webp" width="40px" height="40px" />
<span class="title">家庭屏</span>
</li>
</ul>
</div>
</a>
<a href="" class="ccc"
>电源 配件
<div class="nav-left list2">
<ul class="left-list">
<li class="left-lists">
<img src="y1.webp" width="40px" height="40px" />
<span class="title">插座插排</span>
</li>
<li class="left-lists">
<img src="y2.webp" width="40px" height="40px" />
<span class="title">移动电源</span>
</li>
<li class="left-lists">
<img src="y3.jpg" width="40px" height="40px" />
<span class="title">数据线</span>
</li>
<li class="left-lists">
<img src="y4.webp" width="40px" height="40px" />
<span class="title">平板配件</span>
</li>
<li class="left-lists">
<img src="y5.webp" width="40px" height="40px" />
<span class="title">充电器</span>
</li>
<li class="left-lists">
<img src="y6.jpg" width="40px" height="40px" />
<span class="title">电池</span>
</li>
</ul>
<ul class="left-list2">
<li class="left-lists">
<img src="y7.jpg" width="40px" height="40px" />
<span class="title">自拍杆</span>
</li>
<li class="left-lists">
<img src="y8.jpg" width="40px" height="40px" />
<span class="title">手机壳</span>
</li>
<li class="left-lists">
<img src="y9.jpg" width="40px" height="40px" />
<span class="title">手机贴膜</span>
</li>
<li class="left-lists">
<img src="y10.webp" width="40px" height="40px" />
<span class="title">无线充电器</span>
</li>
<li class="left-lists">
<img src="y11.jpg" width="40px" height="40px" />
<span class="title">黑鲨配件</span>
</li>
<li class="left-lists">
<img src="y12.jpg" width="40px" height="40px" />
<span class="title">其他配件</span>
</li>
</ul>
</div>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a href=""
>Xiaomi手机
<div class="nav-list">
<ul class="tops">
<li class="nav-lists">
<img src="phone1.webp" width="160" height="110" />
<div class="title">Xiaomi CiVi 3</div>
<p class="price">2499元起</p>
</li>
<span></span>
<li class="nav-lists">
<img src="phone2.webp" width="160" height="110" />
<div class="title">Xiaomi 12S Pro</div>
<p class="price">3199元起</p>
</li>
<span></span>
<li class="nav-lists">
<img src="phone3.webp" width="160" height="110" />
<div class="title">Xiaomi 13 Ultra</div>
<p class="price">5999元起</p>
</li>
<span></span>
<li class="nav-lists">
<img src="phone4.webp" width="160" height="110" />
<div class="title">Xiaomi 13</div>
<p class="price">3999元起</p>
</li>
<span></span>
<li class="nav-lists">
<img src="phone5.webp" width="160" height="110" />
<div class="title">Xiaomi 13 Pro</div>
<p class="price">4999元起</p>
</li>
<span></span>
<li class="nav-lists">
<img src="phone6.webp" width="160" height="110" />
<div class="title">Xiaomi MIX Faid 2</div>
<p class="price">8999元起</p>
</li>
</ul>
</div>
</a>
</li>
<li class="nav-item">
<a href=""
>Redmi手机
<div class="nav-list">
<ul class="tops">
<li class="nav-lists">
<img src="tele1.webp" width="160" height="110" />
<div class="title">Redmi Note 12T Pro</div>
<p class="price">1499元起</p>
</li>
<span></span>
<li class="nav-lists">
<img src="tele2.webp" width="160" height="110" />
<div class="title">Redmi Note 12 Turbo</div>
<p class="price">1699元起</p>
</li>
<span></span>
<li class="nav-lists">
<img src="tele3.webp" width="160" height="110" />
<div class="title">Redmi 12C</div>
<p class="price">619元起</p>
</li>
<span></span>
<li class="nav-lists">
<img src="tele4.webp" width="160" height="110" />
<div class="title">Redmi K60 Pro</div>
<p class="price">2599元起</p>
</li>
<span></span>
<li class="nav-lists">
<img src="tele5.webp" width="160" height="110" />
<div class="title">Redmi K60</div>
<p class="price">2099元起</p>
</li>
<span></span>
<li class="nav-lists">
<img src="tele6.webp" width="160" height="110" />
<div class="title">Redmi Note 12 Pro极速版</div>
<p class="price">1599元起</p>
</li>
</ul>
</div>
</a>
</li>
<li class="nav-item">
<a href=""
>电视
<div class="nav-list">
<ul class="tops">
<li class="nav-lists">
<img src="TV1.webp" width="160" height="110" />
<div class="title">小米电视大师86英寸Mini LED</div>
<p class="price">14999元起</p>
</li>
<span></span>
<li class="nav-lists">
<img src="TV2.webp" width="160" height="110" />
<div class="title">Redmi 智能电视 X85英寸</div>
<p class="price">4499元起</p>
</li>
<span></span>
<li class="nav-lists">
<img src="TV3.webp" width="160" height="110" />
<div class="title">小米电视S65 65英寸</div>
<p class="price">2999元起</p>
</li>
<span></span>
<li class="nav-lists">
<img src="TV4.webp" width="160" height="110" />
<div class="title">小米电视6 65"OLED</div>
<p class="price">5999元起</p>
</li>
<span></span>
<li class="nav-lists">
<img src="TV5.webp" width="160" height="110" />
<div class="title">小米电视ES65 65英寸</div>
<p class="price">2999元起</p>
</li>
<span></span>
<li class="nav-lists">
<img src="TV6.webp" width="160" height="110" />
<div class="title">小米电视 大师77" OLED</div>
<p class="price">17999元起</p>
</li>
</ul>
</div>
</a>
</li>
<li class="nav-item">
<a href=""
>笔记本
<div class="nav-list">
<ul class="tops">
<li class="nav-lists">
<img src="com1.webp" width="160" height="110" />
<div class="title">Redmi Book Pro 15 2023 锐龙版</div>
<p class="price">4799元起</p>
</li>
<span></span>
<li class="nav-lists">
<img src="com2.webp" width="160" height="110" />
<div class="title">Redmi Book 14</div>
<p class="price">4599元起</p>
</li>
<span></span>
<li class="nav-lists">
<img src="com3.webp" width="160" height="110" />
<div class="title">Redmi G 游戏本 2022</div>
<p class="price">7499元起</p>
</li>
<span></span>
<li class="nav-lists">
<img src="com4.webp" width="160" height="110" />
<div class="title">RedmiBook Pro 15 2022 锐龙版</div>
<p class="price">5499元起</p>
</li>
<span></span>
<li class="nav-lists">
<img src="com5.webp" width="160" height="110" />
<div class="title">Redmi Book 15E</div>
<p class="price">4999元起</p>
</li>
<span></span>
<li class="nav-lists">
<img src="com6.webp" width="160" height="110" />
<div class="title">Xiaomi MIX Faid 2</div>
<p class="price">3599元起</p>
</li>
</ul>
</div>
</a>
</li>
<li class="nav-item">
<a href=""
>平板
<div class="nav-list">
<ul class="tops">
<li class="nav-lists">
<img src="tcom1.webp" width="160" height="110" />
<div class="title">Xiaomi Pad 6 Pro</div>
<p class="price">2499元起</p>
</li>
<span></span>
<li class="nav-lists">
<img src="tcom2.webp" width="160" height="110" />
<div class="title">Xiaomi Pad 6</div>
<p class="price">1899元起</p>
</li>
<span></span>
<li class="nav-lists">
<img src="tcom3.webp" width="160" height="110" />
<div class="title">Redmi Pad</div>
<p class="price">899元起</p>
</li>
<span></span>
<li class="nav-lists">
<img src="tcom4.webp" width="160" height="110" />
<div class="title">小米平板5 Pro 12.4</div>
<p class="price">1949元起</p>
</li>
<span></span>
<li class="nav-lists">
<img src="tcom5.webp" width="160" height="110" />
<div class="title">小米平板5</div>
<p class="price">1799元起</p>
</li>
<span></span>
<li class="nav-lists">
<img src="tcom6.webp" width="160" height="110" />
<div class="title">小米平板5 Pro 5G</div>
<p class="price">2699元起</p>
</li>
</ul>
</div>
</a>
</li>
<li class="nav-item">
<a href=""
>家电
<div class="nav-list">
<ul class="tops">
<li class="nav-lists">
<img src="fur1.webp" width="160" height="110" />
<div class="title">米家冰箱对开门610L墨羽岩</div>
<p class="price">2299元起</p>
</li>
<span></span>
<li class="nav-lists">
<img src="fur2.webp" width="160" height="110" />
<div class="title">米家冰箱 对开门536L 墨羽岩</div>
<p class="price">2099元起</p>
</li>
<span></span>
<li class="nav-lists">
<img src="fur3.webp" width="160" height="110" />
<div class="title">新风空调 立式3匹</div>
<p class="price">6999元起</p>
</li>
<span></span>
<li class="nav-lists">
<img src="fur4.webp" width="160" height="110" />
<div class="title">小米空调1.5匹1级能效</div>
<p class="price">2199元起</p>
</li>
<span></span>
<li class="nav-lists">
<img src="fur5.webp" width="160" height="110" />
<div class="title">米家分区洗烘一体机</div>
<p class="price">4999元起</p>
</li>
<span></span>
<li class="nav-lists">
<img src="fur6.webp" width="160" height="110" />
<div class="title">米家直驱滚筒洗衣机10kg</div>
<p class="price">1399元起</p>
</li>
</ul>
</div>
</a>
</li>
<li class="nav-item">
<a href=""
>路由器
<div class="nav-list">
<ul class="tops">
<li class="nav-lists">
<img src="rou1.webp" width="160" height="110" />
<div class="title">Redmi路由器AX3000</div>
<p class="price">199元起</p>
</li>
<span></span>
<li class="nav-lists">
<img src="rou2.webp" width="160" height="110" />
<div class="title">小米路由器AX6000</div>
<p class="price">469元起</p>
</li>
<span></span>
<li class="nav-lists">
<img src="rou3.webp" width="160" height="110" />
<div class="title">Xiaomi万兆路由器</div>
<p 999元起 class="price">1699元起</p>
</li>
<span></span>
<li class="nav-lists">
<img src="rou4.webp" width="160" height="110" />
<div class="title">Xiaomi HomeWiFi三频 Mesh 路由器</div>
<p class="price">1299元起</p>
</li>
<span></span>
<li class="nav-lists">
<img src="rou5.jpg" width="160" height="110" />
<div class="title">小米路由器4A 千兆</div>
<p class="price">129元起</p>
</li>
<span></span>
<li class="nav-lists">
<img src="rou6.png" width="160" height="110" />
<div class="title">查看小米全部路由器</div>
<p class="price"> </p>
</li>
</ul>
</div>
</a>
</li>
<li class="nav-item">
<a href="">服务中心</a>
</li>
<li class="nav-item">
<a href="">社区</a>
</li>
</ul>
</div>
<div class="search">
<from class="search-f" action="">
<label class="text">
<input type="text" placeholder="小米手机" />
<div class="text-list">
<ul class="sss">
<li>
<a class="fff"><span>全部商品</span></a>
</li>
<li>
<a class="fff"><span>空调</span></a>
</li>
<li>
<a class="fff"><span>冰箱</span></a>
</li>
<li>
<a class="fff"><span>手机</span></a>
</li>
<li>
<a class="fff"><span>洗衣机</span></a>
</li>
<li>
<a class="fff"><span>红米</span></a>
</li>
<li>
<a class="fff"><span>净水器</span></a>
</li>
<li>
<a class="fff"><span>电视</span></a>
</li>
</ul>
</div>
</label>
<a href="*"
><input class="search-btn" />
<div class="iconfont">
<div class="icon-sousuo"></div>
</div>
</a>
</from>
</div>
</div>
</div>
<!--白色结束-->
<!--第二大部分-->
<div class="container">
<div class="top">
<!--轮播图开始-->
<div class="slidec">
<div class="slidew">
<a href="">
<img src="slide1.jpeg" width="1226px" height="460px" />
</a>
<a href="">
<img src="slide2.webp" width="1226px" height="460px" />
</a>
<a href="">
<img src="slide3.webp" width="1226px" height="460px" />
</a>
<a href="">
<img src="slide4.webp" width="1226px" height="460px" />
</a>
<a href="">
<img src="slide5.webp" width="1226px" height="460px" />
</a>
<a href="">
<img src="slide1.jpeg" width="1226px" height="460px" />
</a>
</div>
</div>
<!--轮播图结束-->
<div class="box">
<div class="box1">
<ul class="box1-son">
<li class="box1-ss">
<a class="box1-sss"
><div class="iconfont">
<div class="icon-time ddd"></div>
</div>
<span>保障服务</span></a
>
</li>
<li class="box1-ss">
<a class="box1-sss"
><div class="iconfont">
<div class="icon-kejiqiye ddd"></div>
</div>
<span>企业团购</span></a
>
</li>
<li class="box1-ss">
<a class="box1-sss"
><div class="iconfont">
<div class="icon-ziyuan1568 ddd"></div>
</div>
<span>F码通道</span></a
>
</li>
<li class="box1-ss">
<a class="box1-sss"
><div class="iconfont">
<div class="icon-huiyuanqia ddd"></div>
</div>
<span>米粉卡</span></a
>
</li>
<li class="box1-ss">
<a class="box1-sss"
><div class="iconfont">
<div class="icon-caigoucaigouhuanhuodan ddd"></div>
</div>
<span>以旧换新</span></a
>
</li>
<li class="box1-ss">
<a class="box1-sss"
><div class="iconfont">
<div class="icon-shouji ddd"></div>
</div>
<span>话费充值</span></a
>
</li>
</ul>
</div>
<div class="box2">
<ul class="box2-son">
<li class="box2-ss first">
<a><img src="ss1.jpg" width="316px" height="170px" /></a>
</li>
<li class="box2-ss">
<a><img src="ss2.jpg" width="316px" height="170px" /></a>
</li>
<li class="box2-ss">
<a><img src="ss3.jpg" width="316px" height="170px" /></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--第二大部分结束-->
<!--第三大部分开始-->
<div class="seventy">
<div class="top">
<!--广告部分-->
<div class="adver">
<img src="ad1.webp" width="1226px" height="120px" />
</div>
<!--第一个板块-->
<div class="span1">
<div class="span1-top">
<div class="span1-head">
<h2>手机</h2>
<div class="more">
<a class="more-l">
<span>查看更多</span>
<div class="iconfont jiantou">
<div class="icon-jinrujiantouxiao"></div>
</div>
</a>
</div>
</div>
<div class="span1-f">
<div class="span1-left">
<a href="#" class="span-a iii">
<img src="span11.webp" width="234px" height="614px" />
</a>
</div>
<div class="span1-right">
<ul class="span1-ul">
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span12.webp" width="160px" height="160px" />
<h3 class="span-title">Redmi Note 12T Pro</h3>
<p class="advan">年度LCD屏幕之光</p>
<span class="price">1499元起</span>
<span class="del"><del>1599元</del></span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span13.webp" width="160px" height="160px" />
<h3 class="span-title">Xiaomi Civi 3</h3>
<p class="advan">仿生双眸 天生出色</p>
<span class="price">2499元起</span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span14.webp" width="160px" height="160px" />
<h3 class="span-title">Xiaomi 13 Ultra</h3>
<p class="advan">徕卡光学全焦段四摄|一英寸可变光圈|…</p>
<span class="price">5999元起</span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span15.webp" width="160px" height="160px" />
<h3 class="span-title">Redmi Note 12 Turbo</h3>
<p class="advan">狂暴引擎 超强性能释放</p>
<span class="price">1699元起</span>
<span class="del"><del>1899元</del></span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span16.webp" width="160px" height="160px" />
<h3 class="span-title">Redmi K60</h3>
<p class="advan">骁龙8+|2K高光直屏|5500mAh+67..</p>
<span class="price">2099元起</span>
<span class="del"><del>2499元</del></span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span17.webp" width="160px" height="160px" />
<h3 class="span-title">Redmi K60 Pro</h3>
<p class="advan">【第二代骁龙8】狂暴引擎</p>
<span class="price">2599元起</span>
<span class="del"><del>3299元</del></span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span18.webp" width="160px" height="160px" />
<h3 class="span-title">Redmi Note 12 Pro极速版</h3>
<p class="advan">高通骁龙778G, OLED柔性直屏+一亿.</p>
<span class="price">1599元起</span>
<span class="del"><del>1699元</del></span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span12.webp" width="160px" height="160px" />
<h3 class="span-title">Xiaomi 13限定定制色</h3>
<p class="advan">全新第二代骁龙8|徕卡专业光学镜头.</p>
<span class="price">4999元起</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--第一个板块结束-->
<!--第二个板块开始-->
<div class="span1">
<div class="span1-top">
<div class="span1-head">
<h2>智能穿戴</h2>
<div class="more more2">
<li class="choice1">耳机</li>
<li class="choice2">穿戴</li>
</div>
</div>
<div class="span1-f">
<div class="span1-left">
<a href="#" class="span-a iii">
<img src="span21.webp" width="234px" height="614px" />
</a>
</div>
<div class="span1-right">
<ul class="span1-ul">
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span22.webp" width="160px" height="160px" />
<h3 class="span-title">Xiaomi Buds 4 Pro</h3>
<p class="advan">48dB智能动态降噪|骨声纹通话降噪 ...</p>
<span class="price">899元</span>
<span class="del"><del>1099元</del></span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span23.webp" width="160px" height="160px" />
<h3 class="span-title">Xiaomi Buds 3 Pro</h3>
<p class="advan">40dB自适应降噪|空间音频|HiFi..</p>
<span class="price">399元</span>
<span class="del"><del>699元</del></span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span24.webp" width="160px" height="160px" />
<h3 class="span-title">Xiaomi Buds 3</h3>
<p class="advan">40dB宽频主动降噪|HiFi高保真音质|…</p>
<span class="price">299元</span>
<span class="del"><del>400元</del></span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span25.webp" width="160px" height="160px" />
<h3 class="span-title">Redmi Buds 4</h3>
<p class="advan">35dB智能主动降噪|AI通话降噪|30..</p>
<span class="price">179元</span>
<span class="del"><del>220元</del></span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span26.webp" width="160px" height="160px" />
<h3 class="span-title">Redmi Buds 3</h3>
<p class="advan">轻巧半入耳|通话降噪|20小时长续航</p>
<span class="price">139元</span>
<span class="del"><del>199元</del></span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span27.webp" width="160px" height="160px" />
<h3 class="span-title">小米真无线蓝牙耳机Air2 SE</h3>
<p class="advan">大尺寸动圈单位|20小时持久续航|双..</p>
<span class="price">89元</span>
<span class="del"><del>169元</del></span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span28.webp" width="160px" height="160px" />
<h3 class="span-title">Xiaomi骨传导耳机</h3>
<p class="advan">骨传导传声|轻盈机身|IP66防水防汗</p>
<span class="price">599元</span>
<span class="del"><del>699元</del></span>
</a>
</li>
<li class="span1-item block">
<a href="#" class="span-a items">
<h4 class="title1">Xiaomi降噪蓝牙耳机Necklace</h4>
<img src="span29.webp" width="80px" height="80px" />
<p class="price price-1">299元</p>
</a>
</li>
<li class="span1-item block">
<a href="#" class="span-a items">
<h2 class="title1 title2">
浏览更多
<p class="advan">耳机</p>
</h2>
<div class="iconfont">
<div class="icon-youjiantou"></div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--第二个板块结束-->
<!--第三板块开始-->
<div class="span1">
<div class="span1-top">
<div class="span1-head">
<h2>笔记本|电脑</h2>
<div class="more">
<li class="choice1">热门</li>
</div>
</div>
<div class="span1-f">
<div class="span1-left">
<a href="#" class="span-a iii">
<img src="span31.webp" width="234px" height="614px" />
</a>
</div>
<div class="span1-right">
<ul class="span1-ul">
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span32.webp" width="160px" height="160px" />
<h3 class="span-title">Redmi G 游戏本 2022</h3>
<p class="advan">16英寸2.5K 165HZ 电竞大屏</p>
<span class="price">7499元</span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span33.webp" width="160px" height="160px" />
<h3 class="span-title">Xiaomi Pad 6 Pro</h3>
<p class="advan">骁龙8+旗舰处理器|11英寸2.8K护眼..</p>
<span class="price">2399元</span>
<span class="del"><del>2499元</del></span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span34.webp" width="160px" height="160px" />
<h3 class="span-title">Xiaomi Pad 6</h3>
<p class="advan">11英寸2.3K护眼屏|骁龙870旗舰处理器</p>
<span class="price">1899元</span>
<span class="del"><del>1999元</del></span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span35.webp" width="160px" height="160px" />
<h3 class="span-title">RedmiBook Pro 15 2022 锐龙版</h3>
<p class="advan">可选全新锐龙7 6800H处理器,3.2K 9..</p>
<span class="price">5499元</span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span36.webp" width="160px" height="160px" />
<h3 class="span-title">Redmi Book 15E</h3>
<p class="advan">15.6"全高清大屏</p>
<span class="price">3599元</span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span32.webp" width="160px" height="160px" />
<h3 class="span-title">Redmi G Pro游戏本 锐龙版</h3>
<p class="advan">全新AMD 锐龙 7 6800H 标压处理器|..</p>
<span class="price">7299元</span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span38.webp" width="160px" height="160px" />
<h3 class="span-title">RedmiBook Pro 14 锐龙版</h3>
<p class="advan">2.5K超视网膜全面屏</p>
<span class="price">4299元</span>
</a>
</li>
<li class="span1-item block">
<a href="#" class="span-a items">
<h4 class="title1">Redmi Book Pro 14 2022</h4>
<img src="span39.webp" width="80px" height="80px" />
<p class="price price-1">5399元</p>
</a>
</li>
<li class="span1-item block">
<a href="#" class="span-a items">
<h2 class="title1 title2">
浏览更多
<p class="advan">热门</p>
</h2>
<div class="iconfont">
<div class="icon-youjiantou"></div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--第三板块结束-->
<!--第四板块开始-->
<div class="span1">
<div class="span1-top">
<div class="span1-head">
<h2>家电</h2>
<div class="more more2">
<li class="choice1">热门</li>
<li class="choice2">电视影音</li>
</div>
</div>
<div class="span1-f">
<div class="span1-left">
<a href="#" class="span-a">
<li class="left-1">
<img src="span41.webp" width="234px" height="300px" />
</li>
</a>
<a href="#" class="span-a">
<li class="left-1">
<img src="span42.webp" width="234px" height="300px" />
</li>
</a>
</div>
<div class="span1-right">
<ul class="span1-ul">
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span43.webp" width="160px" height="160px" />
<h3 class="span-title">小米电视6 65"OLED</h3>
<p class="advan">OLED自发光屏|百万级对比度|4.6m.</p>
<span class="price">5999元</span>
<span class="del"><del>6999元</del></span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span44.webp" width="160px" height="160px" />
<h3 class="span-title">小米电视6 至尊版 65英寸</h3>
<p class="advan">百级分区背光|双120Hz高刷|4.5GB.</p>
<span class="price">6899元</span>
<span class="del"><del>7999元</del></span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span45.webp" width="160px" height="160px" />
<h3 class="span-title">小米电视 ES55 2022款</h3>
<p class="advan">多分区背光|MEMC动态补偿|杜比视界</p>
<span class="price">2499元</span>
<span class="del"><del>2999元</del></span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span46.webp" width="160px" height="160px" />
<h3 class="span-title">巨省电 小米空调 1.5匹1级能效</h3>
<p class="advan">强劲制冷|高效节能|智能互联</p>
<span class="price">2199元</span>
<span class="del"><del>2499元</del></span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span47.webp" width="160px" height="160px" />
<h3 class="span-title">米家新风空调 立式3匹</h3>
<p class="advan">全屋快通风,就要大清风</p>
<span class="price">6999元</span>
<span class="del"><del>7299元</del></span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span48.webp" width="160px" height="160px" />
<h3 class="span-title">米家分区洗烘一体机 15kg</h3>
<p class="advan">健康分开洗一台就够了</p>
<span class="price">5499元</span>
<span class="del"><del>5999元</del></span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span49.webp" width="160px" height="160px" />
<h3 class="span-title">米家直驱滚筒洗衣机 10kg</h3>
<p class="advan">高效除菌除螨,深层健康守护</p>
<span class="price">1399元</span>
<span class="del"><del>1699元</del></span>
</a>
</li>
<li class="span1-item block">
<a href="#" class="span-a items">
<h4 class="title1">米家波轮洗衣机 10kg</h4>
<img src="span410.webp" width="80px" height="80px" />
<p class="price price-1">899元</p>
</a>
</li>
<li class="span1-item block">
<a href="#" class="span-a items">
<h2 class="title1 title2">
浏览更多
<p class="advan">热门</p>
</h2>
<div class="iconfont">
<div class="icon-youjiantou"></div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--第四板块结束-->
<!--第五板块开始-->
<div class="span1">
<div class="span1-top">
<div class="span1-head">
<h2>生活电器</h2>
<div class="more more2">
<li class="choice1">电暖器</li>
<li class="choice2">扫地机</li>
<li class="choice2">空净</li>
<li class="choice2">清洁</li>
</div>
</div>
<div class="span1-f">
<div class="span1-left">
<a href="#" class="span-a">
<li class="left-1">
<img src="span51.webp" width="234px" height="300px" />
</li>
</a>
<a href="#" class="span-a">
<li class="left-1">
<img src="span52.webp" width="234px" height="300px" />
</li>
</a>
</div>
<div class="span1-right">
<ul class="span1-ul">
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span53.webp" width="160px" height="160px" />
<h3 class="span-title">米家电暖器 温控版</h3>
<p class="advan">2200W强劲功率,对流速度,居浴两用</p>
<span class="price">329元</span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span54.webp" width="160px" height="160px" />
<h3 class="span-title">
米家石墨烯踢脚线电暖器 仿真火焰
</h3>
<p class="advan">加湿+火焰效果|悬浮外观|双核石墨.</p>
<span class="price">1599元</span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span55.webp" width="160px" height="160px" />
<h3 class="span-title">米家石墨烯智能电暖器</h3>
<p class="advan">石墨烯高温导热,即开即暖无需等</p>
<span class="price">549元</span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span56.webp" width="160px" height="160px" />
<h3 class="span-title">米家石墨烯踢脚线电暖器E</h3>
<p class="advan">制暖身材小,抵御寒冬功劳大</p>
<span class="price">499元</span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span57.webp" width="160px" height="160px" />
<h3 class="span-title">米家石墨烯折叠踢脚线电暖器 超.</h3>
<p class="advan">0°-180°百变折叠不占地方石墨烯速热|..</p>
<span class="price">899元</span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span58.webp" width="160px" height="160px" />
<h3 class="span-title">米家立式暖风机Lite</h3>
<p class="advan">3秒即热/70°广角送风/智能恒温/四种..</p>
<span class="price">349元</span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span59.webp" width="160px" height="160px" />
<h3 class="span-title">米家石墨烯折叠踢脚线电暖器</h3>
<p class="advan">石墨烯速热取暖,快上加快</p>
<span class="price">749元</span>
</a>
</li>
<li class="span1-item block">
<a href="#" class="span-a items">
<h4 class="title1">米家直流变频两季扇</h4>
<img src="span510.webp" width="80px" height="80px" />
<p class="price price-1">799元</p>
</a>
</li>
<li class="span1-item block">
<a href="#" class="span-a items">
<h2 class="title1 title2">
浏览更多
<p class="advan">热门</p>
</h2>
<div class="iconfont">
<div class="icon-youjiantou"></div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--第五板块结束-->
<!--第六板块开始-->
<div class="span1">
<div class="span1-top">
<div class="span1-head">
<h2>厨房电器</h2>
<div class="more more2">
<li class="choice1">净水器</li>
<li class="choice2">烟灶</li>
<li class="choice2">电饭煲</li>
<li class="choice2">微蒸烤</li>
</div>
</div>
<div class="span1-f">
<div class="span1-left">
<a href="#" class="span-a">
<li class="left-1">
<img src="span61.webp" width="234px" height="300px" />
</li>
</a>
<a href="#" class="span-a">
<li class="left-1">
<img src="span62.webp" width="234px" height="300px" />
</li>
</a>
</div>
<div class="span1-right">
<ul class="span1-ul">
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span63.webp" width="160px" height="160px" />
<h3 class="span-title">米家净水器1600G</h3>
<p class="advan">2.1秒一杯水,还原自来水的澎湃流速</p>
<span class="price">3799元</span>
<span class="del"><del>4599元</del></span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span64.webp" width="160px" height="160px" />
<h3 class="span-title">小米双核净水器1200G</h3>
<p class="advan">3L/min大流量,鲜活首杯水</p>
<span class="price">2999元</span>
<span class="del"><del>3499元</del></span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span65.webp" width="160px" height="160px" />
<h3 class="span-title">小米即热净水器Q600</h3>
<p class="advan">净热一体,1秒速热,精选调温每1°</p>
<span class="price">2499元</span>
<span class="del"><del>3499元</del></span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span66.webp" width="160px" height="160px" />
<h3 class="span-title">小米净水器H600G</h3>
<p class="advan">纯净生活双出水,六级过滤健康直饮</p>
<span class="price">1199元</span>
<span class="del"><del>1499元</del></span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span67.webp" width="160px" height="160px" />
<h3 class="span-title">米家净水器1000G</h3>
<p class="advan">澎湃大水量,5年免换RO滤芯</p>
<span class="price">2099元</span>
<span class="del"><del>2499元</del></span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span68.webp" width="160px" height="160px" />
<h3 class="span-title">小米双核净水器1200G</h3>
<p class="advan">3.2L/min大流量,鲜活首杯水</p>
<span class="price">2499元</span>
<span class="del"><del>3499元</del></span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span69.webp" width="160px" height="160px" />
<h3 class="span-title">小米净水器H800G Pro</h3>
<p class="advan">长效过滤,鲜活好水随心出</p>
<span class="price">1699元</span>
<span class="del"><del>1999元</del></span>
</a>
</li>
<li class="span1-item block">
<a href="#" class="span-a items">
<h4 class="title1">小米即热净水器Q800</h4>
<img src="span610.webp" width="80px" height="80px" />
<p class="price price-1">3099元</p>
</a>
</li>
<li class="span1-item block">
<a href="#" class="span-a items">
<h2 class="title1 title2">
浏览更多
<p class="advan">热门</p>
</h2>
<div class="iconfont">
<div class="icon-youjiantou"></div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--第六板块结束-->
<!--第七板块开始-->
<div class="span1">
<div class="span1-top">
<div class="span1-head">
<h2>智能家居</h2>
<div class="more more2">
<li class="choice1">小爱音箱</li>
<li class="choice2">门铃门锁</li>
<li class="choice2">路由器</li>
<li class="choice2">智能设备</li>
</div>
</div>
<div class="span1-f">
<div class="span1-left">
<a href="#" class="span-a">
<li class="left-1">
<img src="span71.webp" width="234px" height="300px" />
</li>
</a>
<a href="#" class="span-a">
<li class="left-1">
<img src="span72.webp" width="234px" height="300px" />
</li>
</a>
</div>
<div class="span1-right">
<ul class="span1-ul">
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span73.webp" width="160px" height="160px" />
<h3 class="span-title">Xiaomi智能家庭屏 10</h3>
<p class="advan">MIUI Home| 10.1"高清大屏|115°超..</p>
<span class="price">949元</span>
<span class="del"><del>999元</del></span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span74.webp" width="160px" height="160px" />
<h3 class="span-title">小米小爱音箱Play 增强版</h3>
<p class="advan">LED时钟显示,语音控制传统家电</p>
<span class="price">129元</span>
<span class="del"><del>149元</del></span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span75.webp" width="160px" height="160px" />
<h3 class="span-title">Xiaomi Sound</h3>
<p class="advan">HARMAN工程师专业调音,高保真震..</p>
<span class="price">549元</span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span76.webp" width="160px" height="160px" />
<h3 class="span-title">小米小爱音箱 Play</h3>
<p class="advan">听音乐、语音遥控家电</p>
<span class="price">99元</span>
<span class="del"><del>109元</del></span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span77.webp" width="160px" height="160px" />
<h3 class="span-title">小米小爱音箱 Pro</h3>
<p class="advan">澎湃低音,语音控制传统家电</p>
<span class="price">299元</span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span78.webp" width="160px" height="160px" />
<h3 class="span-title">小米AI音箱(第二代)</h3>
<p class="advan">低频饱满有深度,人声清晰有细节</p>
<span class="price">199元</span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span79.webp" width="160px" height="160px" />
<h3 class="span-title">小米小爱触屏音箱</h3>
<p class="advan">可视化智能家居,海量视听资源</p>
<span class="price">249元</span>
<span class="del"><del>260元</del></span>
</a>
</li>
<li class="span1-item block">
<a href="#" class="span-a items">
<h4 class="title1">小米小爱音箱</h4>
<img src="span710.webp" width="80px" height="80px" />
<p class="price price-1">299元</p>
</a>
</li>
<li class="span1-item block">
<a href="#" class="span-a items">
<h2 class="title1 title2">
浏览更多
<p class="advan">热门</p>
</h2>
<div class="iconfont">
<div class="icon-youjiantou"></div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--第七板块结束-->
<!--第八板块开始-->
<div class="span1">
<div class="span1-top">
<div class="span1-head">
<h2>运动出行</h2>
<div class="more more2">
<li class="choice1">平衡车/滑板车</li>
<li class="choice2">运动健身</li>
<li class="choice2">箱包配饰</li>
<li class="choice2">出行工具</li>
</div>
</div>
<div class="span1-f">
<div class="span1-left">
<a href="#" class="span-a">
<li class="left-1">
<img src="span81.webp" width="234px" height="300px" />
</li>
</a>
<a href="#" class="span-a">
<li class="left-1">
<img src="span82.webp" width="234px" height="300px" />
</li>
</a>
</div>
<div class="span1-right">
<ul class="span1-ul">
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span83.jpg" width="160px" height="160px" />
<h3 class="span-title">九号平衡车</h3>
<p class="advan">年轻人的酷玩具</p>
<span class="price">1999元</span>
<span class="del"><del>2199元</del></span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span84.webp" width="160px" height="160px" />
<h3 class="span-title">九号平衡车燃动版</h3>
<p class="advan">燃动升级,随走随停</p>
<span class="price">2399元</span>
<span class="del"><del>2599元</del></span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span85.png" width="160px" height="160px" />
<h3 class="span-title">九号平衡车 Plus</h3>
<p class="advan">一个形影不离的新伙伴</p>
<span class="price">3299元</span>
<span class="del"><del>3499元</del></span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span86.webp" width="160px" height="160px" />
<h3 class="span-title">米家电动滑板车1S</h3>
<p class="advan">型出格,行出色</p>
<span class="price">1999元</span>
<span class="del"><del>2199元</del></span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span87.webp" width="160px" height="160px" />
<h3 class="span-title">小米米家电动滑板车Pro</h3>
<p class="advan">性能提升,动力更强劲</p>
<span class="price">2799元</span>
<span class="del"><del>3099元</del></span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span88.webp" width="160px" height="160px" />
<h3 class="span-title">九号卡丁车Pro兰博基尼汽车定..</h3>
<p class="advan">九号卡丁车Pro兰博基尼汽车定制款</p>
<span class="price">9999元</span>
</a>
</li>
<li class="span1-item">
<a href="#" class="span-a items">
<img src="span89.webp" width="160px" height="160px" />
<h3 class="span-title">
九号平衡车 改装套件(不含平衡车)
</h3>
<p class="advan">小朋友的大玩具,老顽童的小赛车</p>
<span class="price">2999元</span>
</a>
</li>
<li class="span1-item block">
<a href="#" class="span-a items">
<h4 class="title1">米家电动滑板车 3 青春版</h4>
<img src="span810.webp" width="80px" height="80px" />
<p class="price price-1">1699元</p>
</a>
</li>
<li class="span1-item block">
<a href="#" class="span-a items">
<h2 class="title1 title2">
浏览更多
<p class="advan">热门</p>
</h2>
<div class="iconfont">
<div class="icon-youjiantou"></div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--第八板块结束-->
<!--底部图片-->
<div class="pic-box">
<div class="top">
<img src="pen1.webp" width="1226px" height="120px" />
</div>
</div>
</div>
</div>
<!--第三大部分结束-->
<!--网页底部-->
<div class="foot">
<div class="top">
<div class="slt">
<div class="iconfont cfoot">
<div class="icon-xiuliweihu qqq"></div>
<span class="exp">预约维修服务</span>
</div>
<span class="gun">|</span>
<div class="iconfont cfoot">
<div class="icon-7 qqq"></div>
<span class="exp">七天无理由退货</span>
</div>
<span class="gun">|</span>
<div class="iconfont cfoot">
<div class="icon-15tianbaohuan qqq"></div>
<span class="exp">15天免费换货</span>
</div>
<span class="gun">|</span>
<div class="iconfont cfoot">
<div class="icon-liwu qqq"></div>
<span class="exp">满69包邮</span>
</div>
<span class="gun">|</span>
<div class="iconfont cfoot">
<div class="icon-weizhi qqq"></div>
<span class="exp">1100余家售后门店</span>
</div>
</div>
<div class="alink">
<dl class="links-h">
<dt class="link-title"></dt>
</dl>
<dl class="links-h">
<dt class="link-title">选购指南</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="links-h">
<dt class="link-title">服务中心</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="links-h">
<dt class="link-title">线下门店</dt>
<dd><a href="">小米之家</a></dd>
<dd><a href="">服务网点</a></dd>
<dd><a href="">授权体验店/专区</a></dd>
</dl>
<dl class="links-h">
<dt class="link-title">关于小米</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>
</dl>
<dl class="links-h">
<dt class="link-title">关注我们</dt>
<dd><a href="">新浪微博</a></dd>
<dd><a href="">官方微信</a></dd>
<dd><a href="">联系我们</a></dd>
<dd><a href="">公益基金会</a></dd>
</dl>
<span></span>
<div class="link-right">
<h2>400-100-5678</h2>
<p>8:00-18:00(仅收市话费)</p>
<a href="">
<div class="bot">人工客服</div>
</a>
</div>
</div>
<!--网页最最后-->
</div>
</div>
<!--网页结尾-->
<div class="last">
<div class="top">
<div class="logo2"></div>
<div class="up">
<p>
<a href="" class="link">小米官网</a>
<span>|</span>
<a href="" class="link">MIUI</a>
<span>|</span>
<a href="" class="link">米家</a>
<span>|</span>
<a href="" class="link">多看</a>
<span>|</span>
<a href="" class="link">游戏</a>
<span>|</span>
<a href="" class="link">音乐</a>
<span>|</span>
<a href="" class="link">政企服务</a>
<span>|</span>
<a href="" class="link">小米天猫店</a>
<span>|</span>
<a href="" class="link">小米集团隐私政策</a>
<span>|</span>
<a href="" class="link">小米集团儿童信息保护规则</a>
<span>|</span>
<a href="" class="link">小米商城隐私政策</a>
<span>|</span>
<a href="" class="link">小米商城用户协议</a>
<span>|</span>
<a href="" class="link">问题反馈</a>
<span>|</span>
<a href="" class="link">SelectLocation</a>
</p>
<p>
<a href="" class="link">北京互联网法院法律服务工作站</a>
<span>|</span>
<a href="" class="link">中国消费者协会</a>
<span>|</span>
<a href="" class="link">北京市消费者协会</a>
</p>
</div>
<div class="feet">
<p>
©
<a href="" class="link fot">mi</a>
京ICP证110507号
<a href="" class="link fot">京ICP备10046444号</a>
<a href="" class="link fot">京公网安备11010802020134号</a>
<a href="" class="link fot">京网文[2023]0169-004号</a>
<br />
<a href="" class="link fot"
>互联网药品信息服务资格证 (京)-非经营性-2014-0090</a
>
<a href="" class="link fot">营业执照</a>
<a href="" class="link fot">医疗器械质量公告</a>
<br />
<a href="" class="link fot">增值电信业务许可证</a>
网络食品经营备案 京食药网食备202010048
<a href="" class="link fot">食品经营许可证</a>
<br />
违法和不良信息举报电话：171-5104-4404
<a href="" class="link fot">知识产权侵权投诉</a>
本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
</p>
</div>
<div class="pic4">
<a href="">
<img src="ft1.png" height="28px" width="auto" />
</a>
<a href="">
<img src="ft2.png" height="28px" width="auto" />
</a>
<a href="">
<img src="ft3.png" height="28px" width="auto" />
</a>
<a href="">
<img src="ft4.png" height="28px" width="auto" />
</a>
<a href="">
<img src="ft5.png" height="28px" width="auto" />
</a>
</div>
<div class="xm"></div>
</div>
</div>
<!--侧栏-->
<div class="right">
<div class="rights right-1">
<a href="" class="right-a right1-a">
<div class="iconfont">
<div class="icon-xianshangchongzhi ppp"></div>
</div>
<span>手机APP</span>
<div class="right-list">
<img src="rightpic.png" />
<p>扫码领取新人百元红包</p>
</div>
</a>
</div>
<div class="rights right-2">
<a href="" class="right-a">
<div class="iconfont">
<div class="icon-gerenzhongxin ppp"></div>
</div>
<span>个人中心</span>
</a>
</div>
<div class="rights right-3">
<a href="" class="right-a">
<div class="iconfont">
<div class="icon-xiuliweihu ppp"></div>
</div>
<span>售后服务</span>
</a>
</div>
<div class="rights right-4">
<a href="" class="right-a">
<div class="iconfont">
<div class="icon-service ppp"></div>
</div>
<span>人工客服</span>
</a>
</div>
<div class="rights right-5">
<a href="" class="right-a">
<div class="iconfont">
<div class="icon-gouwuche ppp"></div>
</div>
<span>购物车</span>
</a>
</div>
</div>
<!--结束-->
</body>
</html>CSS部分
@font-face {
font-family: 'iconfont'; /* Project id 4190027 */
src: url('//at.alicdn/t/c/font_4190027_w2mmtq1bzx.woff2?t=1690770670890') format('woff2'),
url('//at.alicdn/t/c/font_4190027_w2mmtq1bzx.woff?t=1690770670890') format('woff'),
url('//at.alicdn/t/c/font_4190027_w2mmtq1bzx.ttf?t=1690770670890') format('truetype');
}
body{
padding: 0;
margin: 0;
min-width: 1226px;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.head{
padding: 0;
margin: 0;
font-size: 12px;
width: 100%;
}
.head1{
margin: 0;
padding: 0;
font: 12px;
background: #333333;
height: 40px;
color: #B0B0B0;
}
.top{
width: 1226px;
margin: 0 auto;
padding: 0;
}
.top-left a:hover{
color: #ffffff;
}
.top-left{
float: left;
height: 40px;
font-size: 12px;
margin-left: auto;
margin-right: auto;
}
.top-left a{
text-decoration: none;
color: #B0B0B0;
line-height: 40px;
font-size: 12px;
display: inline-block;
}
.head1 span{
width: 3.23px;
height: 16px;
font-size: 12px;
color: #424242;
margin: 0 3.6px;
}
.top-left .links span{
top: 40px;
margin-left: -20px;
position:absolute;
display: block;
background: #ffffff;
box-shadow: 0 1px 5px #aaa;
height: 0px;
color: #333333;
z-index: 33;
}
.links .appcode img{
height: 0;
display: block;
position: relative;
}
.links:hover > span{
height: 90px;
transition:height 1s;
}
.links:hover > span img{
height: 90px;
transition:height 1s;
}
.top-right{
float: right;
height: 40px;
}
.top-right a{
text-decoration: none;
color: #B0B0B0;
line-height: 40px;
font-size: 0.8px;
}
.car{
position: relative;
margin-left: 10px;
display: block;
float: right;
height: 40px;
line-height: 40px;
width: 120px;
background-color: #424242
}
.car .car-son{
text-decoration: none;
margin: 35px 0 0 40px ;
color:#B0B0B0;
font-size: 1px;
}
.car-nav{
position: absolute;
background: #ffffff;
box-shadow: 0 1px 5px #aaa;
top: 40px;
width: 295px;
height: 0px;
overflow: hidden;
transition: height 1s;
right: 0;
text-align: center;
z-index: 33;
line-height: 100px;
}
.car:hover > .car-nav{
height: 100px;
}
.head2{
height: 100px;
position: relative;
}
.head2 .logo{
float: left;
width: 62px;
height: 56px;
margin-top: 22px;
}
.logo-son {
width: 56px;
height: 56px;
display: block;
background: url(logo.png) no-repeat;
background-size: 56px;
}
.head2-nav{
float: left;
width: 850px;
height: 100px;
}
.head2-nav .nav{
width: 1100px;
height: 88px;
margin: 0;
padding: 12px 0 0 30px;
list-style-type: none;
font-size: 16px;
}
.nav-category .ddd{
float: left;
width: 127px;
height: 88px;
padding-right: 15px;
}
.nav .nav-item a{
color: #333333;
float: left;
height: 24px;
text-decoration: none;
padding: 26px 10px 38px;
}
.nav-item:hover > a{
color: #ff6700;
}
.nav-item .nav-list{
display: none;
width: 100%;
height: 229px;
color: #333333;
font-size: 12px;
text-align: center;
left: 0;
border-top: 1px solid #e0e0e0;
background: #ffffff;
box-shadow: 0 3px 4px rgba(0,0,0,.18);
position: absolute;
top: 100px;
z-index: 33;
}
.nav-list .tops{
margin: 0 auto;
}
.nav-item .nav-list p{
color: #ff6700;
margin: 0;
height: 20px;
}
.nav-lists .title{
padding-top:20px;
}
.nav-item a:hover >div{
display: block;
}
.nav-lists{
position: relative;
margin-left: 10px;
margin-right: 10px;
top: 30px;
display: inline-block;
}
.nav-list .top{
margin-left: 165px;
}
.nav-list span{
display: inline-block;
position: relative;
top: -35px;
height: 90px;
border-left:1px solid #b0b0b0b0;
}
.category-list{
position: absolute;
background: rgba(64, 63, 63, 0.6);
top: 100px;
height: 460px;
margin-left: -92px;
width: 234px;
z-index: 32;
}
.category-list .category-nav{
display:block;
width: 234px;
height: 420px;
padding: 0;
margin: 20px 0;
}
.category-list c{
display: block;
color: #ffffff;
text-decoration: none;
height: 42px;
padding-left: 30px;
line-height: 42px;
font-size: 14px;
float: left;
width: 204px;
}
.category-navs{
width: 234px;
height: 42px;
}
.category-nav a:hover{
background: #ff6700;
}
.nav-left{
display: none;
position: absolute;
height: 458px;
top: 0px;
left: 234px;
z-index: 33;
border: 1px solid #e0e0e0;
box-shadow: 0 8px 16px rgba(0,0,0,.18);
border-left: 0;
background: #fff;
}
c .list1{
width: 248px;
}
c .list2{
width: 496px;
}
c .list3{
width: 744px;
}
c .list4{
width: 992px;
}
.category-navs a:hover > div{
display: block;
}
.left-list{
width: 248px;
float: left;
height: 456px;
padding:2px 0;
margin: 0;
color: black;
background: #fff;
}
.left-list2{
width: 248px;
float: left;
height: 456px;
padding: 2px 0;
margin: 0;
color: black;
background: #fff;
z-index: 33;
}
.left-list3{
width: 248px;
left: 512px;
top: -460px;
float: left;
height: 456px;
padding: 2px 0;
margin: 0;
color: black;
background: #fff;
}
.left-list4{
width: 248px;
left: 765px;
top: -460px;
float: left;
height: 456px;
padding: 2px 0;
margin: 0;
color: black;
background: #fff;
}
.left-lists{
position: relative;
float: left;
width: 225px;
height: 40px;
padding: 18px 20px;
}
.left-lists img{
float: left;
line-height: 76px;
padding: 0 12px 0px 0px;
}
.left-lists .title{
width: 172px;
line-height: 40px;
float: left;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.left-lists:hover .title{
color: #ff6700;
}
.search{
position: relative;
width:296px;
float: right;
margin-top: 25px;
}
.search-f{
position: relative;
display: inline-block;
height: 50px;
width: 296px;
}
.search input{
width: 244px;
height: 50px;
font-size: 24px;
line-height: 24px;
background: #fff;
color: #616161;
padding: 0;
border: 1px solid #e0e0e0;
outline: none;
font-size: 13px;
padding: 0 10px;
}
.search .search-btn{
position: absolute;
right:0;
top: 0;
z-index: 3;
width: 50px;
height: 50px;
font-size: 24px;
line-height: 24px;
background: #fff;
color: #616161;
padding: 0;
border-left: 1px solid #ff6700;
}
.iconfont .icon-sousuo{
position: absolute;
top: 17px;
left: 257px;
z-index: 32;
}
.icon-sousuo{
font-size: 140%;
color: #616161;
}
.search-f a:hover > input{
background: #ff6700;
}
.text-list{
display: none;
position: absolute;
width: 244px;
background: #fff;
border: #ff6700 1px solid;
border-top:none ;
z-index: 32;
}
.search-f label:hover > input{
border: #ff6700 1px solid;
}
.search-f label:hover > div{
display: block;
}
.sss{
padding: 0;
margin: 0;
}
.sss .fff{
position: relative;
color: black;
display: block;
height: 25px;
width: 244px;
padding:4px 0;
}
.sss .fff span{
margin-left: 10px;
color: #757575;
font-size: 15px;
}
li:hover .fff{
background: #e0e0e0;
}
.slidec{
width: 1226px;
height: 460px;
overflow: hidden;
}
.slidec .slidew{
display: flex;
width: 7356px;
height: 460px;
animation: run 20s linear infinite;
}
@keyframes run{
0%,10%{
transform: translateX(0);
}
20%,30%{
transform: translateX(-1226px);
}
40%,50%{
transform: translateX(-2452px);
}
60%,70%{
transform: translateX(-3678px);
}
80%,90%{
transform: translateX(-4904px);
}
100%{
transform: translateX(-6130px);
}
}
.box{
margin-top: 14px;
background: #fff;
height: 196px;
}
.box1{
float: left;
min-width: 234px;
height: 170px;
}
.box1 .box1-son{
margin: 0;
padding: 3px;
width: 242px;
height: 170px;
margin: 0;
}
.box1-son .box1-ss{
position: relative;
background:#5f5750;
float: left;
height: 82px;
color: #fff;
font-size: 12px;
text-align: center;
border: 1px solid #333;
}
.box1-sss{
display: block;
padding: 18px 0 0;
width: 75px;
font-size: 12px;
opacity: .7;
}
.box1-ss a:hover{
opacity: 1;
}
.box2{
position: relative;
left: 14px;
height: 170px;
float: left;
width:978px;
background: #fff;
}
.box2-son{
padding: 0;
height: 170px;
margin: 0;
}
.box2-ss{
float: left;
width: 316px;
background: #e0e0e0;
height: 170px;
margin-left: 14px;
transition: box-shadow .2s linear;
}
.box2-ss a{
height: 170px;
width: 316px;
}
.box2-son .first{
margin: 0;
}
.box2-son li:hover{
background: 120%;
box-shadow: 0 15px 30px rgba(0,0,0,.1);
}
.ddd{
font-size: 25px;
color: #fff;
}
.seventy{
background: #f5f5f5;
padding-top: 4px;
padding-bottom: 12px;
}
.adver{
height: 120px;
margin: 22px 0;
overflow: hidden;
background: #f5f5f5;
}
.span1-head{
position: relative;
height: 58px;
}
.span1-head h2{
font-size: 22px;
font-weight: 200;
line-height: 58px;
margin: 0;
}
.more{
display: block;
position: absolute;
right: 0px;
top: 0px;
line-height: 58px;
}
.more .more-l{
position: relative;
float: left;
font-size: 16px;
width: 92px;
height: 58px;
transition: color .5s linear;
}
.jiantou{
right: 0px;
top: 0px;
/* padding: 4px; */
position:absolute;
margin: 0 0 0 8px;
color: #B0B0B0;
font-size: 20px;
transition: color .5s linear;
}
.more a:hover{
color: #ff6700;
}
.more a:hover > div{
color: #ff6700;
}
.span1-f{
width: 1226px;
height: 628px;
}
.span1-left{
float: left;
width: 234px;
height: 614px;
padding: 0;
margin: 0;
}
.span1-right{
float: left;
width: 978px;
height: 614px;
margin-left: 14px;
}
.span-a{
display: block;
text-align: center;
text-decoration: none;
color: black;
font-size: 14px;
transition: all .2s linear
}
.iii{
height: 614px;
}
.span1-item .items{
padding: 22px 0;
}
.span1-f .span-a:hover{
box-shadow: 0 15px 30px rgba(0,0,0,.1);
transform: translate3d(0,-2px,0)
}
.span1-ul{
height: 614px;
margin: 0 0 -14px -14px;
padding: 0;
}
.span1-item{
float: left;
height: 300px;
width: 234px;
padding: 0;
background: #fff;
margin-left: 14px;
margin-bottom: 14px;
list-style: none;
}
.span-title{
margin: 31.34px 0 0;
text-overflow: ellipsis;
font-weight: 350;
font-size: 14px;
}
.span1-item .advan{
color: #b0b0b0;
font-size: 12px;
margin: 0;
padding: 0 10px 10px;
}
.price{
color: #ff6700;
}
.del{
color: #B0B0B0;
}
.more2{
height: 42px;
float: right;
}
.choice1{
line-height: 42px;
margin: 0 0 0 30px;
float: left;
font-size: 16px;
color: #ff6700;
border-bottom: 2px solid #ff6700;
list-style: none;
}
.choice2{
line-height: 42px;
margin: 0 0 0 30px;
float: left;
font-size: 16px;
color: #424242;
list-style: none;
}
.block{
height: 143px;
text-align: left;
}
.title1{
width: 94px;
height: 63px;
float: left;
margin:10px 0px 5px 30px;
word-wrap: break-word;
font-weight: 300;
text-align: left;
}
.price-1{
margin: -20px 110px 5px -20px;
display: block;
}
.title2{
margin: 35px 10px 0px 30px;
}
.icon-youjiantou{
margin: 30px 0 21px 0;
font-size: 50px;
color: #ff6700;
}
.item-left{
margin-left: -14px;
}
.left-1{
height: 300px;
margin-bottom: 14px;
}
.pic-box{
margin: 22px 0;
height: 120px;
overflow: hidden;
}
.foot{
height: 472.17px;
text-align: center
}
.slt{
padding: 27px 0;
border-bottom: 1px solid #e0e0e0;
font-size: 16px;
}
.cfoot{
display: inline-block;
height: 25px;
width: 19%;
color:#616161;
font-size: 16px;
transition: color .2s linear;
}
.qqq{
display: inline-block;
font-size: 19px;
}
.gun{
color: #e0e0e0;
}
.cfoot:hover{
color: #ff6700;
}
.link-title{
width: 160px;
margin: -1px 0 26px;
line-height: 1.25;
color: #424242;
}
.alink{
height: 392.5px;
padding: 40px 0;
}
.links-h{
width: 160px;
float: left;
text-align: left;
}
.links-h dd{
width: 160px;
margin:10px 0 0;
height: 18px;
line-height: 18px;
}
.links-h a{
color: #757575;
}
.links-h a:hover{
color: #ff6700;
}
.link-right{
float: right;
width: 251.67px;
}
.link-right h2{
text-align: center;
color: #ff6700;
font-size: 20px;
font-weight: 350;
margin:0 0 5px;
}
.link-right p{
margin: 0 0 5px;
color: #616161;
}
.foot dd{
font-size: 10px;
padding: 0;
}
.alink span{
position: absolute;
display: inline-block;
height: 80px;
border: 1px solid #e0e0e0;
left: 1190px;
}
.bot{
margin: 0 auto;
width: 119.33px;
height: 29.33px;
border: 1px solid #ff6700;
line-height: 29.33px;
color: #ff6700;
transition: all .2s linear ;
}
.alink a:hover > div{
background: #ff6700;
color: #fff;
}
.last{
padding: 30px 0;
/* height: 265.33px; */
font-size: 12px;
background: #fafafa;
}
.logo2{
width: 56px;
height: 56px;
float: left;
background: url(logo.png) no-repeat;
background-size: 100%;
margin-right: 20px;
}
.last p{
margin: 0;
}
.last .link{
color: #616161;
}
.last a:hover{
color: #ff6700;
}
.feet{
margin-left: 75px;
color: #b0b0b0;
}
.last .fot{
color: #b0b0b0;
}
.pic4{
padding: 10px 0;
margin-left: 75px;
}
.xm{
margin: 30px auto 0;
width: 100%;
height: 19px;
background: url(last.png) no-repeat center;
}
.right{
position: fixed;
right: 0;
bottom: 70px;
width: 82px;
/* height: px; */
background: #ff6700;
z-index: 99;
}
.rights{
width: 82px;
height: 90px;
background: #fff;
border: 1px solid #f5f5f5;
text-align: center;
color: #757575;
}
.ppp{
display: block;
width: 80px;
font-size: 30px;
color: #757575;
margin-top: 30px;
margin-bottom: 10px;
transition: color .2s linear;
margin-left: auto;
margin-right: auto;
}
.right-a{
display: block;
width: 82px;
height: 90px;
}
.right-1{
position: relative;
}
.right-list{
position: absolute;
background: #fff;
width: 120px;
top: 0px;
left:-120px;
display: none;
}
.right-a p{
color: #757575;
}
.right-a span{
color: #757575;
transition: color .2s linear;
font-size: 10px;
}
.right-a:hover span{
color: #ff6700;
}
.right-a:hover .ppp{
color: #ff6700;
}
.right1-a:hover .right-list{
display: block;
}
.right-list img{
display: block;
width: 100px;
height: 100px;
margin: 6px auto;
}iconfont部分
@font-face {
font-family: "iconfont"; /* Project id 4190027 */
src: url('//at.alicdn/t/c/font_4190027_9c4fo2zlggb.woff2?t=1691195419474') format('woff2'),
url('//at.alicdn/t/c/font_4190027_9c4fo2zlggb.woff?t=1691195419474') format('woff'),
url('//at.alicdn/t/c/font_4190027_9c4fo2zlggb.ttf?t=1691195419474') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-jiantouyou:before {
content: "\e62d";
}
.icon-youjiantou:before {
content: "\e627";
}
.icon-jinrujiantouxiao:before {
content: "\e8b9";
}
.icon-gouwuche:before {
content: "\e63f";
}
.icon-gerenzhongxin:before {
content: "\e614";
}
.icon-shouji:before {
content: "\e631";
}
.icon-huiyuanqia:before {
content: "\e886";
}
.icon-xianshangchongzhi:before {
content: "\e64c";
}
.icon-kejiqiye:before {
content: "\e73f";
}
.icon-caigoucaigouhuanhuodan:before {
content: "\e61c";
}
.icon-ziyuan1568:before {
content: "\e616";
}
.icon-service:before {
content: "\e67e";
}
.icon-time:before {
content: "\e601";
}
.icon-liwu:before {
content: "\e600";
}
.icon-15tianbaohuan:before {
content: "\e66d";
}
.icon-7:before {
content: "\e67d";
}
.icon-weizhi:before {
content: "\e8ff";
}
.icon-xiuliweihu:before {
content: "\e615";
}
.icon-sousuo:before {
content: "\eafe";
}版权声明：本文标题：用html+css实现小米官网（详细代码） 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1726413806a1069561.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论