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">
<link rel="stylesheet" href="style.css">
<title>小米商城</title>
</head>
<body>
<div class="label">
<div style="margin: 0 auto;width: 86%;height: 100%;">
<div style="float:left;">
<span>小米官网</span>
<span>小米商城</span>
<span>MIUI</span>
<span>loT</span>
<span>云服务</span>
<span>天星数科</span>
<span>有品</span>
<span>小爱开放平台</span>
<span>企业团购</span>
<span>资质证照</span>
<span>协议规则</span>
<span>下载app</span>
<span style="border-right: none;">Select Location</span>
</div>
<div style="float:right;">
<span>登录</span>
<span>注册</span>
<span>消息通知</span>
<span class="go" style="border-right: none; background-color: #424242;">购物车(0)</span>
</div>
</div>
</div>
<div class="head">
<div class="left">
<img src="img/logo.png" alt="">
</div>
<div>
<ul>
<a href="">
<li>Xiaomi手机</li>
</a>
<a href="">
<li>Redmi手机</li>
</a>
<a href="">
<li>电视</li>
</a>
<a href="">
<li>笔记本</li>
</a>
<a href="">
<li>平板</li>
</a>
<a href="">
<li>家电</li>
</a>
<a href="">
<li>路由器</li>
</a>
<a href="">
<li>服务中心</li>
</a>
<a href="">
<li>社区</li>
</a>
</ul>
</div>
<div class="right">
<input type="text" placeholder="请输入内容">
<div class="div-bg">
<img src="img/btn黑.png" alt="">
</div>
</div>
</div>
<div style="width:100%;background-color: #fff;">
<div style=" width: 86%;
margin: 0 auto;">
<div class="list-content-div">
<div class="list-content">
<ul>
<a href="">
<li>手机</li>
</a>
<a href="">
<li>电视</li>
</a>
<a href="">
<li>家电</li>
</a>
<a href="">
<li>笔记本 平板</li>
</a>
<a href="">
<li>出行 穿戴</li>
</a>
<a href="">
<li>耳机 音响</li>
</a>
<a href="">
<li>健康 儿童</li>
</a>
<a href="">
<li>生活 箱包</li>
</a>
<a href="">
<li>智能 路由器</li>
</a>
<a href="">
<li>电器 配件</li>
</a>
</ul>
</div>
<div class="lunbotu">
<div class="r"><img src="img/l.png" alt=""></div>
<div class="c">
</div>
<div class="l"><img src="img/r.png" alt=""></div>
<div style=" position: absolute; bottom: 17px;
right: 60px;"><img src="img/f6.png" alt="" style="width: 100%;height: 100%;"></div>
</div>
<div class="fixed">
<div>
<img src="img/f1.png" alt="">
<p>手机APP</p>
</div>
<div>
<img src="img/f2.png" alt="">
<p>个人中心</p>
</div>
<div>
<img src="img/f3.png" alt="">
<p>售后服务</p>
</div>
<div>
<img src="img/f4.png" alt="">
<p>人工客服</p>
</div>
</div>
</div>
<div class="shouhou">
<div class="shouhou-con">
<div class="con1">
<img src="img/con1.png" alt="">
<div>保障服务</div>
</div>
<div class="con2">
<img src="img/con2.png" alt="">
<div>企业团购</div>
</div>
<div class="con3">
<img src="img/con3.png" alt="">
<div>F码通道</div>
</div>
<div class="con4">
<img src="img/con4.png" alt="">
<div>米粉卡</div>
</div>
<div class="con5">
<img src="img/con5.png" alt="">
<div>以旧换新</div>
</div>
<div class="con6">
<img src="img/con6.png" alt="">
<div>话费充值</div>
</div>
</div>
<div class="img1"></div>
<div class="img2"></div>
<div class="img3"></div>
</div>
</div>
</div>
<div class="body">
<div>
<img src="img/img.webp" alt="" style="width: 100%; height: 120px; margin: 20px 0px;">
</div>
<div class="title">
<span style="font-size: 22px;">手机</span>
<span class="more"> <a href="">查看更多</a></span>
</div>
<!-- 手机 -->
<div class="shouji">
<div class="shouji-img"></div>
<div class="shouji-con">
<div class="con"><a href=""><img src="img/shouji1.webp" alt="">
<h3>Redmi Note 12T Pro</h3>
<p class="text1">年度LCD 屏幕之光</p>
<p style="margin-top: 16px;"><span class="text2">1499元起</span>
<span class="text3">1599元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/shouji2.webp" alt="">
<h3>Xiaomi Civi 3</h3>
<p class="text1">仿生双眸 天生出色</p>
<p style="margin-top: 16px;"><span class="text2">2499元起</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/shouji3.webp" alt="">
<h3>Xiaomi 13 Uitra</h3>
<p class="text1">徕卡光学全焦段四摄|一英寸可变光圈|...</p>
<p style="margin-top: 16px;"><span class="text2">5999元起</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/shouji4.webp" alt="">
<h3>Redmi Note 12 Turbo</h3>
<p class="text1">狂暴引擎超强性能释放</p>
<p style="margin-top: 16px;"><span class="text2">1799元起</span>
<span class="text3">1800元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/shouji5.webp" alt="">
<h3>Redmi K60</h3>
<p class="text1">骁龙8+|2K高光直屏|5500mAh+67...</p>
<p style="margin-top: 16px;"><span class="text2">2299元起</span>
<span class="text3">2699元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/shouji6.webp" alt="">
<h3>Redmi K60 Pro</h3>
<p class="text1">【第二代骁龙8】狂暴引擎</p>
<p style="margin-top: 16px;"><span class="text2">2899元起</span>
<span class="text3">3599元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/shouji7.webp" alt="">
<h3>Redmi Note 12Pro 极速版</h3>
<p class="text1">高通骁龙778G，OLED柔性直屏+─亿...</p>
<p style="margin-top: 16px;"><span class="text2">1499元起</span>
<span class="text3">1699元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/shouji8.webp" alt="">
<h3>Xiaomi 13 限量定制色</h3>
<p class="text1">全新第二代骁龙8|徕卡专业光学镜头.</p>
<p style="margin-top: 16px;"><span class="text2">4999元起</span>
</p>
</a></div>
</div>
</div>
<!-- 智能穿戴 -->
<div class="title" style="margin-top: 30px; ">
<span style="font-size: 22px;">智能穿戴</span>
<span style=" font-size: 16px;
float: right;"> <a href="" style="margin-right: 20px;color: #fe7b43;border-bottom: #fe7b43 3px solid;">耳机</a><a
href="">穿戴</a></span>
</div>
<div class="shouji">
<div class="shouji-img" style=" background-image: url(img/img2.webp);background-color: #ffff;"></div>
<div class="shouji-con">
<div class="con"><a href=""><img src="img/chuandai1.webp" alt="">
<h3>Xiaomi Buds 4 Pro</h3>
<p class="text1">48dB智能动态降噪│骨声纹通话降噪...</p>
<p style="margin-top: 16px;"><span class="text2">899元起</span>
<span class="text3">1099元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/chuandai2.webp" alt="">
<h3>Xiaomi Buds 3 Pro</h3>
<p class="text1">40dB自适应降噪│|空间音频| HiFi...</p>
<p style="margin-top: 16px;"><span class="text2">399元起</span>
<span class="text3">699元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/chuandai3.webp" alt="">
<h3>Xiaomi Buds 3</h3>
<p class="text1">40dB宽频主动降噪|HiFi高保真音质| ...</p>
<p style="margin-top: 16px;"><span class="text2">299元起</span>
<span class="text3">499元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/chuandai4.webp" alt="">
<h3>Redmi Buds 4</h3>
<p class="text1">35dB智能主动降噪|AI通话降噪|30...</p>
<p style="margin-top: 16px;"><span class="text2">199元起</span>
<span class="text3">229元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/chuandai5.webp" alt="">
<h3>Redmi Buds 3</h3>
<p class="text1">轻巧半入耳|通话降噪|20小时长续航</p>
<p style="margin-top: 16px;"><span class="text2">149元起</span>
<span class="text3">199元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/chuandai6.webp" alt="">
<h3>小米真无线蓝牙耳机Air2 SE</h3>
<p class="text1">大尺寸动圈单元|20小时持久续航|双...</p>
<p style="margin-top: 16px;"><span class="text2">89元起</span>
<span class="text3">169元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/chuandai7.webp" alt="">
<h3>Xiaomi骨传导耳机</h3>
<p class="text1">骨传导传声|轻盈机身|IP66防水防汗</p>
<p style="margin-top: 16px;"><span class="text2">599元起</span>
<span class="text3">699元</span>
</p>
</a></div>
<div class="con">
<div class="box">
<div style="float:left;width: 50%;">
<p style="font-size: 14px;margin-top: 10px;">Xiaomi降噪蓝牙耳机Necklace</p>
<p style="font-size: 12px;color:#ff6700;margin-top: 20px;">299元</p>
</div>
<div style="float:right ;width: 50%; background-image: url(img/chuandai8.webp);
background-repeat: no-repeat;
background-size: 80px 80px;"></div>
</div>
<div class="box" style="margin-top: 10px;">
<div style="float:left;width: 50%;">
<p style="font-size: 18px;margin-top: 10px;">浏览更多</p>
<p style="font-size: 12px;color:#706e6c;margin-top: 5px;">耳机</p>
</div>
<div style="float:right ;width: 50%; background-image: url(img/jt2.png);
background-repeat: no-repeat;
background-position: center top;
background-size: 48px 48px;"></div>
</div>
</div>
</div>
</div>
<!-- 笔记本 | 平板 -->
<div class="title" style="margin-top: 30px;">
<span style="font-size: 22px;">笔记本 | 平板</span>
<span style=" font-size: 16px;
float: right;"> <a href="" style="color: #fe7b43;border-bottom: #fe7b43 3px solid;">热门</a></span>
</div>
<div class="shouji">
<div class="shouji-img" style=" background-image: url(img/img3.webp);background-color: #ffff;"></div>
<div class="shouji-con">
<div class="con"><a href=""><img src="img/pingban1.webp" alt="">
<h3>Redmi G游戏本2022</h3>
<p class="text1">16英寸2.5K165Hz电竞大屏</p>
<p style="margin-top: 16px;"><span class="text2">7499元起</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/pingban2.webp" alt="">
<h3>Xiaomi Pad 6 Pro</h3>
<p class="text1">骁龙8+旗舰处理器|11英寸2.8K护眼...</p>
<p style="margin-top: 16px;"><span class="text2">2499元起</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/pingban3.webp" alt="">
<h3>Xiaomi Pad 6</h3>
<p class="text1">11英寸2.8K护眼屏|骁龙870旗舰处理...</p>
<p style="margin-top: 16px;"><span class="text2">1899元起</span>
<span class="text3">1999元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/pingban4.webp" alt="">
<h3>小米笔记本Pro ×14</h3>
<p class="text1">高能旗舰轻薄力作</p>
<p style="margin-top: 16px;"><span class="text2">5999元起</span>
<span class="text3">7999元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/pingban5.webp" alt="">
<h3>Redmi Book Pro 14 2022</h3>
<p class="text1">全新12代英特尔处理器，2.5K120Hz...</p>
<p style="margin-top: 16px;"><span class="text2">5399元起</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/pingban6.webp" alt="">
<h3>RedmiBook Pro 15 2022锐龙版</h3>
<p class="text1">可选全新锐龙76800H处理器，3.2K 9...</p>
<p style="margin-top: 16px;"><span class="text2">5499元起</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/pingban7.webp" alt="">
<h3>Redmi Pad</h3>
<p class="text1">入门平板，屏幕/外观/系统三大升级</p>
<p style="margin-top: 16px;"><span class="text2">899元起</span>
<span class="text3">1299元</span>
</p>
</a></div>
<div class="con">
<div class="box">
<div style="float:left;width: 50%;">
<p style="font-size: 14px;margin-top: 10px;">小米平板5 Pro</p>
<p style="font-size: 12px;color:#ff6700;margin-top: 20px;">1999元</p>
</div>
<div style="float:right ;width: 50%; background-image: url(img/pingban8.webp);
background-repeat: no-repeat;
background-size: 80px 80px;"></div>
</div>
<div class="box" style="margin-top: 10px;">
<div style="float:left;width: 50%;">
<p style="font-size: 18px;margin-top: 10px;">浏览更多</p>
<p style="font-size: 12px;color:#706e6c;margin-top: 5px;">热门</p>
</div>
<div style="float:right ;width: 50%; background-image: url(img/jt2.png);
background-repeat: no-repeat;
background-position: center top;
background-size: 48px 48px;"></div>
</div>
</div>
</div>
</div>
<!-- 家电 -->
<div class="title" style="margin-top: 30px;">
<span style="font-size: 22px;">家电</span>
<span style=" font-size: 16px;
float: right;"> <a href=""
style="margin-right: 20px;color: #fe7b43;border-bottom: #fe7b43 3px solid;">热门</a><a
href="">电视影音</a></span>
</div>
<div class="shouji">
<div class="shouji-img" style=" background-image: none;">
<div class="top"></div>
<div class="btm"></div>
</div>
<div class="shouji-con">
<div class="con"><a href=""><img src="img/jiadian1.webp" alt="">
<h3>小米电视EA652022款65英寸</h3>
<p class="text1">金属全面屏|4K超高清|远场语音</p>
<p style="margin-top: 16px;"><span class="text2">1999元</span>
<span class="text3">2899元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/jiadian2.webp" alt="">
<h3>小米电视4A70英寸</h3>
<p class="text1">4K超高清|人工智能语音系统|蓝牙...</p>
<p style="margin-top: 16px;"><span class="text2">3199元</span>
<span class="text3">3699元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/jiadian3.webp" alt="">
<h3>小米电视EA75 2022款</h3>
<p class="text1">金属全面屏|4K超高清|远场语音</p>
<p style="margin-top: 16px;"><span class="text2">2899元</span>
<span class="text3">4199元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/jiadian4.webp" alt="">
<h3>Redmi MAX86”超大屏电视</h3>
<p class="text1">多分区背光|双120Hz高刷|HDMI2.1..</p>
<p style="margin-top: 16px;"><span class="text2">5599元</span>
<span class="text3">7999元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/jiadian5.webp" alt="">
<h3>小米电视EA50 2022款</h3>
<p class="text1">金属全面屏|4K超高清|远场语音</p>
<p style="margin-top: 16px;"><span class="text2">1349元</span>
<span class="text3">1899元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/jiadian6.webp" alt="">
<h3>小米电视大师86英寸Mini LED</h3>
<p class="text1">千级分区Mini LED</p>
<p style="margin-top: 16px;"><span class="text2">14999元</span>
<span class="text3">15999元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/jiadian7.webp" alt="">
<h3>Redmi智能电视×85英寸</h3>
<p class="text1">120Hz刷新率|3GB+32GB|远场语音</p>
<p style="margin-top: 16px;"><span class="text2">4299元</span>
<span class="text3">4999元</span>
</p>
</a></div>
<div class="con">
<div class="box">
<div style="float:left;width: 50%;">
<p style="font-size: 14px;margin-top: 10px;">小米平板5 Pro</p>
<p style="font-size: 12px;color:#ff6700;margin-top: 20px;">1999元</p>
</div>
<div style="float:right ;width: 50%; background-image: url(img/pingban8.webp);
background-repeat: no-repeat;
background-size: 80px 80px;"></div>
</div>
<div class="box" style="margin-top: 10px;">
<div style="float:left;width: 50%;">
<p style="font-size: 18px;margin-top: 10px;">浏览更多</p>
<p style="font-size: 12px;color:#706e6c;margin-top: 5px;">热门</p>
</div>
<div style="float:right ;width: 50%; background-image: url(img/jt2.png);
background-repeat: no-repeat;
background-position: center top;
background-size: 48px 48px;"></div>
</div>
</div>
</div>
</div>
<!-- 生活电器 -->
<div class="title" style="margin-top: 30px;">
<span style="font-size: 22px;">生活电器</span>
<span style=" font-size: 16px;
float: right;"> <a href=""
style="margin-right: 20px;color: #fe7b43;border-bottom: #fe7b43 3px solid;">电暖器</a>
<a href="" style="margin-right: 20px;">扫地机</a>
<a href="" style="margin-right: 20px;">空净</a>
<a href="">清洁</a>
</span>
</div>
<div class="shouji">
<div class="shouji-img" style=" background-image: none;">
<div class="top" style="background-image: url(img/img6.webp);"></div>
<div class="btm" style="background-image: url(img/img7.webp);"></div>
</div>
<div class="shouji-con">
<div class="con"><a href=""><img src="img/shenghuo1.webp" alt="">
<h3>米家电暖器温控版</h3>
<p class="text1">2200W强劲功率，对流速热,居浴两用</p>
<p style="margin-top: 16px;"><span class="text2">329元</span>
<span class="text3">2899元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/shenghuo2.webp" alt="">
<h3>米家石墨烯踢脚线电暖器仿真火...</h3>
<p class="text1">加湿+火焰效果|悬浮外观|双核石墨...</p>
<p style="margin-top: 16px;"><span class="text2">1599元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/shenghuo3.webp" alt="">
<h3>米家石墨烯智能电暖器</h3>
<p class="text1">石墨烯高导热,即开即暖无需等</p>
<p style="margin-top: 16px;"><span class="text2">549元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/shenghuo4.webp" alt="">
<h3>米家踢脚线电暖器E</h3>
<p class="text1">制暖身材小，抵御寒冬功劳大</p>
<p style="margin-top: 16px;"><span class="text2">499元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/shenghuo5.webp" alt="">
<h3>米家石墨烯折叠踢脚线电暖器超...</h3>
<p class="text1">0°-180°百变折叠不占地|石墨烯速热|...</p>
<p style="margin-top: 16px;"><span class="text2">899元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/shenghuo6.webp" alt="">
<h3>米家立式暖风机Lite</h3>
<p class="text1">3秒即热/70°广角送风/智能恒温/四种...</p>
<p style="margin-top: 16px;"><span class="text2">349元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/shenghuo7.webp" alt="">
<h3>米家石墨烯踢脚线电暖器</h3>
<p class="text1">石墨烯速热取暖，快上加快</p>
<p style="margin-top: 16px;"><span class="text2">749元</span>
</p>
</a></div>
<div class="con">
<div class="box">
<div style="float:left;width: 50%;">
<p style="font-size: 14px;margin-top: 10px;">米家直流变频两季扇</p>
<p style="font-size: 12px;color:#ff6700;margin-top: 20px;">799元</p>
</div>
<div style="float:right ;width: 50%; background-image: url(img/shenghuo8.webp);
background-repeat: no-repeat;
background-size: 80px 80px;"></div>
</div>
<div class="box" style="margin-top: 10px;">
<div style="float:left;width: 50%;">
<p style="font-size: 18px;margin-top: 10px;">浏览更多</p>
<p style="font-size: 12px;color:#706e6c;margin-top: 5px;">电暖器</p>
</div>
<div style="float:right ;width: 50%; background-image: url(img/jt2.png);
background-repeat: no-repeat;
background-position: center top;
background-size: 48px 48px;"></div>
</div>
</div>
</div>
</div>
<!-- 厨房电器 -->
<div class="title" style="margin-top: 30px;">
<span style="font-size: 22px;">厨房电器</span>
<span style=" font-size: 16px;
float: right;"> <a href=""
style="margin-right: 20px;color: #fe7b43;border-bottom: #fe7b43 3px solid;">净水器</a>
<a href="" style="margin-right: 20px;">烟灶</a>
<a href="" style="margin-right: 20px;">电饭煲</a>
<a href="">微蒸烤</a>
</span>
</div>
<div class="shouji">
<div class="shouji-img" style=" background-image: none;">
<div class="top" style="background-image: url(img/img8.webp);"></div>
<div class="btm" style="background-image: url(img/img9.webp);"></div>
</div>
<div class="shouji-con">
<div class="con"><a href=""><img src="img/chufang1.webp" alt="">
<h3>米家净水器1600G</h3>
<p class="text1">2.1秒—杯水，还原自来水的浸湃流速</p>
<p style="margin-top: 16px;"><span class="text2">3999元</span>
<span class="text3">4599元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/chufang2.webp" alt="">
<h3>小米双核净水器1200G</h3>
<p class="text1">3.2L/min大流量，鲜活首杯水</p>
<p style="margin-top: 16px;"><span class="text2">3099元</span>
<span class="text3">3499元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/chufang3.webp" alt="">
<h3>小米即热净水器Q600</h3>
<p class="text1">净热—体，1秒速热，精选调温每1℃</p>
<p style="margin-top: 16px;"><span class="text2">2499元</span>
<span class="text3">3499元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/chufang4.webp" alt="">
<h3>小米净水器H600G</h3>
<p class="text1">纯净生活双出水，六级过滤健康直饮</p>
<p style="margin-top: 16px;"><span class="text2">1299元</span>
<span class="text3">1499元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/chufang5.webp" alt="">
<h3>米家净水器1000G</h3>
<p class="text1">澎拜大水星，5年免换RO滤芯</p>
<p style="margin-top: 16px;"><span class="text2">2099元</span>
<span class="text3">2499元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/chufang6.webp" alt="">
<h3>小米双核净水器1200G</h3>
<p class="text1">3.2L/min大流量，鲜活首杯水</p>
<p style="margin-top: 16px;"><span class="text2">3099元</span>
<span class="text3">3499元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/chufang7.webp" alt="">
<h3>小米净水器H800G Pro</h3>
<p class="text1">长效过滤，鲜活好水随心出</p>
<p style="margin-top: 16px;"><span class="text2">1799元</span>
<span class="text3">1999元</span>
</p>
</a></div>
<div class="con">
<div class="box">
<div style="float:left;width: 50%;">
<p style="font-size: 14px;margin-top: 10px;">小米即热净水器Q800</p>
<p style="font-size: 12px;color:#ff6700;margin-top: 20px;">3499元</p>
</div>
<div style="float:right ;width: 50%; background-image: url(img/chufang8.webp);
background-repeat: no-repeat;
background-size: 80px 80px;"></div>
</div>
<div class="box" style="margin-top: 10px;">
<div style="float:left;width: 50%;">
<p style="font-size: 18px;margin-top: 10px;">浏览更多</p>
<p style="font-size: 12px;color:#706e6c;margin-top: 5px;">净水器</p>
</div>
<div style="float:right ;width: 50%; background-image: url(img/jt2.png);
background-repeat: no-repeat;
background-position: center top;
background-size: 48px 48px;"></div>
</div>
</div>
</div>
</div>
<!-- 智能家居 -->
<div class="title" style="margin-top: 30px;">
<span style="font-size: 22px;">智能家居</span>
<span style=" font-size: 16px;
float: right;"> <a href=""
style="margin-right: 20px;color: #fe7b43;border-bottom: #fe7b43 3px solid;">小爱音箱</a>
<a href="" style="margin-right: 20px;">门锁门铃</a>
<a href="" style="margin-right: 20px;">路由器</a>
<a href="">智能设备</a>
</span>
</div>
<div class="shouji">
<div class="shouji-img" style=" background-image: none;">
<div class="top" style="background-image: url(img/img10.webp);"></div>
<div class="btm" style="background-image: url(img/img11.webp);"></div>
</div>
<div class="shouji-con">
<div class="con"><a href=""><img src="img/zhineng1.webp" alt="">
<h3>Xiaomi智能家庭屏10</h3>
<p class="text1">MIUI Home | 10.1”高清大屏|115°超...</p>
<p style="margin-top: 16px;"><span class="text2">949元</span>
<span class="text3">999元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/zhineng2.webp" alt="">
<h3>小米小爰音箱Play增强版</h3>
<p class="text1">LED时钟显示,语音控制传统家电</p>
<p style="margin-top: 16px;"><span class="text2">129元</span>
<span class="text3">149元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/zhineng3.webp" alt="">
<h3>Xiaomi Sound</h3>
<p class="text1">HARMAN工程师专业调音，高保真震...</p>
<p style="margin-top: 16px;"><span class="text2">449元</span>
<span class="text3">549元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/zhineng4.webp" alt="">
<h3>小米小爱音箱Play</h3>
<p class="text1">听音乐、语音遥控家电</p>
<p style="margin-top: 16px;"><span class="text2">99元</span>
<span class="text3">109元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/zhineng5.webp" alt="">
<h3>小米小爱音箱Pro</h3>
<p class="text1">澎拜低音，语音遥控传统家电</p>
<p style="margin-top: 16px;"><span class="text2">299元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/zhineng6.webp" alt="">
<h3>小米Al音箱(第二代) </h3>
<p class="text1">低频饱满有深度，人声清晰有细节</p>
<p style="margin-top: 16px;"><span class="text2">199元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/zhineng7.webp" alt="">
<h3>小米小爱触屏音箱</h3>
<p class="text1">可视化智能家居，海量视听资源</p>
<p style="margin-top: 16px;"><span class="text2">249元</span>
<span class="text3">269元</span>
</p>
</a></div>
<div class="con">
<div class="box">
<div style="float:left;width: 50%;">
<p style="font-size: 14px;margin-top: 10px;">小米小爱音箱</p>
<p style="font-size: 12px;color:#ff6700;margin-top: 20px;">229元</p>
</div>
<div style="float:right ;width: 50%; background-image: url(img/zhineng8.webp);
background-repeat: no-repeat;
background-size: 80px 80px;"></div>
</div>
<div class="box" style="margin-top: 10px;">
<div style="float:left;width: 50%;">
<p style="font-size: 18px;margin-top: 10px;">浏览更多</p>
<p style="font-size: 12px;color:#706e6c;margin-top: 5px;">小爱音箱</p>
</div>
<div style="float:right ;width: 50%; background-image: url(img/jt2.png);
background-repeat: no-repeat;
background-position: center top;
background-size: 48px 48px;">
</div>
</div>
</div>
</div>
</div>
<!-- 运动出行 -->
<div class="title" style="margin-top: 30px;">
<span style="font-size: 22px;">运动出行</span>
<span style=" font-size: 16px;
float: right;"> <a href=""
style="margin-right: 20px;color: #fe7b43;border-bottom: #fe7b43 3px solid;">平衡车/滑板车</a>
<a href="" style="margin-right: 20px;">运动健身</a>
<a href="" style="margin-right: 20px;">箱包配饰</a>
<a href="">出行工具</a>
</span>
</div>
<div class="shouji">
<div class="shouji-img" style=" background-image: none;">
<div class="top" style="background-image: url(img/img12.webp);"></div>
<div class="btm" style="background-image: url(img/img13.webp);"></div>
</div>
<div class="shouji-con">
<div class="con"><a href=""><img src="img/yundong1.jpg" alt="">
<h3>九号平衡车</h3>
<p class="text1">年轻人的酷玩具</p>
<p style="margin-top: 16px;"><span class="text2">1999元</span>
<span class="text3">2199元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/yundong2.webp" alt="">
<h3>九号平衡车燃动版</h3>
<p class="text1">燃动升级，随走随停</p>
<p style="margin-top: 16px;"><span class="text2">2399元</span>
<span class="text3">2599元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/yundong3.png" alt="">
<h3>九号平衡车Plus</h3>
<p class="text1">—个形影不离的新伙伴</p>
<p style="margin-top: 16px;"><span class="text2">3299元</span>
<span class="text3">3499元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/yundong4.webp" alt="">
<h3>米家电动滑板车1S</h3>
<p class="text1">型出格,行出色</p>
<p style="margin-top: 16px;"><span class="text2">1999元</span>
<span class="text3">2199元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/yundong5.webp" alt="">
<h3>小米米家电动滑板车Pro</h3>
<p class="text1">性能提升，动力更强劲</p>
<p style="margin-top: 16px;"><span class="text2">2799元</span>
<span class="text3">3099元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/yundong6.webp" alt="">
<h3>九号卡丁车Pro兰博基尼汽车定... </h3>
<p class="text1">九号卡丁车Pro兰博基尼汽车定制版</p>
<p style="margin-top: 16px;"><span class="text2">9999元</span>
</p>
</a></div>
<div class="con"><a href=""><img src="img/yundong7.webp" alt="">
<h3>九号平衡车改装套件（不含平衡...</h3>
<p class="text1">小朋友的大玩具，老顽童的小赛车</p>
<p style="margin-top: 16px;"><span class="text2">2999元</span>
</p>
</a></div>
<div class="con">
<div class="box">
<div style="float:left;width: 50%;">
<p style="font-size: 14px;margin-top: 10px;">米家电动滑板车3青春版</p>
<p style="font-size: 12px;color:#ff6700;margin-top: 20px;">1699元</p>
</div>
<div style="float:right ;width: 50%; background-image: url(img/yundong8.webp);
background-repeat: no-repeat;
background-size: 80px 80px;"></div>
</div>
<div class="box" style="margin-top: 10px;">
<div style="float:left;width: 50%;">
<p style="font-size: 18px;margin-top: 10px;">浏览更多</p>
<p style="font-size: 12px;color:#706e6c;margin-top: 5px;">平衡车/滑板车</p>
</div>
<div style="float:right ;width: 50%; background-image: url(img/jt2.png);
background-repeat: no-repeat;
background-position: center top;
background-size: 48px 48px;">
</div>
</div>
</div>
</div>
</div>
<!-- --- -->
<div>
<img src="img/img14.webp" alt="" style="width: 100%; height: 120px; margin: 20px 0px;">
</div>
</div>
<div class="bottom">
<div class="btm1">
<table>
<tr>
<td>
<div> <img src="img/btm1.png" alt=""><a href=""><span>预约维修服务</span></a> </div>
</td>
<td>
<div><img src="img/btm2.png" alt=""> <a href=""><span>7天无理由退货</span></div></a>
</td>
<td>
<div><img src="img/btm3.png" alt=""><a href=""><span>15天免费换货</span></div></a>
</td>
<td>
<div><img src="img/btm4.png" alt=""><a href=""><span>满69元包邮</span></div></a>
</td>
<td>
<div><img src="img/btm5.png" alt=""><a href=""><span
style=" border-right: none">1100余家售后网点</span></a></div>
</td>
</tr>
</table>
</div>
<div class="btm2">
<table>
<tr>
<th>选购指南</th>
<th>服务中心</th>
<th>线下门店</th>
<th>关于小米</th>
<th>关注我们</th>
</tr>
<tr>
<td>手机</td>
<td>申请售后</td>
<td>小米之家</td>
<td>了解小米</td>
<td>新浪微博</td>
</tr>
<tr>
<td>电视</td>
<td>售后政策</td>
<td>服务网点</td>
<td>加入小米</td>
<td>官方微信</td>
</tr>
<tr>
<td>笔记本</td>
<td>维修服务价格/td>
<td>授权体验店/专区</td>
<td>投资者关系</td>
<td>联系我们</td>
</tr>
<tr>
<td>平板</td>
<td>订单查询</td>
<td></td>
<td>可持续发展</td>
<td>公益基金</td>
</tr>
<tr>
<td>穿戴</td>
<td>以旧换新</td>
<td></td>
<td>廉洁举报</td>
</tr>
<tr>
<td>耳机</td>
<td>保障服务</td>
</tr>
<tr>
<td>家电</td>
<td>防伪查询</td>
</tr>
<tr>
<td>路由器</td>
<td>F码通道</td>
</tr>
<tr>
<td>音响</td>
</tr>
<tr>
<td>配件</td>
</tr>
</table>
</div>
</div>
</body>
</html>css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #f5f5f5;
}
a {
text-decoration: none;
color: #000;
}
ul {
list-style: none;
}
.label {
width: 100%;
height: 40px;
font-size: 12px;
text-align: center;
line-height: 40px;
color: #98a7a0;
background-color: #333333;
}
.label span {
padding: 0px 5px;
border-right: #565857 solid 1px;
/* 小手 */
cursor: pointer;
}
.label .go::before {
content: url("img/go.png");
display: inline-block;
background-repeat: no-repeat;
background-size: 3px 3px;
margin-top: 5px;
margin-right: 5px;
}
.head {
width: 100%;
height: 100px;
text-align: center;
line-height: 100px;
background-color: #fff;
}
.head::after {
/* 清除浮动 */
content: "";
display: table;
clear: both;
}
.left img {
width: 56px;
height: 56px;
float: left;
margin-left: 7%;
margin-top: 20px;
}
.right {
float: right;
margin-right: 7%;
}
.right input {
width: 180px;
height: 48px;
padding: 0 10px;
border: 1px solid #f5f5f5;
}
.right .div-bg {
width: 50px;
height: 50px;
float: right;
/* background-color: aquamarine; */
margin-top: 26px;
border: 1px solid #f5f5f5;
}
.right img {
width: 25px;
height: 25px;
margin-bottom: 20px;
}
.head ul {
margin-left: 308px;
}
.head li {
color: #333;
margin: 0 4px;
float: left;
padding: 0 10px;
}
/* 轮播图 */
.lunbotu {
margin-top: -5px;
position: relative;
}
.lunbotu .r {
position: absolute;
top: 195px;
left: 0;
width: 40px;
height: 70px;
text-align: center;
line-height: 80px;
border-radius: 30px 0px 0px 30px;
/* 顺序依次为左上、右上、右下、左下角 */
}
.lunbotu .l {
position: absolute;
top: 195px;
right: 0;
width: 40px;
height: 70px;
text-align: center;
line-height: 80px;
border-radius: 0px 30px 30px 0px;
/* 顺序依次为左上、右上、右下、左下角 */
}
.lunbotu .c {
width: 100%;
height: 100%;
background-image: url(img/bj2.jpeg);
background-size: 811px 460px;
}
.l:hover,
.r:hover {
background-color: #707173;
}
.lunbotu img {
width: 25px;
height: 25px;
}
.fixed {
width: 70px;
height: 460px;
background-color: #fff;
position: fixed;
top: 25%;
/* 指定距离顶部的位置 */
right: 0px;
/* 指定距离右侧的位置 */
}
.fixed img {
width: 30px;
height: 30px;
margin: 20px 0px;
}
.fixed div {
font-size: 14px;
color: #999999;
width: 100%;
height: 25%;
text-align: center;
line-height: 20%;
}
.body {
width: 86%;
margin: 0 auto;
/* background-color: aqua; */
}
.list-content-div .list-content {
width: 18%;
height: 460px;
float: left;
background-color: #877b71;
}
.list-content ul {
padding-top: 22px;
}
.list-content li {
height: 42px;
padding-left: 30px;
line-height: 42px;
color: #fff;
}
.list-content li::after {
content: url("img/jt.png");
display: inline-block;
background-size: 3px 3px;
float: right;
margin-right: 30px;
}
.list-content li:hover {
background-color: #ff6700;
}
.list-content-div .lunbotu {
width: 82%;
height: 460px;
float: left;
background-color: rgb(200, 255, 127);
}
.list-content-div::after {
/* 清除浮动 */
content: "";
display: table;
clear: both;
}
.shouhou {
width: 100%;
height: 190px;
margin-top: 10px;
background-color: rgb(253, 253, 253);
display: flex;
}
.shouhou-con {
height: 158px;
flex: 1;
display: flex;
flex-wrap: wrap;
margin-right: 10px;
font-size: 12px;
background-color: #5f5750;
color: #fff;
}
.shouhou-con img {
width: 24px;
height: 24px;
margin-top: 18px;
}
.shouhou-con .con1 {
width: 33%;
height: 50%;
text-align: center;
border-bottom: #929292 solid 1px;
}
.shouhou-con .con2 {
width: 32%;
height: 50%;
text-align: center;
border: #929292 solid 1px;
border-top: none;
}
.shouhou-con .con3 {
width: 33%;
height: 50%;
text-align: center;
border-bottom: #929292 solid 1px;
}
.shouhou-con .con4 {
width: 33%;
height: 50%;
text-align: center;
}
.shouhou-con .con5 {
width: 32%;
height: 50%;
text-align: center;
border-left: #929292 solid 1px;
border-right: #929292 solid 1px;
}
.shouhou-con .con6 {
width: 33%;
height: 50%;
text-align: center;
}
.shouhou .img1 {
flex: 1;
background-image: url(img/shouhou1.jpg);
background-size: contain;
background-repeat: no-repeat;
}
.shouhou .img2 {
flex: 1;
background-image: url(img/shouhou2.jpg);
background-size: contain;
background-repeat: no-repeat;
margin: 0 10px;
}
.shouhou .img3 {
flex: 1;
background-image: url(img/shouhou3.jpg);
background-size: contain;
background-repeat: no-repeat;
}
.title {
height: 58px;
/* background-color: bisque; */
line-height: 58px;
color: #464444;
}
.title .more {
font-size: 16px;
float: right;
}
.title .more::after {
content: url("img/more.png");
display: inline-block;
background-size: 3px 3px;
margin-top: 7px;
margin-left: 10px;
float: right;
}
.title::after {
/* 清除浮动 */
content: "";
display: table;
clear: both;
}
.shouji {
height: 614px;
}
.shouji .shouji-img {
width: 18%;
height: 614px;
background-image: url(img/img1.webp);
background-repeat: no-repeat;
background-size: contain;
/* margin-top: 9px; */
background-color: #f7f6f9;
float: left;
}
.shouji .shouji-con {
width: 81%;
height: 614px;
margin-left: 10px;
/* background-color: #684222; */
float: left;
}
.shouji div {
width: 25%;
height: 300px;
float: left;
/* background-color: #ffffff; */
}
.shouji .con:nth-child(1),
.con:nth-child(2),
.con:nth-child(3),
.con:nth-child(5),
.con:nth-child(6),
.con:nth-child(7) {
padding-right: 10px;
}
.shouji .con:nth-child(1),
.con:nth-child(2),
.con:nth-child(3),
.con:nth-child(4) {
margin-bottom: 10px;
}
.shouji a {
float: left;
width: 100%;
height: 100%;
background-color: #ffffff;
padding: 20px 0px;
text-align: center;
}
.shouji-con img {
width: 160px;
height: 160px;
}
.shouji .con h3 {
font-size: 12.63px;
font-weight: 400;
margin-top: 10px;
}
.shouji .con .text1 {
font-size: 2.16px;
margin-top: 5px;
color: #b0b0b0;
}
.shouji .con .text2 {
font-size: 2.91px;
color: #ff822d;
}
.shouji .con .text3 {
font-size: 2.16px;
color: #b0b0b0;
text-decoration: line-through;
}
.shouji::after {
/* 清除浮动 */
content: "";
display: table;
clear: both;
}
.con .box {
width: 100%;
height: 143px;
padding: 30px;
padding-right: 0px;
/* border-bottom: #000 1px solid; */
background-color: #fff;
}
.shouji-img .top {
width: 100%;
height: 300xp;
margin-bottom: 10px;
background-image: url(img/img4.webp);
background-repeat: no-repeat;
background-size: 234px 300px;
/* border-bottom: #000 1px solid; */
/* background-color: #f5f5f5; */
}
.shouji-img .btm {
width: 100%;
height: 300xp;
background-image: url(img/img5.webp);
background-repeat: no-repeat;
background-size: 234px 300px;
/* background-color: #f5f5f5; */
/* border-top: #000 1px solid; */
}
.bottom {
width: 100%;
height: 500px;
background-color: #fff;
}
.bottom .btm1 {
width: 82%;
height: 80px;
/* background-color: #929292; */
display: flex;
margin: 0 auto;
}
.bottom .btm1 div {
flex: 1;
text-align: center;
line-height: 80px;
}
.bottom .btm1 img {
width: 20px;
height: 20px;
margin-right: 10px;
}
.bottom .btm1 div span {
font-size: 16px;
padding-right: 60px;
border-right: #000 solid 1px;
}
.bottom .btm2 {
width: 82%;
height: 400px;
/* background-color: #b0b0b0; */
margin: 0 auto;
}
table {
width: 100%;
text-align: center;
}
th {
font-size: 14px;
font-weight: 400;
padding-bottom: 30px;
}
td {
font-size: 12px;
padding-bottom: 20px;
/* padding-left: 60px; */
}
2129
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
