小米商城html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@import url(./作业8style.css);
</style>
</head>
<body>
<div class="container">
<div class="site-topbar">
<div>小米官网</div>
<div>小米商城</div>
<div>小米澎湃OS</div>
<div>小米汽车</div>
<div>云服务</div>
<div>loT</div>
<div>有品</div>
<div>小爱开放平台</div>
<div>资质证照</div>
<div>协议规则</div>
<div>下载app</div>
<div>Select Location</div>
<div>(0)</div>
<div><a href="file:///D:/code/C/%E5%89%8D%E7%AB%AF/01_html/%E4%BD%9C%E4%B8%9A/%E4%BD%9C%E4%B8%9A8(%E8%B4%AD%E7%89%A9%E8%BD%A6%EF%BC%89.html"><div><img src="./购物车.png" alt="" width="20px" height="20px">购物车</div></a></div>
<div>消息通知</div>
<div>注册</div>
<div><a href="file:///D:/code/C/%E5%89%8D%E7%AB%AF/01_html/%E4%BD%9C%E4%B8%9A/%E4%BD%9C%E4%B8%9A8(%E7%99%BB%E5%BD%95%E6%B3%A8%E5%86%8C%E9%A1%B5%EF%BC%89.html">登录</a></div>
</div>
</div>
<div class="site-header">
<div class="site-header-container">
<img src="./icon-小米归属.png" alt="" width="56px" height="56px">
<ul class="blank">
<li></li>
<li>Xiaomi手机</li>
<li>Redmi手机</li>
<li>电视</li>
<li>笔记本</li>
<li>平板</li>
<li>家电</li>
<li>路由器</li>
<li>服务中心</li>
<li>社区</li>
</ul>
<input type="text" id="research" placeholder="充电宝">
<button type="button" id="site-header-container-button"><img src="./搜索.png" alt="" width="45px" height="45px"></button>
</div>
</div>
<div class="home-hero">
<div class="home-hero-img">
<ul class="home-hero-nav">
<li>手机<img src="./箭头_列表向右.png" alt="">
<ul class="home-hero-hover1">
<li><img src="./QQ截图20240606130217.png" alt="">xiaomi</li>
<li><img src="./QQ截图20240606130337.png" alt="">Redmi</li>
<li><img src="./QQ截图20240606130357.png" alt="">xiaomipad</li>
<!-- 注意要把悬浮的单独与要点击的放在一个div里头 -->
</ul>
</li>
<li>电视<img src="./箭头_列表向右.png" alt=""></li>
<li>家电<img src="./箭头_列表向右.png" alt=""></li>
<li>笔记本 平板<img src="./箭头_列表向右.png" alt=""></li>
<li>出行 穿戴<img src="./箭头_列表向右.png" alt=""></li>
<li>耳机 音箱<img src="./箭头_列表向右.png" alt=""></li>
<li>健康 儿童<img src="./箭头_列表向右.png" alt=""></li>
<li>生活 箱包<img src="./箭头_列表向右.png" alt=""></li>
<li>智能 路由器<img src="./箭头_列表向右.png" alt=""></li>
<li>电源 配件<img src="./箭头_列表向右.png" alt=""></li>
</ul>
</ul>
<div><img src="./QQ截图20240606130739.png" alt="" width="990px" height="460px"></div>
</div>
<div class="home-hero-grid">
<div class="home-hero-grid1">
<div><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="">
<p>报障服务</p>
</div>
<div>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48" alt="">
<p>企业团队</p>
</div>
<div>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eded6fa3b897a058163e2485532c4f10.png?w=48&h=48" alt="">
<p>F码通道</p>
</div>
<div>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/43a3195efa6a3cc7662efed8e7abe8bf.png?w=48&h=48" alt="">
<p>米粉卡</p>
</div>
<div>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4846bca6010a0deb9f85464409862af.png?w=48&h=48" alt="">
<p>以旧换新</p>
</div>
<div>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a76d7636b08e0988efb4fc384ae497b.png?w=48&h=48" alt="">
<p>话费充值</p>
</div>
</div>
</div>
<div class="home-hero-grid2">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6b67117bc92924fb2ff0e7ad2be86084.png?w=632&h=340" alt="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8dede2520f8dfff9c9b690af498cafe8.jpg?w=632&h=340" alt="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1ac77590368ff636d0b4f6a988133f55.png?w=632&h=340" alt="">
</div>
<div class="main-page">
<div class="main-page-container">
<div class="main-page-container-img"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a2011078db9b3708d3caae52df7be3cc.png?thumb=1&w=1839&h=180&f=webp&q=90" alt="" width="1226px" height="120px"></div>
<div class="box-hd">
<h2>手机</h2>
<div class="more">查看更多</div>
</div>
<div class="row">
<div class="col">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/dcf9ed8c01a7c3d0bf3ecbca3f22537c.png?thumb=1&w=351&h=921&f=webp&q=90" alt="" width="234px" height="614px">
</div>
<div>
<ul class="brick-list-clearfix">
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/adde6bae41441887017824f46cf31602.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>Redmi Turbo 3</h3>
<p class="p1"> 性能旋风，席卷而来</p>
<p class="p2">
<span>1899元起</span>
<del><span>1999</span>元</del>
</p>
</li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202403201526_60b548a0614d956b2d3667a63d513539.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>Xiaomi Civi 4 Pro</h3>
<p class="p1">徕卡光学Summilux镜头 | 5000万徕卡人像镜头</p>
<p class="p2">
<span>2999元起</span>
</p>
</li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f2a277341a09a63bbb7bba12d154c4e6.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
Xiaomi 14 Ultra
</h3>
<p class="p1">徕卡全明星四摄 | 双向卫星通信 | 小米澎湃OS</p>
<p class="p2">
<span>6499元起</span>
</p>
</li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2e920ac7e3d197923acbd6388b80cc49.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
Redmi K70 Pro
</h3>
<p class="p1">第三代骁龙8 年度旗舰平台</p>
<p class="p2">
<span>6499元起</span>
<del>3299元</del>
</p>
</li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202311281411_fc68b941c011a8bbf67db570d0985d7a.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
Redmi K70
</h3>
<p class="p1">第二代骁龙8 旗舰芯</p>
<p class="p2">
<span>2199元起</span>
<del>2499元</del>
</p>
</li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202311281019_bf131f8cb94d59e370cb84cae6ad5e49.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
Redmi K70E
</h3>
<p class="p1">新一代旗舰焊门员</p>
<p class="p2">
<span>1799元起</span>
</p>
</li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202310251937_a4ac1ae382a402426beb915f401e50e5.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
Xiaomi 14 Pro
</h3>
<p class="p1">徕卡Summilux可变光圈镜头｜小米澎湃OS</p>
<p class="p2">
<span>4599元起</span>
</p>
</li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202310251937_a4ac1ae382a402426beb915f401e50e5.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
Xiaomi 14
</h3>
<p class="p1">徕卡光学Summilux镜头｜小米澎湃OS｜第三代骁龙®8移动平台</p>
<p class="p2">
<span>3899元起</span>
</p>
</li>
</ul>
</div>
</div>
<div class="box-hd">
<h2>智能穿戴</h2>
<div class="more">耳机 穿戴</div>
</div>
<div class="row">
<div class="col"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d06749930da27e8e8248cc69fced088f.png?thumb=1&w=351&h=921&f=webp&q=90" alt="" width="234px" height="614px"></div>
<ul class="brick-list-clearfix">
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0ed30ba825d2c0a27f9c9867c6376e02.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
Redmi Buds 6S
</h3>
<p class="p1">14.2mm超大动圈单元 | 半入耳主动降噪 | 33小时超长续航</p>
<p class="p2"><span>199元起</span></p>
</li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202405161349_af5d2bb2e50bf45ff23d766e49da6cc5.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
Redmi Buds 6 活力版
</h3>
<p class="p1">14.2mm超大动圈 | 内置五种调音模式 | 30小时长续航</p>
<p class="p2"><span>99元起</span></p>
</li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202404091941_350d7e8fb99f243754861b986168c187.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
Xiaomi 开放式耳机
</h3>
<p class="p1">舒适稳固佩戴｜超线性发声单元｜独立防漏音系统</p>
<p class="p2"><span>649元起</span>
<del>699元</del>
</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202311292123_5f019eb3ce2987e60596f7a54630e44c.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
Redmi Buds 5 Pro
</h3>
<p class="p1">同轴双单元 旗舰音质 | 52dB/4kHz 旗舰降噪 | 49ms 超低延迟</p>
<p class="p2"><span>379元起</span>
<del>399元</del>
</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202309211159_17fe0c43d4e970c047f2a69b73e15459.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
Redmi Buds 5
</h3>
<p class="p1">46dB深度降噪丨12.4mm镀钛动圈丨40小时超长续航</p>
<p class="p2"><span>179元起</span>
<del>199元</del>
</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202208111200_c1016839eae2c1f5bb79d5afde498e81.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
Xiaomi Buds 4 Pro
</h3>
<p class="p1">48dB智能动态降噪｜骨声纹通话降噪 | 独立空间音频</p>
<p class="p2"><span>799元起</span>
<del>1099元</del>
</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202205241526_03b4bf93894a1297a7f1c74d46446fac.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
Redmi Buds 4 Pro
</h3>
<p class="p1">43dB 宽频降噪 | HiFi 高保真音质 | 59ms 游戏低延迟</p>
<p class="p2"><span>289元起</span>
<del>399元</del>
</p>
</li>
<li class="brick-list-clearfix1">
<div class="div1">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202306102210_23dba6609bd84ca6a776ee4fb49fbb04.png?thumb=1&w=150&h=150&f=webp&q=90" alt="" width="80px" height="80px">
<h3>
Redmi Buds 4活力版
</h3>
<p class="p2">89元起</p>
</div>
<div class="div2">
<div class="span1">浏览更多 </div>
<div class="span2">耳机</div>
<img src="./右指示箭头.png" alt="" width="30px" height="30px">
</div>
</li>
</ul>
</div>
<div class="box-hd">
<h2>笔记本|平板</h2>
<div class="more">热门</div>
</div>
<div class="row">
<div class="col"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/bd88fa683214713a6acb1afcf738b89c.png?thumb=1&w=351&h=921&f=webp&q=90" alt="" width="234px" height="614px"></div>
<div>
<ul class="brick-list-clearfix">
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5daddaa651568673e87eaf7c15ebd1cb.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
Redmi Pad Pro系列
</h3>
<p class="p1">12.1英寸2.5K旗舰机大屏 | 10000mAh超大电池</p>
<p class="p2"><span>1499元起</span></p>
</li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202402221350_8181b68062669419dcb35b42972021e3.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
Xiaomi Pad 6S Pro 12.4
</h3>
<p class="p1">第二代骁龙8 旗舰处理器 | 小米澎湃OS</p>
<p class="p2"><span>2799元起</span></p>
</li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202402211712_15046d7abe233750b635d0ff3a53ae02.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
Redmi Book Pro 14 2024
</h3>
<p class="p1">65W 满血性能｜全新酷睿 Ultra 处理器</p>
<p class="p2"><span>4799元起</span>
<del>5299元</del>
</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202402211658_f8e48c3ab022eede514cc6ef6412a48b.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
Redmi Book Pro 16 2024
</h3>
<p class="p1">70W 狂暴性能｜3.1K 165Hz 高刷高亮屏</p>
<p class="p2"><span>6399元起</span>
<!-- <del>399元</del> -->
</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202311281956_f87f4c37af45c2261e944f57d29e4a03.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
Redmi Book 16 2024
</h3>
<p class="p1">47W 满血性能 | 小米澎湃智联 | 旗舰硬核品质</p>
<p class="p2"><span>3699元起</span>
<!-- <del>199元</del> -->
</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202311281948_e41396e545d3ba8da294444a47abb590.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
Redmi Book 14 2024
</h3>
<p class="p1">47W 满血性能 | 小米澎湃智联 | 旗舰硬核品质</p>
<p class="p2"><span>4499元起</span>
<!-- <del>1099元</del> -->
</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202309191420_60b81344a77b3104319e8a9f199ed0fd.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
Redmi Pad SE
</h3>
<p class="p1">高性价比千元平板｜11英寸高刷护眼大屏｜全金属一体机身｜73.2天超长待机</p>
<p class="p2"><span>849元起</span>
<del>999元</del>
</p>
</li>
<li class="brick-list-clearfix1">
<div class="div1">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202309151909_5d9c4624dd45a4f37d516954b0250e56.png?thumb=1&w=150&h=150&f=webp&q=90" alt="" width="80px" height="80px">
<h3>
Xiaomi Pad 6 Max 14
</h3>
<p class="p2">3499元起</p>
</div>
<div class="div2">
<div class="span1">浏览更多 </div>
<div class="span2">耳机</div>
<img src="./右指示箭头.png" alt="" width="30px" height="30px">
</div>
</li>
</ul>
</div>
</div>
<div class="box-hd">
<h2>家电</h2>
<div class="more">热门 电视影音 空调</div>
</div>
<div class="row">
<ul class="brick-promo-list-clearfix">
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/644966333bed3ed0323ae3f7086baa72.jpg?thumb=1&w=351&h=450&f=webp&q=90" alt=""></li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/23ea3bb9378ff3a7fc65b57731730576.jpg?thumb=1&w=351&h=450&f=webp&q=90" alt=""></li>
</ul>
<ul class="brick-list-clearfix">
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c95135c31082640c8f42f9a61966b635.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
小米电视S系列
</h3>
<p class="p1">144HZ超高刷 3+32G 多色温色彩还原技术</p>
<p class="p2"><span>2599元起</span></p>
</li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202402221350_8181b68062669419dcb35b42972021e3.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
Xiaomi Pad 6S Pro 12.4
</h3>
<p class="p1">第二代骁龙8 旗舰处理器 | 小米澎湃OS</p>
<p class="p2"><span>2799元起</span></p>
</li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/086a234cdcc9234c236b1b744ab2df68.jpg?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
小米电视S Pro Mini LED系列
</h3>
<p class="p1">144Hz超高刷、4+64G大存储</p>
<p class="p2"><span>4999元起</span>
<!-- <del>5299元</del> -->
</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202403131610_4c436d462d84b5109080ccf6b632844c.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
小米电视 S Mini LED 系列
</h3>
<p class="p1">Mini LED 高分区背光、1200nits峰值亮度</p>
<p class="p2"><span>2999元起</span>
<!-- <del>399元</del> -->
</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202310081508_18b8d7deaaca3515a957de09c1e18703.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
米家新风空调 1.5匹新1级能效 2023
</h3>
<p class="p1">打造室内天然氧吧|4重深度净化</p>
<p class="p2"><span>2499元起</span>
<del>2999元</del>
</p>
</li>
<li>
<img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1605536123.55818348.jpg?thumb=1&w=300&h=300" alt="">
<h3>
巨省电 小米空调 立式3匹新1级能效
</h3>
<p class="p1">高效节能 | 立体送风 | 智能互联</p>
<p class="p2"><span>4599元起</span>
<del>5299元</del>
</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a7263d580ca820db7e8de56a42641ca.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
米家新风空调 立式3匹新1级能效
</h3>
<p class="p1">全屋快通风，就要大新风</p>
<p class="p2"><span>6399元起</span>
<del>7299元</del>
</p>
</li>
<li class="brick-list-clearfix1">
<div class="div1">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202309261016_5420d0a9f0e651054aef1352b4b3b10a.png?thumb=1&w=300&h=300&f=webp&q=90" alt="" width="80px" height="80px">
<h3>
米家中央空调风管机 3匹
</h3>
<p class="p2">5799元起</p>
</div>
<div class="div2">
<div class="span1">浏览更多 </div>
<div class="span2">耳机</div>
<img src="./右指示箭头.png" alt="" width="30px" height="30px">
</div>
</li>
</ul>
</div>
<div class="box-hd">
<h2>智能家居</h2>
<div class="more">小爱音箱 门锁门铃 路由器 智能设备</div>
</div>
<div class="row">
<ul class="brick-promo-list-clearfix">
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ec383d223d9f38f442268df684c526f6.png?thumb=1&w=351&h=450&f=webp&q=90" alt=""></li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/bb9761c5b49e21b4d5aa03e7ddaf1a09.png?thumb=1&w=351&h=450&f=webp&q=90" alt=""></li>
</ul>
<ul class="brick-list-clearfix">
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c95135c31082640c8f42f9a61966b635.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
小米电视S系列
</h3>
<p class="p1">144HZ超高刷 3+32G 多色温色彩还原技术</p>
<p class="p2"><span>2599元起</span></p>
</li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202402221350_8181b68062669419dcb35b42972021e3.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
Xiaomi Pad 6S Pro 12.4
</h3>
<p class="p1">第二代骁龙8 旗舰处理器 | 小米澎湃OS</p>
<p class="p2"><span>2799元起</span></p>
</li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/086a234cdcc9234c236b1b744ab2df68.jpg?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
小米电视S Pro Mini LED系列
</h3>
<p class="p1">144Hz超高刷、4+64G大存储</p>
<p class="p2"><span>4999元起</span>
<!-- <del>5299元</del> -->
</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202403131610_4c436d462d84b5109080ccf6b632844c.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
小米电视 S Mini LED 系列
</h3>
<p class="p1">Mini LED 高分区背光、1200nits峰值亮度</p>
<p class="p2"><span>2999元起</span>
<!-- <del>399元</del> -->
</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202310081508_18b8d7deaaca3515a957de09c1e18703.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
米家新风空调 1.5匹新1级能效 2023
</h3>
<p class="p1">打造室内天然氧吧|4重深度净化</p>
<p class="p2"><span>2499元起</span>
<del>2999元</del>
</p>
</li>
<li>
<img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1605536123.55818348.jpg?thumb=1&w=300&h=300" alt="">
<h3>
巨省电 小米空调 立式3匹新1级能效
</h3>
<p class="p1">高效节能 | 立体送风 | 智能互联</p>
<p class="p2"><span>4599元起</span>
<del>5299元</del>
</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a7263d580ca820db7e8de56a42641ca.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
米家新风空调 立式3匹新1级能效
</h3>
<p class="p1">全屋快通风，就要大新风</p>
<p class="p2"><span>6399元起</span>
<del>7299元</del>
</p>
</li>
<li class="brick-list-clearfix1">
<div class="div1">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/49f30069c778b494257320d9da5a1a60.jpg?thumb=1&w=150&h=150&f=webp&q=90" alt="" width="80px" height="80px">
<h3>
Redmi小爱触屏音箱
</h3>
<p class="p2">5799元起</p>
</div>
<div class="div2">
<div class="span1">浏览更多 </div>
<div class="span2">小爱音箱</div>
<img src="./右指示箭头.png" alt="" width="30px" height="30px">
</div>
</li>
</ul>
</div>
<div class="box-hd">
<h2>厨房电器</h2>
<div class="more">查看更多</div>
</div>
<div class="row">
<ul class="brick-promo-list-clearfix">
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ec383d223d9f38f442268df684c526f6.png?thumb=1&w=351&h=450&f=webp&q=90" alt=""></li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/bb9761c5b49e21b4d5aa03e7ddaf1a09.png?thumb=1&w=351&h=450&f=webp&q=90" alt=""></li>
</ul>
<ul class="brick-list-clearfix">
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c95135c31082640c8f42f9a61966b635.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
小米电视S系列
</h3>
<p class="p1">144HZ超高刷 3+32G 多色温色彩还原技术</p>
<p class="p2"><span>2599元起</span></p>
</li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202402221350_8181b68062669419dcb35b42972021e3.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
Xiaomi Pad 6S Pro 12.4
</h3>
<p class="p1">第二代骁龙8 旗舰处理器 | 小米澎湃OS</p>
<p class="p2"><span>2799元起</span></p>
</li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/086a234cdcc9234c236b1b744ab2df68.jpg?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
小米电视S Pro Mini LED系列
</h3>
<p class="p1">144Hz超高刷、4+64G大存储</p>
<p class="p2"><span>4999元起</span>
<!-- <del>5299元</del> -->
</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202403131610_4c436d462d84b5109080ccf6b632844c.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
小米电视 S Mini LED 系列
</h3>
<p class="p1">Mini LED 高分区背光、1200nits峰值亮度</p>
<p class="p2"><span>2999元起</span>
<!-- <del>399元</del> -->
</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202310081508_18b8d7deaaca3515a957de09c1e18703.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
米家新风空调 1.5匹新1级能效 2023
</h3>
<p class="p1">打造室内天然氧吧|4重深度净化</p>
<p class="p2"><span>2499元起</span>
<del>2999元</del>
</p>
</li>
<li>
<img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1605536123.55818348.jpg?thumb=1&w=300&h=300" alt="">
<h3>
巨省电 小米空调 立式3匹新1级能效
</h3>
<p class="p1">高效节能 | 立体送风 | 智能互联</p>
<p class="p2"><span>4599元起</span>
<del>5299元</del>
</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a7263d580ca820db7e8de56a42641ca.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
米家新风空调 立式3匹新1级能效
</h3>
<p class="p1">全屋快通风，就要大新风</p>
<p class="p2"><span>6399元起</span>
<del>7299元</del>
</p>
</li>
<li class="brick-list-clearfix1">
<div class="div1">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/49f30069c778b494257320d9da5a1a60.jpg?thumb=1&w=150&h=150&f=webp&q=90" alt="" width="80px" height="80px">
<h3>Redmi小爱触屏音箱 </h3>
<p class="p2">5799元起</p>
</div>
<div class="div2">
<div class="span1">浏览更多 </div>
<div class="span2">小爱音箱</div>
<img src="./右指示箭头.png" alt="" width="30px" height="30px">
</div>
</li>
</ul>
</div>
<div class="box-hd">
<h2>生活电器</h2>
<div class="more">查看更多</div>
</div>
<div class="row">
<ul class="brick-promo-list-clearfix">
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/644966333bed3ed0323ae3f7086baa72.jpg?thumb=1&w=351&h=450&f=webp&q=90" alt=""></li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/23ea3bb9378ff3a7fc65b57731730576.jpg?thumb=1&w=351&h=450&f=webp&q=90" alt=""></li>
</ul>
<ul class="brick-list-clearfix">
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c95135c31082640c8f42f9a61966b635.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
小米电视S系列
</h3>
<p class="p1">144HZ超高刷 3+32G 多色温色彩还原技术</p>
<p class="p2"><span>2599元起</span></p>
</li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202402221350_8181b68062669419dcb35b42972021e3.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
Xiaomi Pad 6S Pro 12.4
</h3>
<p class="p1">第二代骁龙8 旗舰处理器 | 小米澎湃OS</p>
<p class="p2"><span>2799元起</span></p>
</li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/086a234cdcc9234c236b1b744ab2df68.jpg?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
小米电视S Pro Mini LED系列
</h3>
<p class="p1">144Hz超高刷、4+64G大存储</p>
<p class="p2"><span>4999元起</span>
<!-- <del>5299元</del> -->
</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202403131610_4c436d462d84b5109080ccf6b632844c.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
小米电视 S Mini LED 系列
</h3>
<p class="p1">Mini LED 高分区背光、1200nits峰值亮度</p>
<p class="p2"><span>2999元起</span>
<!-- <del>399元</del> -->
</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202310081508_18b8d7deaaca3515a957de09c1e18703.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
米家新风空调 1.5匹新1级能效 2023
</h3>
<p class="p1">打造室内天然氧吧|4重深度净化</p>
<p class="p2"><span>2499元起</span>
<del>2999元</del>
</p>
</li>
<li>
<img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1605536123.55818348.jpg?thumb=1&w=300&h=300" alt="">
<h3>
巨省电 小米空调 立式3匹新1级能效
</h3>
<p class="p1">高效节能 | 立体送风 | 智能互联</p>
<p class="p2"><span>4599元起</span>
<del>5299元</del>
</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a7263d580ca820db7e8de56a42641ca.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<h3>
米家新风空调 立式3匹新1级能效
</h3>
<p class="p1">全屋快通风，就要大新风</p>
<p class="p2"><span>6399元起</span>
<del>7299元</del>
</p>
</li>
<li class="brick-list-clearfix1">
<div class="div1">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202309261016_5420d0a9f0e651054aef1352b4b3b10a.png?thumb=1&w=300&h=300&f=webp&q=90" alt="" width="80px" height="80px">
<h3>
米家中央空调风管机 3匹
</h3>
<p class="p2">5799元起</p>
</div>
<div class="div2">
<div class="span1">浏览更多 </div>
<div class="span2">耳机</div>
<img src="./右指示箭头.png" alt="" width="30px" height="30px">
</div>
</li>
</ul>
</div>
<div class="container-img">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/88e35cffc82cd98cd53172460067af17.jpg?thumb=1&w=1839&h=180&f=webp&q=90" alt="" width="1226px" height="120px">
</div>
</div>
<div class="site-footer">
<div class="footer-service">
<ul class="list-service-clearfix1">
<li><img src="./wxb工具.png" alt="" >预约维修服务</li>
<li><img src="./七天无理由退换.png" alt="">七天无理由退货</li>
<li><img src="./15天免费退换货.png" alt="">15天免费换货</li>
<li><img src="./包邮.png" alt="">满69包邮</li>
<li><img src="./网点.png" alt="">1100余家售后网点</li>
</ul>
</div>
<div class="footer-links-clearfix">
<li class="col-links-col-links-first"></li>
<ul class="col-links">
<li>选购指南</li>
<li>手机</li>
<li>电视</li>
<li>笔记本</li>
<li>平板</li>
<li>穿戴</li>
<li>耳机</li>
<li>家电</li>
<li>路由器</li>
<li>音箱</li>
<li>配件</li>
</ul>
<ul class="col-links">
<li>服务中心</li>
<li>申请政策</li>
<li>售后政策</li>
<li>维修服务价格</li>
<li>订单查询</li>
<li>以旧换新</li>
<li>保障服务</li>
<li>防伪查询</li>
<li>F码通道</li>
</ul>
<ul class="col-links">
<li>线下门店</li>
<li>小米之家</li>
<li>服务网点</li>
<li>授权体验店/专区</li>
</ul>
<ul class="col-links">
<li>关于小米</li>
<li>了解小米</li>
<li>加入小米</li>
<li>投资者关系</li>
<li>可持续发展</li>
<li>廉洁举报</li>
</ul>
<ul class="col-links">
<li>关于我们</li>
<li>新浪微博</li>
<li>官方微信</li>
<li>联系我们</li>
<li>公益基金会</li>
</ul>
<ul class="col-links">
<div class="col-contact">
<li>
<p class="phone-number">400-100-5678</p>
<p class="time">8:00-18:00 (仅收市话费)</p>
<div class="service"><img src="./人工客服.png" alt="" width="20px" height="20px">人工客服</div>
</li>
<li>
<p class="phone-number">400-180-8888</p>
<p class="time">8:00-18:00 (仅收市话费)</p>
<p class="time">适用于: MIX FOLD、巨屏电视系列</p>
<div class="service"><img src="./人工客服.png" alt="" width="20px" height="20px">人工客服</div>
</li>
</div>
</ul>
</div>
</div>
<div class="site-info">
<div class="info-container">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi.com-assets/shop/img/logo-mi2.png" alt="">
<div class="info-text">
<p>小米商城<span>|</span>小米澎湃OS<span>|</span>米家<span>|</span>米聊<span>|</span>多看<span>|</span>游戏<span>|</span>音乐<span>|</span>政企服务<span>|</span>小米天猫店<span>|</span>小米集团隐私政策<span>|</span>小米公司儿童信息保护规则<span>|</span>小米商城隐私政策<span>|</span>小米商城用户协议<span>|</span>问题反馈<span>|</span>Select Location</p>
<p>北京互联网法院法律服务工作站|中国消费者协会|北京市消费者协会</p>
<p>© mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2023]0169-004号（京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 </p>
<p>
营业执照 医疗器械质量公告增值电信业务经营许可证编号：京B2-20180851 网络食品经营备案
违法和不良信息举报电话：171-5104-4404
</p>
<p>京食药网食备202010048 食品经营许可证 新出发京批字第直220280号
知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
</div>
<div class="info-links">
<img src="https://s01.mifile.cn/i/v-logo-2.png" alt="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/icon3.png" alt="">
<img src="https://i8.mifile.cn/b2c-mimall-media/ba10428a4f9495ac310fd0b5e0cf8370.png" alt="">
<img src="https://cnbj1.fds.api.xiaomi.com/b2c-misite-activity/d447d642594f4f15ceb90f20ec20c240.png" alt="">
</div>
</div>
<div class="slogan-ir">
探索黑科技，小米为发烧而生
</div>
</div>
</div>
</body>
</html>小米商城css样式
*{
margin: 0px;
padding: 0px;
}
.container{
background-color: #333;
height: 40px;
}
.site-topbar{
width: 1226px;
height: 40px;
margin: auto;
background-color: #333;
}
.site-topbar>div{
line-height: 40px;
/* 行高使得文字与div高度相同文字居中 */
display: inline-block;
color: #b0b0b0;
margin-left: 10px;
font-size: 12px;
}
.site-topbar>div:nth-child(12)~div{
float: right;
margin-right: 10px;
}
.site-topbar>div>a{
color: #b0b0b0;
/* 覆盖颜色 */
text-decoration: none;
/* 去掉下划线 */
}
.site-header{
height: 100px;
/* border: 1px solid red; */
/* float: left; */
margin: auto;
}
.site-header-container{
/* border: 1px solid red; */
height: 100px;
display: inline-block;
position: relative;
width: 1226px;
left:14%;
margin: auto;
}
.site-header-container>img{
margin-top: 20px;
}
.blank{
/* width: 3130px; */
height: 100px;
/* border: 1px solid red; */
position: absolute;
top: 0px;
left: 60px;
bottom: 0px;
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
.blank>li:nth-child(1){
width: 142px;
line-height: 36px;
padding-right: 15px;
}
.blank>li{
float: left;
list-style: none;
padding: 26px 10px 38px;
line-height: 36px;
}
#research{
width: 245px;
height: 40px;
position: absolute;
right: 45px;
top: 25px;
}
#site-header-container-button{
width: 45px;
height: 45px;
position: absolute;
right: 0px;
top: 25px;
}
.home-hero{
width: 1226px;
height: 644px;
position: relative;
/* border: 1px solid red; */
margin: auto;
}
.home-hero-nav{
width: 234px;
height: 460px;
list-style: none;
/* border: 1px solid red; */
position: relative;
float: left;
background-color: #757575;;
}
.home-hero-nav>li{
padding: 0px;
margin: 0px;
width: 234px;
height: 41px;
line-height: 41px;
/* border: 1px solid red; */
color: #fff;
font-size: 14px;
background-color: #757575;;
position: relative;
text-indent: 30px;
}
.home-hero-nav>li>img{
width: 20px;
height: 20px;
position: absolute;
right: 10px;
top: 10px;
}
.home-hero-hover1{
position: absolute;
top: 0px;
left: 234px;
list-style: none;
background-color:#b0b0b0;
width: 234px;
height: 300px;
line-height: 42px;
display: none;
}
.home-hero-nav>li:nth-child(1){
margin-top: 18px;
}
.home-hero-nav>li:nth-child(1):hover>.home-hero-hover1{
display: inline-block;
}
.home-hero-nav>li:hover{
background-color: red;
}
.home-hero-grid{
border: 1px solid red;
height: 170px;
float: left;
margin-top: 14px;
}
.home-hero-grid1{
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(2,1fr);
/* border: 1px solid #b91414; */
background-color: #5f5750;
width: 226px;
height: 170px;
/* margin-right: 10px; */
}
.home-hero-grid1>div{
width: 70px;
height: 64px;
padding-top: 18px;
text-align: center;
color: #fff;
font-size: 12px;
}
.home-hero-grid1>div>img{
width: 24px;
height: 24px;
}
.home-hero-grid1>div>p{
margin: 0px;
}
.home-hero-grid2>img{
width: 316px;
height: 170px;
}
.home-hero-grid2{
margin-top: 14px;
}
.home-hero-grid2>img{
margin-left: 13px;
}
.main-page{
height: 5160px;
/* border: 1px solid red; */
background-color: #f5f5f5;
width: 1230px;
text-align: center;
}
.main-page-container{
height: 5160px;
margin: auto;
/* border: 1px solid red; */
display: inline-block;
}
.main-page-container-img{
margin: 22px 0px;
}
.box-hd{
position: relative;
margin: 0;
font-size: 20px;
line-height: 58px;
color: #333;
font-family:14px / 1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
/* border: 1px solid red; */
}
.box-hd>h2,.box-hd1>h2{
font-weight: 100;
}
.more{
position: absolute;
right: 0px;
font-size: 16px;
height: 58px;
bottom: 0px;
}
.row{
width: 1226px;
height: 628px;
}
.col{
height: 628px;
float: left;
}
.brick-list-clearfix{
width: 992px;
height: 614px;
float: left;
}
.brick-list-clearfix>li{
width: 234px;
height: 300px;
/* border: 1px solid red; */
box-sizing: border-box;
float: left;
margin-left: 14px;
list-style: none;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
padding: 20px 0px;
background-color: white;
}
.brick-list-clearfix>li>img{
overflow-clip-margin: content-box;
overflow: clip;
width: 160px;
height: 160px;
}
.brick-list-clearfix>li>h3{
margin: 0 10px 2px;
font-size: 14px;
font-weight: 400;
color: #333;
}
.brick-list-clearfix>li:nth-child(4)~li{
margin-top: 15px;
}
.brick-list-clearfix>li>.p1{
margin: 0 10px 10px;
height: 18px;
font-size: 12px;
color: #b0b0b0;
width: 220px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.brick-list-clearfix>li>.p2{
margin: 0 10px 14px;
color: #ff6700;
font-family: 1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
font-size: 14px;
}
.brick-list-clearfix>li>.p2>del{
color: #757575;
}
.brick-list-clearfix1{
height: 300px;
/* border: 1px solid red; */
width: 234px;
}
.brick-list-clearfix1>div{
height: 130px;
/* border:1px solid red; */
}
.brick-list-clearfix1>.div1>h3{
margin: 30px 0px 0px 10px;
font: 14px / 1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
max-width: 120px;
}
.brick-list-clearfix1>.div1>.p2{
margin: 0px 110px 0px 30px;
color: #ff6700;
font-family: 1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
font-size: 14px;
}
.brick-list-clearfix1>.div1>img{
position: absolute;
right: 0px;
top: 20px;
}
.brick-list-clearfix1>.div1{
position: relative;
}
.brick-list-clearfix1>.div2{
position: relative;
}
.div2>.span1{
font-size: 18px;
position: absolute;
left: 30px;
top: 40px;
}
.div2>img{
position: absolute;
right: 30px;
top: 50px;
color:#ff6700 ;
}
.div2>.span2{
position: absolute;
left: 30px;
top: 70px;
font-size: 12px;
}
.brick-promo-list-clearfix{
/* border: 1px solid red; */
width: 234px;
height: 614px;
float: left;
box-sizing: border-box;
}
.brick-promo-list-clearfix>li>img{
width: 234px;
height: 300px;
}
.brick-promo-list-clearfix>li{
list-style: none;
}
.container-img{
width: 1226px;
height: 120px;
padding: 30px 0px;
}
.site-footer{
width: 1254px;
height: 471px;
/* border: 1px solid red; */
}
.footer-service{
/* border: 1px solid red; */
width: 1226px;
height: 80px;
}
.list-service-clearfix1{
/* border: 1px solid red; */
font-size: 16px;
line-height: 25px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
list-style: none;
height: 80px;
box-sizing: border-box;
padding: 24px 0px;
border-bottom:1px solid #e0e0e0 ;
}
.list-service-clearfix1>li{
float: left;
width: 243px;
text-align: center;
}
.list-service-clearfix1>li:nth-child(-n+4){
border-right: 1px solid #e0e0e0;
}
.list-service-clearfix1>li>img{
width: 24px;
height: 24px;
display: inline-block;
vertical-align: bottom;
/* 底部对齐 */
}
.col-links-col-links-first{
width: 160px;
height: 25px;
float: left;
}
.col-links{
float: left;
list-style: none;
/* border: 1px solid red; */
box-sizing: border-box;
}
.col-links>li{
margin-top: 10px ;
}
.col-links>li:nth-child(1){
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
margin-bottom: 26px;
width: 160px;
}
.col-links>li:nth-child(1)~li{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
.footer-links-clearfix{
padding: 40px 0px;
}
.service{
font-size: 12px;
color: #ff6700;
/* border: 1px solid red; */
/* width: 120px; */
/* height: 30px; */
display: inline-block;
}
.service>img{
vertical-align: bottom;
}
.phone-number{
font-size: 22px;
color: #ff6700;
margin: 0 0 5px;
}
.col-contact{
text-align: center;
padding-left: 60px;
font-family: Arial, Helvetica, sans-serif;
}
.time{
font-size: 12px;
margin: 0 0 5px;
color: #616161;;
}
.col-links>.col-contact>li:nth-child(2)>.phone-number{
margin: 25px 0px 5px ;
}
.col-links>.col-contact>li:nth-child(1){
border-left: 1px solid #e0e0e0;
}
.col-links-col-links-first{
list-style: none;
}
.site-info{
width: 1254px;
height: 265px;
/* border: 1px solid red; */
background-color:#fafafa ;
padding:30px 0px ;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
.info-container{
width: 1226px;
height: 155px;
/* border: 1px solid red; */
margin: 0px 84px;
}
.info-text{
/* border: 1px solid red; */
height: 95px;
padding: 0px 0px 0px 80px;
box-sizing: border-box;
}
.info-text>p{
padding-bottom: 3px;
}
.info-text>p:nth-child(1),.info-text>p:nth-child(2){
color: #757575;
}
.info-text>p:nth-child(2)~p{
color: #b0b0b0;
}
.info-links{
/* border: 1px solid red; */
height: 28px;
padding: 0 0 0 77px;
margin: 4px 0px 15px;
}
.info-container>img{
width: 56px;
height: 56px;
margin: 0px 20px 0px 0px;
float: left;
}
.info-text>p>span{
font-size: 12px;
padding: 0 3px;
}
.info-links>img{
height: 28px;
}
.slogan-ir{
text-align: center;
margin: 30px 0px 0px;
color: #333;
}
购物车html+css样式
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
font: 14px / 1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
}
*{
margin: 0;
padding: 0px;
}
.site-header,.site-mini-header{
height: 100px;
box-sizing: border-box;
background-color: #FFFFFF;
/* border: 1px solid red; */
}
.container{
margin: 0px 84px;
height: 74px;
position: relative;
text-align: center;
margin: auto;
width: 1226px;
}
.site-mini-header{
font-size: 12px;
border-bottom: 2px solid #ff6700;
height: 100px;
}
#header-logo{
margin: 26px 45px 0px 0px;
float: left;
}
.container>h2{
float: left;
line-height: 48px;
margin-bottom: 0px;
font-size: 28px;
margin-top: 26px;
font-family: Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
color: #424242;
}
.container>.register{
position: absolute;
right: 5px;
bottom: 10px;
}
.container>.register>span{
padding: 0px 5px;
}
.page-main{
height: 1900px;
/* border: 1px solid red; */
background: #f5f5f5;
padding: 38px 0px;
margin: auto;
box-sizing: border-box;
text-align: center;
}
.page-main>.cart{
background: url(https://cdn.cnbj1.fds.api.mi-img.com/staticsfile/cart/cart-empty.png) no-repeat 124px 0;
height: 273px;
padding-left: 558px;
margin: 65px 0px 130px;
/* border: 1px solid red; */
box-sizing: border-box;
width: 1226px;
display: inline-block;
}
.login-tip{
width: 668px;
height: 54px;
color: #b0b0b0;
margin: 70px 0px 0px;
}
.login-tip>h2{
font-size: 36px;
}
.login-tip>p{
font-size: 20px;
}
.btn-login,.btn-shop{
border: 1px solid #ff6700;
margin: 20px 10px 0px 0px;
display: inline-block;
font-size: 14px;
width: 171px;
height: 49px;
text-align: center;
line-height: 49px;
/* 当我用div要字体居中时用行高 */
}
.btn-login{
background: #ff6700;
}
.page-main>.recommendation{
height: 40px;
font-size: 30px;
color: #757575;
text-align: center;
}
.recommendation-title{
height: 50px;
width: 1226px;
border-top: 1px solid #e0e0e0;
}
.recommend-list{
box-sizing: border-box;
width: 1240px;
display: inline-block;
height: 1255px;
}
.recommend-list>li{
width: 234px;
height: 300px;
list-style: none;
margin: 0px 0px 14px 14px;
/* border: 1px solid red; */
float: left;
box-sizing: border-box;
}
.recommend-list>li>img{
margin: 40px 47px 20px;
width: 140px;
height: 140px;
}
.recommend-name{
margin: 0 10px 10px;
height: 18px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
color: #333;
text-align: center;
}
.recommend-price{
margin-bottom: 10px;
color: #ff6700;
text-align: center;
}
.recommend-tip{
color: #757575;
text-align: center;
}
.site-info{
width: 1254px;
height: 265px;
/* border: 1px solid red; */
background-color:#fafafa ;
padding:30px 0px ;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
margin-left: 200px;
}
.info-container{
width: 1226px;
height: 155px;
/* border: 1px solid red; */
margin: 0px 84px;
}
.info-text{
/* border: 1px solid red; */
height: 95px;
padding: 0px 0px 0px 80px;
box-sizing: border-box;
}
.info-text>p{
padding-bottom: 3px;
}
.info-text>p:nth-child(1),.info-text>p:nth-child(2){
color: #757575;
}
.info-text>p:nth-child(2)~p{
color: #b0b0b0;
}
.info-links{
/* border: 1px solid red; */
height: 28px;
padding: 0 0 0 77px;
margin: 4px 0px 15px;
}
.info-container>img{
width: 56px;
height: 56px;
margin: 0px 20px 0px 0px;
float: left;
}
.info-text>p>span{
font-size: 12px;
padding: 0 3px;
}
.info-links>img{
height: 28px;
}
.slogan-ir{
text-align: center;
margin: 30px 0px 0px;
color: #333;
}
.site-footer{
/* width: 1254px; */
height: 471px;
text-align: center;
/* border: 1px solid red; */
}
.footer-service{
/* border: 1px solid red; */
width: 1226px;
height: 80px;
display: inline-block;
}
.list-service-clearfix1{
/* border: 1px solid red; */
font-size: 16px;
line-height: 25px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
list-style: none;
height: 80px;
box-sizing: border-box;
padding: 24px 0px;
border-bottom:1px solid #e0e0e0 ;
display: inline-block;
}
.list-service-clearfix1>li{
float: left;
width: 243px;
text-align: center;
}
.list-service-clearfix1>li:nth-child(-n+4){
border-right: 1px solid #e0e0e0;
}
.list-service-clearfix1>li>img{
width: 24px;
height: 24px;
display: inline-block;
vertical-align: bottom;
/* 底部对齐 */
}
.col-links-col-links-first{
width: 300px;
height: 25px;
float: left;
}
.col-links{
float: left;
list-style: none;
/* border: 1px solid red; */
box-sizing: border-box;
/* border-bottom: 1px solid #e0e0e0; */
}
.col-links>li{
margin-top: 10px ;
}
.col-links>li:nth-child(1){
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
margin-bottom: 26px;
width: 160px;
}
.col-links>li:nth-child(1)~li{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
.footer-links-clearfix{
padding: 40px 0px;
}
.service{
font-size: 12px;
color: #ff6700;
/* border: 1px solid red; */
/* width: 120px; */
/* height: 30px; */
display: inline-block;
}
.service>img{
vertical-align: bottom;
}
.phone-number{
font-size: 22px;
color: #ff6700;
margin: 0 0 5px;
}
.col-contact{
text-align: center;
padding-left: 60px;
font-family: Arial, Helvetica, sans-serif;
}
.time{
font-size: 12px;
margin: 0 0 5px;
color: #616161;;
}
.col-links>.col-contact>li:nth-child(2)>.phone-number{
margin: 25px 0px 5px ;
}
.col-links>.col-contact>li:nth-child(1){
border-left: 1px solid #e0e0e0;
}
.col-links-col-links-first{
list-style: none;
}
</style>
</head>
<body>
<div class="site-header site-mini-header">
<div class="container">
<img src="./icon-小米归属.png" alt="" id="header-logo" width="48px" height="48px">
<h2>我的购物车</h2>
<div class="register">登录<span>|</span>注册</div>
</div>
</div>
<div class="page-main">
<div class="cart">
<div class="login-tip">
<h2>您的购物车还是空的！</h2>
<p>登录后将显示您之前加入的商品</p>
<div class="btn-login">立即登录</div>
<div class="btn-shop">马上去购物</div>
</div>
</div>
<div class="recommendation">为您推荐</div>
<h2 class="recommendation-title"></h2>
<ul class="recommend-list">
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202311281411_fc68b941c011a8bbf67db570d0985d7a.png?thumb=1&w=243&h=243&f=webp&q=90" alt="">
<div class="recommend-name">Redmi K70</div>
<div class="recommend-price">2499元</div>
<div class="recommend-tip">162.3万人好评</div>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202311281411_fc68b941c011a8bbf67db570d0985d7a.png?thumb=1&w=243&h=243&f=webp&q=90" alt="">
<div class="recommend-name">Redmi K70</div>
<div class="recommend-price">2499元</div>
<div class="recommend-tip">162.3万人好评</div>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202311281411_fc68b941c011a8bbf67db570d0985d7a.png?thumb=1&w=243&h=243&f=webp&q=90" alt="">
<div class="recommend-name">Redmi K70</div>
<div class="recommend-price">2499元</div>
<div class="recommend-tip">162.3万人好评</div>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202311281411_fc68b941c011a8bbf67db570d0985d7a.png?thumb=1&w=243&h=243&f=webp&q=90" alt="">
<div class="recommend-name">Redmi K70</div>
<div class="recommend-price">2499元</div>
<div class="recommend-tip">162.3万人好评</div>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202311281411_fc68b941c011a8bbf67db570d0985d7a.png?thumb=1&w=243&h=243&f=webp&q=90" alt="">
<div class="recommend-name">Redmi K70</div>
<div class="recommend-price">2499元</div>
<div class="recommend-tip">162.3万人好评</div>
</li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202311281411_fc68b941c011a8bbf67db570d0985d7a.png?thumb=1&w=243&h=243&f=webp&q=90" alt="">
<div class="recommend-name">Redmi K70</div>
<div class="recommend-price">2499元</div>
<div class="recommend-tip">162.3万人好评</div>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202311281411_fc68b941c011a8bbf67db570d0985d7a.png?thumb=1&w=243&h=243&f=webp&q=90" alt="">
<div class="recommend-name">Redmi K70</div>
<div class="recommend-price">2499元</div>
<div class="recommend-tip">162.3万人好评</div>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202311281411_fc68b941c011a8bbf67db570d0985d7a.png?thumb=1&w=243&h=243&f=webp&q=90" alt="">
<div class="recommend-name">Redmi K70</div>
<div class="recommend-price">2499元</div>
<div class="recommend-tip">162.3万人好评</div>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202311281411_fc68b941c011a8bbf67db570d0985d7a.png?thumb=1&w=243&h=243&f=webp&q=90" alt="">
<div class="recommend-name">Redmi K70</div>
<div class="recommend-price">2499元</div>
<div class="recommend-tip">162.3万人好评</div>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202311281411_fc68b941c011a8bbf67db570d0985d7a.png?thumb=1&w=243&h=243&f=webp&q=90" alt="">
<div class="recommend-name">Redmi K70</div>
<div class="recommend-price">2499元</div>
<div class="recommend-tip">162.3万人好评</div>
</li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202311281411_fc68b941c011a8bbf67db570d0985d7a.png?thumb=1&w=243&h=243&f=webp&q=90" alt="">
<div class="recommend-name">Redmi K70</div>
<div class="recommend-price">2499元</div>
<div class="recommend-tip">162.3万人好评</div>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202311281411_fc68b941c011a8bbf67db570d0985d7a.png?thumb=1&w=243&h=243&f=webp&q=90" alt="">
<div class="recommend-name">Redmi K70</div>
<div class="recommend-price">2499元</div>
<div class="recommend-tip">162.3万人好评</div>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202311281411_fc68b941c011a8bbf67db570d0985d7a.png?thumb=1&w=243&h=243&f=webp&q=90" alt="">
<div class="recommend-name">Redmi K70</div>
<div class="recommend-price">2499元</div>
<div class="recommend-tip">162.3万人好评</div>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202311281411_fc68b941c011a8bbf67db570d0985d7a.png?thumb=1&w=243&h=243&f=webp&q=90" alt="">
<div class="recommend-name">Redmi K70</div>
<div class="recommend-price">2499元</div>
<div class="recommend-tip">162.3万人好评</div>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202311281411_fc68b941c011a8bbf67db570d0985d7a.png?thumb=1&w=243&h=243&f=webp&q=90" alt="">
<div class="recommend-name">Redmi K70</div>
<div class="recommend-price">2499元</div>
<div class="recommend-tip">162.3万人好评</div>
</li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202311281411_fc68b941c011a8bbf67db570d0985d7a.png?thumb=1&w=243&h=243&f=webp&q=90" alt="">
<div class="recommend-name">Redmi K70</div>
<div class="recommend-price">2499元</div>
<div class="recommend-tip">162.3万人好评</div>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202311281411_fc68b941c011a8bbf67db570d0985d7a.png?thumb=1&w=243&h=243&f=webp&q=90" alt="">
<div class="recommend-name">Redmi K70</div>
<div class="recommend-price">2499元</div>
<div class="recommend-tip">162.3万人好评</div>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202311281411_fc68b941c011a8bbf67db570d0985d7a.png?thumb=1&w=243&h=243&f=webp&q=90" alt="">
<div class="recommend-name">Redmi K70</div>
<div class="recommend-price">2499元</div>
<div class="recommend-tip">162.3万人好评</div>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202311281411_fc68b941c011a8bbf67db570d0985d7a.png?thumb=1&w=243&h=243&f=webp&q=90" alt="">
<div class="recommend-name">Redmi K70</div>
<div class="recommend-price">2499元</div>
<div class="recommend-tip">162.3万人好评</div>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202311281411_fc68b941c011a8bbf67db570d0985d7a.png?thumb=1&w=243&h=243&f=webp&q=90" alt="">
<div class="recommend-name">Redmi K70</div>
<div class="recommend-price">2499元</div>
<div class="recommend-tip">162.3万人好评</div>
</li>
</ul>
</div>
<div class="site-footer">
<div class="footer-service">
<ul class="list-service-clearfix1">
<li><img src="./wxb工具.png" alt="" >预约维修服务</li>
<li><img src="./七天无理由退换.png" alt="">七天无理由退货</li>
<li><img src="./15天免费退换货.png" alt="">15天免费换货</li>
<li><img src="./包邮.png" alt="">满69包邮</li>
<li><img src="./网点.png" alt="">1100余家售后网点</li>
</ul>
</div>
<div class="footer-links-clearfix">
<li class="col-links-col-links-first"></li>
<ul class="col-links">
<li>选购指南</li>
<li>手机</li>
<li>电视</li>
<li>笔记本</li>
<li>平板</li>
<li>穿戴</li>
<li>耳机</li>
<li>家电</li>
<li>路由器</li>
<li>音箱</li>
<li>配件</li>
</ul>
<ul class="col-links">
<li>服务中心</li>
<li>申请政策</li>
<li>售后政策</li>
<li>维修服务价格</li>
<li>订单查询</li>
<li>以旧换新</li>
<li>保障服务</li>
<li>防伪查询</li>
<li>F码通道</li>
</ul>
<ul class="col-links">
<li>线下门店</li>
<li>小米之家</li>
<li>服务网点</li>
<li>授权体验店/专区</li>
</ul>
<ul class="col-links">
<li>关于小米</li>
<li>了解小米</li>
<li>加入小米</li>
<li>投资者关系</li>
<li>可持续发展</li>
<li>廉洁举报</li>
</ul>
<ul class="col-links">
<li>关于我们</li>
<li>新浪微博</li>
<li>官方微信</li>
<li>联系我们</li>
<li>公益基金会</li>
</ul>
<ul class="col-links">
<div class="col-contact">
<li>
<p class="phone-number">400-100-5678</p>
<p class="time">8:00-18:00 (仅收市话费)</p>
<div class="service"><img src="./人工客服.png" alt="" width="20px" height="20px">人工客服</div>
</li>
<li>
<p class="phone-number">400-180-8888</p>
<p class="time">8:00-18:00 (仅收市话费)</p>
<p class="time">适用于: MIX FOLD、巨屏电视系列</p>
<div class="service"><img src="./人工客服.png" alt="" width="20px" height="20px">人工客服</div>
</li>
</div>
</ul>
</div>
</div>
<div class="site-info">
<div class="info-container">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi.com-assets/shop/img/logo-mi2.png" alt="">
<div class="info-text">
<p>小米商城<span>|</span>小米澎湃OS<span>|</span>米家<span>|</span>米聊<span>|</span>多看<span>|</span>游戏<span>|</span>音乐<span>|</span>政企服务<span>|</span>小米天猫店<span>|</span>小米集团隐私政策<span>|</span>小米公司儿童信息保护规则<span>|</span>小米商城隐私政策<span>|</span>小米商城用户协议<span>|</span>问题反馈<span>|</span>Select Location</p>
<p>北京互联网法院法律服务工作站|中国消费者协会|北京市消费者协会</p>
<p>© mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2023]0169-004号（京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 </p>
<p>
营业执照 医疗器械质量公告增值电信业务经营许可证编号：京B2-20180851 网络食品经营备案
违法和不良信息举报电话：171-5104-4404
</p>
<p>京食药网食备202010048 食品经营许可证 新出发京批字第直220280号
知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
</div>
<div class="info-links">
<img src="https://s01.mifile.cn/i/v-logo-2.png" alt="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/icon3.png" alt="">
<img src="https://i8.mifile.cn/b2c-mimall-media/ba10428a4f9495ac310fd0b5e0cf8370.png" alt="">
<img src="https://cnbj1.fds.api.xiaomi.com/b2c-misite-activity/d447d642594f4f15ceb90f20ec20c240.png" alt="">
</div>
</div>
<div class="slogan-ir">
探索黑科技，小米为发烧而生
</div>
</div>
</body>
</html>
登录页html+css
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.mi-sider-layout__banner{
background-image: url("https://cdn.web-global.fds.api.mi-img.com/mcfe--mi-account/static/static/media/banner.92c693b4..jpg");
width: 390px;
height: 932px;
background-size: contain;
/* 使得图片缩小放大样子不变 */
background-repeat: no-repeat;
float: left;
}
.mi-layout{
padding: 0 0 40px;
height: 932px;
box-sizing: border-box;
/* border: 1px solid red; */
background: #000;
}
.mi-layout__header{
width: 1300px;
display: block;
height: 80px;
padding: 20px;
background: #000;
float: left;
box-sizing: border-box;
/* position: relative; */
}
.mi-layout-header__title>.mi-img>img{
width: 40px;
height: 40px;
margin-right: 10px;
float: left;
}
.mi-layout-header__title{
color: #FFF;
width: 154px;
height: 40px;
box-sizing: border-box;
float: left;
}
.mi-layout-header__title>span{
display: inline-block;
line-height: 40px;
font-size: 26px;
}
.mi-nav{
height: 40px;
color: #FFF;
margin: 0 10px;
float: left;
line-height: 40px;
/* position: absolute; */
float: right;
}
.mi-layout__container{
/* border: 1px solid red; */
width: 1297px;
height: 850px;
float: left;
position: relative;
background: #000;
text-align: center;
}
.mi-layout-card{
/* border: 1px solid red; */
padding:40px ;
width: 300px;
height: 500px;
position: absolute;
top: 15%;
left: 35%;
}
.A{
font-size: 22px;
margin-bottom: 10px;
color: #FFF;
}
.B>input,.C>input{
height: 60px;
width: 300px;
box-sizing: border-box;
margin-bottom: 10px;
}
.F{
display: inline-block;
margin-bottom: 10px;
}
.E{
background-color: #ff5c00;
text-align: center;
color: #FFF;
line-height: 60px;
height: 60px;
margin-bottom: 10px;
}
.G{
margin-bottom: 10px;
color: #FFF;
margin-right: 20px;
}
.H{
margin-bottom: 10px;
text-align: right;
color: #FFF;
margin-left: 20px;
}
.I{
text-align: center;
color: #FFF;
margin-bottom: 10px;
font-size: 17px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
/* padding-left: 30px; */
}
.D{
font-size: 12px;
margin-bottom: 10px;
color: #FFF;
}
.J{
text-align: center;
}
.J>svg{
display: inline-block;
background-color: #FFF;
width: 46px;
height: 46px;
margin-right: 20px;
}
.L{
color: #FFF;
/* text-align: center; */
height: 20px;
position: absolute;
bottom: 0px;
left: 350px;
}
a{
text-decoration: none;
color: #FFF;
}
</style>
</head>
<body>
<div class="mi-sider-layout__banner"></div>
<div class="mi-layout">
<div class="mi-layout__header">
<div class="mi-layout-header__title">
<div class="mi-img"><img src="./icon-小米归属.png" alt=""></div>
<span>小米账号</span>
</div>
<div class="mi-nav">用户协议</div>
<div class="mi-nav">隐私政策</div>
<div class="mi-nav">帮助中心</div>
<div class="mi-nav">中文(简体)</div>
</div>
<div class="mi-layout__container">
<div class="mi-layout-card">
<div class="A">
登录 <a href="">注册</a>
</div>
<div class="B"><input type="text" placeholder="邮箱/手机号码/小米ID"></div>
<div class="C"><input type="text" placeholder="密码"></div>
<div class="D"><input type="checkbox"><span>已阅读并同意小米账号 用户协议 和 隐私政策 </span></div>
<div class="E">登录</div>
<div class="F">
<span class="G">忘记密码</span>
<span class="H">手机号登录</span>
</div>
<div class="I"><p>其他方式登录</p></div>
<div class="J">
<svg><path d="M10.35 25.898c-.543.439-1.125 1.076-1.294 1.886-.23 1.109-.048 2.496 1.021 3.583 1.296 1.32 3.263 1.68 4.112 1.744 2.31.165 4.77-.978 6.626-2.285a14.633 14.633 0 003.162-3.133c-2.667-1.376-5.996-2.898-9.555-2.75-1.818.076-3.12.454-4.072.956zm33.821 6.09A22.878 22.878 0 0046.001 23C46 10.319 35.683 0 23 0S0 10.319 0 23c0 12.684 10.315 23 23 23 7.654 0 14.441-3.761 18.624-9.53-4.82-2.4-9.646-4.785-14.48-7.156-1.916 2.184-4.746 4.372-7.943 5.324-2.01.598-3.822.825-5.715.438-1.875-.383-3.257-1.261-4.062-2.142-.41-.449-.88-1.02-1.222-1.699.032.086.055.137.055.137s-.196-.337-.346-.876a4.202 4.202 0 01-.16-1.401c-.02-.362.005-.726.077-1.081.187-.91.575-1.967 1.58-2.952 2.203-2.157 5.154-2.274 6.684-2.265 2.265.014 6.201 1.005 9.515 2.178.918-1.957 1.507-4.048 1.886-5.44H13.717v-1.49h7.075v-2.982h-8.567v-1.489h8.565v-2.979c0-.41.081-.745.745-.745h3.352v3.724H34.2v1.49h-9.312v2.98h7.45s-.748 4.17-3.088 8.28c5.192 1.854 12.494 4.71 14.92 5.664z" fill="#1989fa"></path></svg>
<svg><path d="M23 0A23.001 23.001 0 006.736 39.263 23 23 0 0046 22.999 22.984 22.984 0 0023 0zm-3.93 28.311c-1.212 0-2.175-.25-3.387-.501l-3.387 1.673.961-2.885c-2.426-1.674-3.849-3.849-3.849-6.525 0-4.601 4.35-8.197 9.662-8.197 4.725 0 8.906 2.886 9.743 6.774a6.763 6.763 0 00-.921-.042c-4.601 0-8.197 3.429-8.197 7.652.01.676.11 1.348.293 1.998-.335 0-.628.042-.92.042zm14.135 3.387l.71 2.426-2.634-1.463c-.961.25-1.924.502-2.885.502-4.601 0-8.199-3.136-8.199-6.974 0-3.837 3.596-6.984 8.196-6.984 4.35 0 8.197 3.136 8.197 6.984 0 2.133-1.423 4.057-3.387 5.52z"></path></svg>
<svg><path d="M23 0C10.31 0 0 10.31 0 23s10.31 23 23 23 23-10.31 23-23S35.69 0 23 0zm10.363 29.926c-.053.053-.106.053-.159.106-.634-.159-1.374-.74-1.692-1.216-.158-.159-.211-.423-.475-.53 0 .953-.582 1.852-1.005 2.486-.159.211-.635.582-.635.793.16.106.37.159.582.212.476.211 1.163.581 1.428 1.004.105.159.264.317.317.476.74 1.745-1.64 2.168-2.855 2.432s-3.49-.476-4.124-.846c-.37-.264-.74-.846-1.322-.846-.159.106-.635.053-.9.053-.74 1.48-4.6 2.168-6.661 1.375-.635-.212-1.956-.793-1.692-1.798.211-.846.899-1.322 1.586-1.639.264-.159.846-.211 1.005-.476-.582-.423-1.11-1.269-1.375-1.956-.159-.37-.212-1.163-.423-1.428-.37.529-1.428 1.64-2.326 1.48-.16-.21-.318-.422-.423-.687-.212-.687-.106-1.797.105-2.432.37-1.322.74-2.273 1.428-3.225.211-.317.529-.529.74-.846-.423-.423-.317-1.692-.053-2.22.159-.37.423-.318.476-.9-.106-.158 0-.37-.053-.581-.211-.952.159-2.115.423-2.855.9-2.38 2.432-4.072 4.706-5.023.529-.212 1.163-.37 1.745-.476.264-.053.528 0 .74-.106 5.34-.053 8.037 2.75 9.041 7.032.159.688 0 1.586 0 2.274 1.216.264 1.48 2.696.476 3.384V23c.37.634.846 1.269 1.163 1.956.318.74.423 1.586.635 2.485.211.687-.106 2.274-.423 2.485z" fill="#18acfc"></path></svg>
<svg><path d="M23 0C10.287 0 0 10.287 0 23s10.287 23 23 23 23-10.287 23-23S35.713 0 23 0zm8.866 28.144c-1.799 3.847-7.695 5.73-12.044 5.394-4.14-.334-9.493-1.714-10.036-6.816 0 0-.293-2.3 1.923-5.269 0 0 3.178-4.475 6.858-5.77 3.722-1.255 4.14.877 4.14 2.174-.209 1.087-.543 1.714.837 1.296 0 0 3.638-1.715 5.143-.21 1.213 1.214.21 2.928.21 2.928s-.502.544.543.753c.962.167 4.224 1.673 2.425 5.52zm-3.597-10.622a.733.733 0 01-.71-.71c0-.42.334-.712.71-.712 0 0 4.475-.836 3.931 4.015v.083a.723.723 0 01-.71.628.705.705 0 01-.712-.711c0-.084.711-3.304-2.509-2.593zm7.57 4.642c-.126.836-.544.502-1.004.502-.586 0-1.046-.753-1.046-1.339 0-.501.21-1.003.21-1.003.041-.21.543-1.547-.335-3.513-1.59-2.718-4.768-2.718-5.144-2.593-.376.168-.962.251-.962.251-.585 0-1.045-.46-1.045-1.045 0-.502.334-.878.752-1.004 0 0 0 .042.042.042s.084.042.084.042c.46-.084 2.049-.21 3.554.167 2.802.67 6.566 3.764 4.893 9.493z"></path></svg>
</div>
</div>
<div class="L">小米公司版权所有-京ICP备10046444-京公网安备11010802020134号-京ICP证110507号</div>
</div>
</div>
</body>
</html>
以上的html+css构成的页面只是一个页面，其功能未实现，如有帮得上的请自取。
863
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
