小米网站首页实现（html+css）
2024-07-04 10:03:06
链接：https://pan.baidu.com/s/1UUGjSR-d1WhEPwU11ZQOyQ
提取码：yty5
过程中css用到的有demo_index.html,iconfont.css,demo.css，mi.css，reset.css
所要引入的所有css样式，我们所要写的就在mi.css里面
html整体部分，分模块实现不同的布局
里面用到的最多的布局是div>ul>li>a>img ，根据原网页查看网页源代码了解盒子大小，颜色等等样式。
那么css编写也一样根据模块来，分几个部分编写样式
这里给出我自己写的所有代码以及一些常见的方法，最重要的是代码不一定要和我的一模一样，只要是能实现同样效果就行。
<!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>Document</title><link rel="icon" href="images/favicon.icon"><link rel="stylesheet" href="css/mi.css"><link rel="stylesheet" href="css/reset.css"><link rel="stylesheet" href="css/iconfont.css">
</head>
<body><!-- 头部开始 --><div class="header"><div class="wrap"><ul class="header-left"><li><a href="#">小米官网</a><span>|</span></li><li><a href="#">小米商城</a><span>|</span></li><li><a href="#">MIUI</a><span>|</span></li><li><a href="#">loT</a><span>|</span></li><li><a href="#">云服务</a><span>|</span></li><li><a href="#">天星科技</a><span>|</span></li><li><a href="#">有品</a><span>|</span></li><li><a href="#">小爱开发平台</a><span>|</span></li><li><a href="#">企业团购</a><span>|</span></li><li><a href="#">资质证照</a><span>|</span></li><li><a href="#">协议规则</a><span>|</span></li><li><a href="#">下载app</a><span>|</span><div class="download"><a href="#"><img src="data:images/78c30d4f259ed43ab20e810a522a6249.png" alt=""><p>小米商城app</p></a></div><div class="traiangle"></div></li><li><a href="#">Select Location</a></li></ul><ul class="header-right"><li><a href="#">登录</a><span>|</span></li><li><a href="#">注册</a><span>|</span></li><li><a href="#">消息通知</a></li><li class="cart"><a href="#"><i class="iconfont"></i>购物车 (0)</a><div class="cart-list">购物车中还没有商品，赶紧选购吧！</div></li></ul></div></div><!-- 头部结束 --><!-- 导航开始 --><div class="navigate"><div class="wrap"><div class="logo"><img src="data:images/favicon.ico" alt=""></div><div class="nav-bar"><ul><li><a href="#">Xiaomi手机</a><div class="nav-bar-list"><div class="wrap"><ul><li><a href=""><div class="nav-img-box"><img src="data:images/d7a15df55e98e4163390096ed05b1ef5.webp" alt="" width="150px" height="110px"></div><p>Xiaomi 12S Ultra</p><p>5999元起</p></a></li><li><a href=""><div class="nav-img-box"><img src="data:images/b01bb7ee0f8c9865c11eeb2c483015e2.webp" alt="" width="150px" height="110px"></div><p>Xiaomi 12S Pro</p><p>4699元起</p></a></li><li><a href=""><div class="nav-img-box"><img src="data:images/e1f5a30b6e9e29c7f4ad6ed26023f4de.webp" alt="" width="150px" height="110px"></div><p>Xiaomi 12S</p><p>3999元起</p></a></li><li><a href=""><div class="nav-img-box"><img src="data:images/a811f07a4e13510b23ada8e2eca473ae.webp" alt="" width="150px" height="110px"></div><p>Xiaomi 12 Pro 天玑版</p><p>3999元起</p></a></li><li><a href=""><div class="nav-img-box"><img src="data:images/88ae9b85c5f8fbdae2ea98d58a045e1e.webp" alt="" width="150px" height="110px"></div><p>Xiaomi Civi 12S</p><p>2299元起</p></a></li><li><a href=""><div class="nav-img-box"><img src="data:images/02ac31f8d3848f71617e074e8e50879e.webp" alt="" width="150px" height="110px"></div><p>Xiaomi 12 Pro</p><p>4699元起</p></a></li></ul></div></div></li><li><a href="#">Redmi手机</a><div class="nav-bar-list"><div class="wrap"><ul><li><a href=""><div class="nav-img-box"><img src="data:images/1e1f915167554e99916273b5269da1b5.webp" alt="" width="150px" height="110px"></div><p>Redmi Note 11T Pro+</p><p>1999元起</p></a></li><li><a href=""><div class="nav-img-box"><img src="data:images/f11d7da9517953d11e02d0b459003f19.webp" alt="" width="150px" height="110px"></div><p>Redmi Note 11T Pro</p><p>1699元起</p></a></li><li><a href=""><div class="nav-img-box"><img src="data:images/30969671b2829cbc625f018c6c998708.webp" alt="" width="150px" height="110px"></div><p>Redmi Note 11SE</p><p>999元起</p></a></li><li><a href=""><div class="nav-img-box"><img src="data:images/ae5b5a8e24272dd4cdd77bf6d26954b6.webp" alt="" width="150px" height="110px"></div><p>Redmi 10A</p><p>649元起</p></a></li><li><a href=""><div class="nav-img-box"><img src="data:images/418f4cb7536265cd99bdf8b2e88d1f84.webp" alt="" width="150px" height="110px"></div><p>Redmi k50 Pro</p><p>2999元起</p></a></li><li><a href=""><div class="nav-img-box"><img src="data:images/8725dc0e5b0def0155a219a1fc316cca.webp" alt="" width="150px" height="110px"></div><p>Redmi K50</p><p>2399元起</p></a></li></ul></div></div></li><li><a href="#">电视</a><div class="nav-bar-list"><div class="wrap"><ul><li><a href=""><div class="nav-img-box"><img src="data:images/6511d77270e94146c0b1f96b66d8cc58.webp" alt="" width="150px" height="110px"></div><p>Redmi 智能电视X55 2022</p><p>2399元起</p></a></li><li><a href=""><div class="nav-img-box"><img src="data:images/6511d77270e94146c0b1f96b66d8cc58.webp" alt="" width="150px" height="110px"></div><p>Redmi 智能电视X65 2022</p><p>3099元起</p></a></li><li><a href=""><div class="nav-img-box"><img src="data:images/8871821795310769c1d3896c99b12381.webp" alt="" width="150px" height="110px"></div><p>小米电视6 65"OLED</p><p>6699元起</p></a></li><li><a href=""><div class="nav-img-box"><img src="data:images/0a1ae5341d2dae66cd42566c60d2d666.webp" alt="" width="150px" height="110px"></div><p>小米电视 大师77"OLED</p><p>17999元起</p></a></li><li><a href=""><div class="nav-img-box"><img src="data:images/932b583c6eccd8aabfa0771f8a854940.webp" alt="" width="150px" height="110px"></div><p>小米透明电视</p><p>49999元起</p></a></li><li><a href=""><div class="nav-img-box"><img src="data:images/ea3390a20547c7298a258528e4aa69ad.webp" alt="" width="150px" height="110px"></div><p>小米电视 大师 65英寸OLED</p><p>8999元起</p></a></li></ul></div></div></li><li><a href="#">笔记本</a><div class="nav-bar-list"><div class="wrap"><ul><li><a href=""><div class="nav-img-box"><img src="data:images/c86a7877e4ed76f50e204875e7372428.webp" alt="" width="150px" height="110px"></div><p>Redmi G 游戏本 2022</p><p>7499元起</p></a></li><li><a href=""><div class="nav-img-box"><img src="data:images/3f306e56e070eec07b985baf8f1f57e8.webp" alt="" width="150px" height="110px"></div><p>Redmi Book Pro 14 2022</p><p>6799元起</p></a></li><li><a href=""><div class="nav-img-box"><img src="data:images/5cea230383f17c7e87c51b65634381f5.webp" alt="" width="150px" height="110px"></div><p>Redmi Book Pro 16 2022</p><p>7399元起</p></a></li><li><a href=""><div class="nav-img-box"><img src="data:images/8e638c7da7a9dd5d7a8a215517ca150e.webp" alt="" width="150px" height="110px"></div><p>RedmiBook Pro 14 2022 锐龙版</p><p>5299元起</p></a></li><li><a href=""><div class="nav-img-box"><img src="data:images/07c66ae36f99daa4d5f613bb3d04ded6.webp" alt="" width="150px" height="110px"></div><p>RedmiBook Pro 15 2022 锐龙版</p><p>5499元起</p></a></li><li><a href=""><div class="nav-img-box"><img src="data:images/37fcbe3b823c837b6ffe7f59f7aa579e.webp" alt="" width="150px" height="110px"></div><p>RedmiBook Pro 14 锐龙版</p><p>4699元起</p></a></li></ul></div></div></li><li><a href="#">平板</a><div class="nav-bar-list"><div class="wrap"><ul><li><a href=""><div class="nav-img-box"><img src="data:images/33de34a4caf2834a1828dc51203dc922.webp" alt="" width="150px" height="110px"></div><p>小米平板5</p><p>1999元起</p></a></li><li><a href=""><div class="nav-img-box"><img src="data:images/03892b203a6413bcd8ef3f92d77df79c.webp" alt="" width="150px" height="110px"></div><p>小米平板5 Pro 5G</p><p>3499元起</p></a></li><li><a href=""><div class="nav-img-box"><img src="data:images/aad55902a2cc64bf0306b004adb14ef7.webp" alt="" width="150px" height="110px"></div><p>小米平板5 Pro</p><p>2499元起</p></a></li></ul></div></div></li><li><a href="#">家电</a><div class="nav-bar-list"><div class="wrap"><ul><li><a href=""><div class="nav-img-box"><img src="data:images/cbfab8147c1104eea97c7d0f07581237.webp" alt="" width="150px" height="110px"></div><p>巨省电|米家空调 新一级 1.5匹 睡眠版</p><p>2199元起</p></a></li><li><a href=""><div class="nav-img-box"><img src="data:images/4be9f7bb741c25376594976ea5451842.webp" alt="" width="150px" height="110px"></div><p>巨省电 3匹|变频|新一级能效(鎏金款)</p><p>5299元起</p></a></li><li><a href=""><div class="nav-img-box"><img src="data:images/65df9e92c06dcd148de5f0eb13e16ea2.webp" alt="" width="150px" height="110px"></div><p>米家扫拖机器人1T</p><p>1299元起</p></a></li></ul></div></div></li><li><a href="#">路由器</a><div class="nav-bar-list"><div class="wrap"><ul><li><a href=""><div class="nav-img-box"><img src="data:images/c1465737a8a6ac8772560dce2ef0a39f.webp" alt="" width="150px" height="110px"></div><p>Redmi 电竞路由器 AX5400</p><p>549元起</p></a></li><li><a href=""><div class="nav-img-box"><img src="data:images/2a759fa795d749f0538cfd2a15890027.webp" alt="" width="150px" height="110px"></div><p>小米路由器AX6000</p><p>549元起</p></a></li><li><a href=""><div class="nav-img-box"><img src="data:images/2815a0a208be362cba673aae9a1f9c93.webp" alt="" width="150px" height="110px"></div><p>小米路由器AX9000</p><p>1299元起</p></a></li><li><a href=""><div class="nav-img-box"><img src="data:images/2f88d17e29314286967eeb88bf86cdfc.webp" alt="" width="150px" height="110px"></div><p>Xiaomi HomeWiFi 三频 Mesh 路由器</p><p>1499元起</p></a></li><li><a href=""><div class="nav-img-box"><img src="data:images/026a28fc18eff2cfa4d26a799a2da9cc.jpg" alt="" width="150px" height="110px"></div><p>小米路由器4A 千兆版</p><p>129元起</p></a></li><li class="black"><a href=""><div class="nav-img-box"><img src="data:images/2ddc6a2789c5f5ff78fa4ca1402417c8.png" alt="" width="150px" height="110px"></div><p>查看全部</p><p>小米路由器</p></a></li></ul></div></div></li><li><a href="#">服务中心</a></li><li><a href="#">社区</a></li></ul></div><div class="search"><input type="text" placeholder="小米手机"><button type="button" class="iconfont"></button><div class="search-list"><a href="#">全部商品</a><a href="#">红米</a><a href="#">手机</a><a href="#">黑鲨5</a><a href="#">冰箱</a><a href="#">电视</a><a href="#">洗衣机</a><a href="#">Redmi G 2021</a></div></div></div></div> <!-- 导航结束 --><!-- 侧边框行开始 --><div class="banner"><div class="wrap"><div class="banner-box"><img src="data:images/36b45c624f42fa81732457e3f9773dbd.webp" alt=""><div class="slide"><ul><li><a href="#">手机</a><i class="iconfont"></i><div class="slide-list"><ul><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li></ul><ul><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li></ul><ul><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li></ul><ul><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li></ul></div></li><li><a href="#">电视</a><i class="iconfont"></i><div class="slide-list"><ul><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li></ul><ul><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li></ul><ul><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li></ul><ul><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li></ul></div></li><li><a href="#">笔记本 平板</a><i class="iconfont"></i><div class="slide-list"><ul><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li></ul><ul><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li></ul><ul><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li></ul><ul><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li></ul></div></li><li><a href="#">出行 穿戴</a><i class="iconfont"></i><div class="slide-list"><ul><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li></ul><ul><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li></ul><ul><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li></ul></div></li><li><a href="#">耳机 音箱</a><i class="iconfont"></i><div class="slide-list"><ul><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li></ul><ul><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li></ul><ul><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li></ul><ul><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li></ul></div></li><li><a href="#">家电</a><i class="iconfont"></i><div class="slide-list"><ul><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li></ul><ul><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li></ul><ul><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li></ul><ul><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li></ul></div></li><li><a href="#">智能 路由器</a><i class="iconfont"></i><div class="slide-list"><ul><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li></ul><ul><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li></ul><ul><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li></ul></div></li><li><a href="#">电源 配件</a><i class="iconfont"></i><div class="slide-list"><ul><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li></ul><ul><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li></ul></div></li><li><a href="#">健康 儿童</a><i class="iconfont"></i><div class="slide-list"><ul><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li></ul><ul><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li></ul></div></li><li><a href="#">生活 箱包</a><i class="iconfont"></i><div class="slide-list"><ul><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li></ul><ul><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li></ul><ul><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li><li><a href="#"><img src="data:images/b883131e62133041d7ac8272c17762b0.webp" alt=""><span>Xiaomi 12S</span></a></li></ul></div></li></ul></div></div></div></div><!-- 侧边框行结束 --><!-- 广告部分开始 --><div class="adv"><div class="wrap"><div class="adv-aside"><ul><li class="row col"><a href="#"><i class="iconfont"></i><p>米粉卡</p></a></li><li class="row col"><a href="#"><i class="iconfont"></i><p>米粉卡</p></a></li><li class="row"><a href="#"><i class="iconfont"></i><p>米粉卡</p></a></li><li class="col"><a href="#"><i class="iconfont"></i><p>米粉卡</p></a></li><li class="col"><a href="#"><i class="iconfont"></i><p>米粉卡</p></a></li><li><a href="#"><i class="iconfont"></i><p>米粉卡</p></a></li></ul></div><div class="adv-img"><a href="#"><img src="data:images/290270b6fc499fc5fcb653417e99fe91.jpg" alt=""></a></div><div class="adv-img"><a href="#"><img src="data:images/5d1892854c8bb165e755d68bde287d71.jpg" alt=""></a></div><div class="adv-img"><a href="#"><img src="data:images/28c13d0d11b38ec17fa5d83bc6ba5912.jpg" alt=""></a></div></div></div><!-- 广告部分结束 --><!-- 主体开始 --><div class="container"><div class="wrap"><!-- 手机开始 --><div class="phone"><div class="home-banner-box"><img src="data:images/2656295f6c067f48a04a425acf15a096.webp" alt="" width="100%" height="120px"></div><h2 class="title">手机<a href="#" class="more">查看更多<i class="iconfont"></i></a></h2><div class="phone-box"><div class="phone-box-left"><a href="#"><img src="data:images/6b99bcb716c8f76e1fc5475172bdfc27.webp" alt="" width="234px" height="614px"></a></div><div class="phone-box-right"><ul><li class="items"><a href="#"><img src="data:images/202207011810_86ad513472d1423a3fdec8d7d5107038.webp" alt="" width="160px" height="160px" class="goods-img"></a><p class="top">Xiaomi 12S Ultra</p><p class="between">这真徕卡|专业徕卡影像</p><p class="bottom">5999元起</p></li><li class="items"><a href="#"><img src="data:images/202207012000_0b9df066c110f201154013ac373df1d9.webp" alt="" width="160px" height="160px" class="goods-img"></a><p class="top">Xiaomi 12S Pro</p><p class="between">骁龙8+旗舰处理器|徕卡影像</p><p class="bottom">4699元起</p></li><li class="items"><a href="#"><img src="data:images/202207012022_19bbddb6b35c3828f8b53f450c1519a3.webp" alt="" width="160px" height="160px" class="goods-img"></a><p class="top">Xiaomi 12S</p><p class="between">小尺寸性能旗舰|徕卡影像</p><p class="bottom">3999元起</p></li><li class="items"><a href="#"><img src="data:images/202207012022_19bbddb6b35c3828f8b53f450c1519a3.webp" alt="" width="160px" height="160px" class="goods-img"></a><p class="top">Xiaomi 12 Pro 天玑版</p><p class="between">全球首发天玑9000+|叶脉冷泵散热系</p><p class="bottom">3999元起</p></li><li class="items"><a href="#"><img src="data:images/202207011841_084ed41d67f248677914605b73faf582.webp" alt="" width="160px" height="160px" class="goods-img"></a><p class="top">Redmi Note 11T Pro+</p><p class="between">天玑8100|真旗舰芯</p><p class="bottom">1999元起<span class="bottom-list">2099元</span></p></li><li class="items"><a href="#"><img src="data:images/211bb83776a8e0c8358732c3f3aa2864.webp" alt="" width="160px" height="160px" class="goods-img"></a><p class="top">Redmi Note 11T Pro</p><p class="between">天玑8100|真旗舰芯</p><p class="bottom">1699元起<span class="bottom-list">1799元</span></p></li><li class="items"><a href="#"><img src="data:images/5713971c4bb6512743dfd06023080268.webp" alt="" width="160px" height="160px" class="goods-img"></a><p class="top">Redmi Note 11SE</p><p class="between">双卡双5G|极速登陆</p><p class="bottom">999元起<span class="bottom-list">1099元</span></p></li><li class="items"><a href="#"><img src="data:images/0bcd64f412dfb5e15695fa96d21ecb23.webp" alt="" width="160px" height="160px" class="goods-img"></a><p class="top">Xiaomi Civi 1S</p><p class="between">原生美肌人像|奇迹阳光动人新色|...</p><p class="bottom">2299元起</p></li></ul></div></div></div><!-- 手机结束 --><!-- 家电开始 --><div class="elc"><h2 class="title">家电</h2><div class="elc-box"><div class="elc-left"><ul><li class="items"><a href="#"><img src="data:images/3d47879ec183e25a36e67e0219636e60.webp" alt="" width="234px" height="300px"></a></li><li class="items"><a href="#"><img src="data:images/229bbaccda43f32f464c0a810b800106.webp" alt="" width="234px" height="300px"></a></li></ul></div><div class="elc-right"><ul><li class="items"><a href="#"><img src="data:images/82ff5ea76730fdf6f91aba5d3b2e5739.webp" alt="" width="160px" height="160px"><p class="top">小米电视6 65" OLED</p><p class="between">OLED自发光屏|百万级对比|4.6m</p><p class="bottom">6699元<span class="bottom-list">6999元</span></p></a></li><li class="items"><a href="#"><img src="data:images/c7c15101f2c8a652a4a0d069501d1e53.webp" alt="" width="160px" height="160px"><p class="top">小米电视6 至尊版 65英寸</p><p class="between">百级分区背光|双120HZ高刷|4.5GB+...</p><p class="bottom">7199元<span class="bottom-list">7999元</span></p></a></li><li class="items"><a href="#"><img src="data:images/388b13bf52ab0d6a56bc9f195b5f1dd5.webp" alt="" width="160px" height="160px"><p class="top">小米电视 ES55 2022款</p><p class="between">多分区背光|MEMC动态补偿|杜比视界</p><p class="bottom">2599元<span class="bottom-list">2999元</span></p></a></li><li class="items"><a href="#"><img src="data:images/0191ae995e33faedb3362abaa7a486d1.webp" alt="" width="160px" height="160px"><p class="top">米家直驱洗烘一体机 10kg</p><p class="between">DD直驱电机 安静护衣</p><p class="bottom">2199元<span class="bottom-list">2499元</span></p></a></li><li class="items"><a href="#"><img src="data:images/db032eeb9e8efe9551161ee18bf70d3f.webp" alt="" width="160px" height="160px"><p class="top">米家波轮洗衣机 10kg</p><p class="between">全景玻璃阻尼上盖 防夹手</p><p class="bottom">1099元<span class="bottom-list">1499元</span></p></a></li><li class="items"><a href="#"><img src="data:images/050a724309c945e0ffef3fb633069b49.webp" alt="" width="160px" height="160px"><p class="top">米家冰箱无霜三门216L</p><p class="between">风冷无霜 三门三温区</p><p class="bottom">1499元<span class="bottom-list">1699元</span></p></a></li><li class="items"><a href="#"><img src="data:images/608a47f5d655fc1372de67ee2f7b1c43.webp" alt="" width="160px" height="160px"><p class="top">米家冰箱无霜两门216L</p><p class="between">风冷无霜 离子抗菌</p><p class="bottom">1299元<span class="bottom-list">1499元</span></p></a></li><li class="items-last"><div><a href="#"><p class="items-last-desc"><span>米家全自动波轮洗衣机8kg</span><span class="items-price">799元</span></p><img src="data:images/b649a329983ad590fde607472f73e55a.webp" alt=""></a></div><div><p class='items-p'><span class="items-last-bottom">浏览更多</span><br><small class="items-litter">热门</small></p><i class="iconfont yes"></i></div></li></ul></div></div></div><!-- 家电结束 --><!-- 视频开始 --><div class="video"><h2 class="title">视频<a href="#" class="more">查看更多<i class="iconfont"></i></a></h2><ul class="video-box"><li><a href="#"><div class="video-img"><img src="data:images/e74c4ff741bcdfc5b28a48a43e4edc6d.webp" alt=""><div class="play"><div></div></div></div><p class="video-name">2021年春季新品发布会第一场</p></a></li><li><a href="#"><div class="video-img"><img src="data:images/101b19aca4bb489bcef0f503e44ec866.webp" alt="" width="296px" height="180px"><div class="play"><div></div></div></div><p class="video-name">Redmi 10X系列发布会</p><p class="video-name2">Redmi 10X系列发布会</p></a></li><li><a href="#"><div class="video-img"><img src="data:images/96563e75833ba4563bd469dd28203b09.webp" alt="" width="296px" height="180px"><div class="play"><div></div></div></div><p class="video-name">小米10 青春版 发布会</p></a></li><li><a href="#"><div class="video-img"><img src="data:images/2fd26bb99b723337a2f8eaba84f7d5bb.webp" alt="" width="296px" height="180px"><div class="play"><div></div></div></div><p class="video-name">小米10 8K手机拍大片</p></a></li></ul></div><!-- 视频结束 --></div></div><!-- 主体结束 --><!-- 页脚部分开始 --><div class="footer"><div class="wrap"><div class="footer-sever"><ul><li><a href="#"><i class="iconfont"></i>预约维修服务</a></li><li><a href="#"><i class="iconfont"></i>七天无理由退换</a></li><li><a href="#"><i class="iconfont"></i>15天免费换货</a></li><li><a href="#"><i class="iconfont"></i>满69元包邮</a></li><li><a href="#"><i class="iconfont"></i>1100余家售后网点</a></li></ul></div><div class="footer-links"><ul><li>选购指南</li><li><a href="#">手机</a></li><li><a href="#">电视</a></li><li><a href="#">笔记本</a></li><li><a href="#">平板</a></li><li><a href="#">穿戴</a></li><li><a href="#">耳机</a></li><li><a href="#">家电</a></li><li><a href="#">路由器</a></li><li><a href="#">音箱</a></li><li><a href="#">配件</a></li></ul><ul><li>服务中心</li><li><a href="#">服务中心</a></li><li><a href="#">服务中心</a></li><li><a href="#">服务中心</a></li><li><a href="#">服务中心</a></li><li><a href="#">服务中心</a></li><li><a href="#">服务中心</a></li><li><a href="#">服务中心</a></li><li><a href="#">服务中心</a></li></ul><ul><li>线下门店</li><li><a href="#">线下门店</a></li><li><a href="#">线下门店</a></li><li><a href="#">线下门店</a></li></ul><ul><li>关于小米</li><li><a href="#">关于小米</a></li><li><a href="#">关于小米</a></li><li><a href="#">关于小米</a></li><li><a href="#">关于小米</a></li><li><a href="#">关于小米</a></li></ul><ul><li>关注我们</li><li><a href="#">关注我们</a></li><li><a href="#">关注我们</a></li><li><a href="#">关注我们</a></li><li><a href="#">关注我们</a></li></ul><div class="footer-links-right"><p class="phonenumber">400-100-5678</p><p class="time">8:00-18:00(仅收市话费)</p><p class="people"><a href="#"><i class="iconfont"></i>人工客服</a></p></div></div><div class="footer-last"><div class="footer-last-top"><div class="footer-last-left"><img src="data:images/favicon.ico" alt="" height="56px" width="56px"></div><p class="footer-last-litter"><a href="">小米商城</a><span>|</span><a href="">MIUI</a><span>|</span><a href="">米家</a><span>|</span><a href="">米聊</a><span>|</span><a href="">多看</a><span>|</span><a href="">游戏</a><span>|</span><a href="">政企服务</a><span>|</span><a href="">小米天猫店</a><span>|</span><a href="">小米集团隐私政策</a><span>|</span><a href="">小米公司儿童信息保护规则</a><span>|</span><a href="">小米商城隐私政策</a><span>|</span><a href="">小米商城用户协议</a><span>|</span><a href="">问题反馈</a><span>|</span><a href="">Select Location</a></p><p class="footer-last-litter"><a href="">北京互联网法院法律服务工作站</a><span>|</span><a href="">中国消费者协会</a><span>|</span><a href="">北京市消费者协会</a></p><p class="footer-last-last">©<a href="javascript:;" title="mi.com">mi.com</a>京ICP证110507号<a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow">京ICP备10046444号</a><a rel="nofollow" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802020134" target="_blank">京公网安备11010802020134号</a> <a href="//www.mi.com/culture-license/" target="_blank">京网文[2020]0276-042号</a> <br> <a href="//www.mi.com/medical/record/" target="_blank">（京）网械平台备字（2018）第00005号</a> <a href="//www.mi.com/medical/qualification/" target="_blank">互联网药品信息服务资格证 (京)-非经营性-2014-0090</a> <a href="//www.mi.com/business-license/" target="_blank">营业执照</a> <a href="//www.mi.com/medical/list/" target="_blank">医疗器械质量公告</a> <br> <a href="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e0c7d4cf3b7cd88de10196e30c92e020.png" target="_blank">增值电信业务许可证</a> 网络食品经营备案 京食药网食备202010048 <a href="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c6859168166651511897f54fa1047fe3.png" target="_blank">食品经营许可证</a> <br>违法和不良信息举报电话：171-5104-4404 <a href="https://www.mi.com/intellectual" target="_blank">知识产权侵权投诉</a> 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p><div class="footer-last-img"><a href=""><img src="data:images/truste.png" alt="" width="83px" height="28px"></a><a href=""><img src="data:images/v-logo-2.png" alt="" width="83px" height="28px"></a><a href=""><img src="data:images/icon3.png" alt="" width="83px" height="28px"></a><a href=""><img src="data:images/ba10428a4f9495ac310fd0b5e0cf8370.png" alt="" width="83px" height="28px"></a><a href=""><img src="data:images/aa80aca15173b242c28cc72379fd661c.png" alt="" width="83px" height="28px"></a></div><div class="footer-last-bottom">让全球每个人都能享受科技带来的美好生活</div></div></div></div></div><!-- 页脚部分结束 -->
</body>
</html>css修饰部分，这里我暂时没有用到js代码，只是用css模仿实现了小米样式效果。
/* 头部样式开始 */
/* 黑色背景头部 */
.header{height: 40px;background-color: #333333;
}
/* 居中布局盒子 */
.wrap{width: 1226px;height: 40px;margin: 0 auto;line-height: 40px;
}
/* 左对齐右对齐排布 */
.header-left{float: left;
}
.header-right{float: right;
}
.header li{position: relative;float: left;
}
/* 设置字体颜色大小鼠标移动元素上的事件 */
.header a{font-size: 12px;color: #b0b0b0;
}
.header a:hover{color: #fff;
}
.header span{color:#424242;margin: 0 6px;
}
/* 对购物车进行分析 */
.cart{z-index: 850;width: 120px;height: 40px;background-color: #424242;margin-left: 25px;cursor: pointer; /*将鼠标转化为小手 */position: relative;
}
.cart i{margin-right: 4px;
}
.cart:hover{background-color: #fff;
}
.cart:hover>a{color: #ff6700;
}
.cart-list{position: absolute;right: 0;top: 40px;width: 316px;height: 0px;overflow: hidden;background-color: #fff;box-shadow: 0 2px 10px rgba(0,0,0,.15);text-align: center;line-height: 100px;font-size: 12px;transition: height .3s;
}
.cart:hover>.cart-list{height: 100px;
}
/* 对下载app进行分析 */
.download{z-index: 800;width: 124px;height: 0px;overflow: hidden;background-color: #fff;box-shadow: 0 1px 5px #aaa;position: absolute;top: 40px;left: 50%;margin-left: -62px;transition: height .3s;
}
.download img{width: 90px;height: 90px;margin: 18px 0 12px;
}
.download p{color: #333;font-size: 14px;line-height: 14px;position: relative;top: -15px;
}
.header-left>li:hover>.download{height: 148px;
}
/* 绘制头部三角形 */
.traiangle{display: none;height: 0;width: 0;border-bottom: solid 8px #fff;border-left: solid 8px transparent;border-right: solid 8px transparent;position: absolute;bottom: 0;left: 50%;margin-left: -8px;
}
.header-left>li:hover>.traiangle{display: block;
}
/* 头部样式结束 */
/* 导航开始 */
.navigate{position: relative;width: 100%;height: 100px;float: left;/* background-color: #fff; */
}
.logo{width: 56px;height: 56px;margin-top: 22px;float: left;
}
.nav-bar{width: 874px;height: 100px;float: left;line-height: 100px;padding-left: 172px;box-sizing: border-box;
}
.search{width: 296px;height: 50px;margin-top: 25px;float: left;position: relative;
}
.logo img{width: 56px;height: 56px;
}
.nav-bar li{float: left;padding: 0 10px;
}
.nav-bar a{font-size: 16px;color: #333333;
}
.nav-bar>ul>li>a:hover{color: #ff6700;
}
/* 下拉列表 */
.nav-bar-list{z-index: 900;display: none;position: absolute;left: 0;top: 100px;width: 100%;height: 229px;background-color: #fff;border-top: 1px solid #e0e0e0;box-shadow: 0 3px 4px rgba(0,0,0,.18);
}
.nav-bar li:hover>.nav-bar-list{display: block;
}
.nav-bar-list li{width: 180px;float: left;padding-top: 35px;
}
.nav-img-box{width: 100%;height: 110px;border-right: 1px solid #e0e0e0;box-sizing: border-box;margin-bottom: 20px;
}
.nav-bar-list p{font-size: 12px;line-height: 20px;
}
.nav-bar-list p:nth-of-type(2){color: #ff6700;
}
.nav-bar-list li:last-child .nav-img-box{border-right: none;
}
.nav-bar-list .black p{color: #333;
}
/* 搜索框 */
.search>input{float: left;width: 223px;height: 48px;padding: 0 10px;border: 1px solid #e0e0e0;outline: none;border-right: none;/* border-bottom: none; */transition: all .2s;
}
.search>button{float: left;border: 1px solid #e0e0e0;width: 52px;height: 50px;font-size: 20px;background-color: #fff;transition: all .2s;
}
.search>button:hover{background-color: #ff6700;border-color: #ff6700;color: #fff;
}
.search>input:hover,.search>input:hover+button{border-color: #b0b0b0;
}
.search>input:focus,.search>input:focus+button{border-color: #ff6700;
}
.search-list{z-index: 950;width: 243px;height: 240px;/* overflow: hidden; */background-color: #fff;position: absolute;top: 50px;left: 0;border: 1px solid #ff6700;border-top: none;display: none;/* transition: height .3s; */
}
.search>input:focus~.search-list{display: block;
}
.search-list>a{width: 100%;height: 28px;display: block;padding: 6px 15px;box-sizing: border-box;text-align: left;font-size: 14px;color: #333;
}
.search-list>a:hover{background-color: #fafafa;
}
/* 导航结束 */
/* 侧边框行开始 */
.banner .banner-box{margin-top: 50px;width: 100%;height: 460px;position: relative;
}
.banner-box>img{width: 100%;
}
.slide{position: absolute;top: 51px;left: 0;width: 234px;height: 420px;background-color: #433F3E;padding: 20px 0;
}
.slide>ul>li{height: 42px;line-height: 42px;text-align: left;padding-left: 30px;
}
.slide>ul>li:hover{background-color: #ff6700;
}
.slide i{float: right;margin-right: 20px;font-size: 14px;color: #fff;
}
.slide>ul>li>a{font-size: 14px;color: #fff;
}
.slide>ul>li>div{display: none;position: absolute;top: 0;left: 234px;width: 992px;height: 456px;padding-top: 2px;/* box-sizing: border-box; */background-color: #fff;border: 1px solid #e0e0e0;border-left: none;box-shadow:0 8px 16px rgba(0,0,0,.18);
}
.slide>ul>li:hover>.slide-list{display: block;
}
.slide-list>ul{width: 248px;float: left;
}
.slide-list li{position: relative;width: 100%;height: 76px;padding: 20px 0 20px 18px;box-sizing: border-box;
}
.slide-list img{width: 40px;height: 40px;margin-right: 12px;
}
.slide-list span{position: absolute;top: 18px;font-size: 14px;color: #333;
}
.slide-list li:hover span{color: #ff6700;
}
/* 侧边框行结束 */
/* 广告部分开始 */
.adv{width: 100%;height: 170px;/* background-color: pink; *//* margin: 14px 0 26px; */margin-top: 484px;margin-bottom: 26px;box-sizing: border-box;
}
.adv-aside{float: left;width: 228px;height: 164px;padding: 3px;background-color: #5f5750;
}
.adv-img{float: left;width: 316px;height: 170px;background-color: red;margin-left: 14.66px;
}
.adv-img:hover{box-shadow: 0 15px 30px rgba(0,0,0,.1);
}
.adv-img img{width: 100%;
}
.adv-aside li{position: relative;float: left;width: 76px;height: 82px;
}
.adv-aside i{font-size: 20px;margin-top: 5px;margin-bottom: -16px;display: block;
}
.adv-aside a{display: block;font-size: 12px;color: #fff;opacity: .7;transition: all .2s;
}
.adv-aside a:hover{opacity: 1;
}
.row::after{width: 64px;height: 1px;position: absolute;bottom: 3px;left: 6px;content: "";background-color: #665e57;
}
.col::before{content: "";position: absolute;width: 1px;height: 64px;top: 6px;right: 0px;background-color: #665e57;
}
/* 广告部分结束 */
/* 主体部分开始 */
.container{height: 1880px;width: 100%;background-color: #f5f5f5;padding: 4px 0 12px;
}
.home-banner-box{width: 100%;height: 120px;margin: 22px 0;
}
.title{color: #333;font-size: 22px;font-weight: 200;text-align: left;line-height: 58px;
}
.more{transition: all .4s;font-size: 16px;color: #424242;float: right;
}
.more>i{width: 20px;height: 22px;background-color: #b0b0b0;border-radius: 50%;display: inline-block;line-height: 22px;text-align: center;margin-left: 8px;color: #fff;font-size: 12px;transition: all .4s;
}
.more:hover{color: #ff6700;
}
.more:hover>i{color: #fff;background-color: #ff6700;
}
.phone-box{width: 100%;height: 614px;
}
.phone-box-left{transition: all .2s linear;float: left;width: 234px;height: 614px;
}
.phone-box-right{float: left;width: 992px;height: 614px;
}
.items{float: left;width: 234px;height: 300px;background-color: #fff;margin-left: 14px;margin-bottom: 14px;transition: all .2s linear;
}
.elc-right li:nth-of-type(5),.elc-right li:nth-of-type(6),.elc-right li:nth-of-type(7){margin-bottom: 0;
}
.items:hover,.phone-box-left:hover{transform: translateY(-2px);box-shadow: 0 15px 30px rgba(0,0,0,.1);
}
.items>a{display: block;margin-top: 20px;
}
.goods-image{width: 160px;
}
.top{font-weight: 400;height: 20px;line-height: 20px;font-size: 14px;color: #333333;margin: 0 10px 2px;
}
.between{height: 18px;line-height: 18px;margin: 0 10px 10px;color: #b0b0b0;font-size: 12px;
}
.bottom{height: 20px;line-height: 20px;font-size: 14px;color: #ff6700;margin: 0 10px 14px;
}
.bottom-list{font-size: 14px;color: #b0b0b0;text-decoration: line-through;margin-left: 7px;
}
/* 主体部分结束 */
/* 家电部分开始 */
.elc-left{float: left;width: 234px;height: 600px;
}.elc-left .items{margin-left: 0;position: relative;
}
.elc-left>ul>li img{position: absolute;top: 0px;left: -3.34px;
}
.elc-left>ul>li:nth-of-type(1){margin-top: 0;
}
.elc-right .items-last{width: 234px;height: 300px;float: right;
}
.items-last{width: 234px;height: 300px;float: right;
}
.items-last div{width: 234px;height: 143px;background-color: #fff;margin-bottom: 14px;transition: all .2s linear;
}
.items-last div:last-child{margin-bottom: 0;
}
.items-last div:hover{transform: translateY(-2px);box-shadow: 0 15px 30px rgba(0,0,0,.1);
}
.items-last-desc{display: block;width: 94px;height: 63px;float: left;margin-top: 40px;margin-left: 30px;font-size: 14px;color: #333333;text-align: left;line-height: 23px;
}
.items-last img{float: left;width: 80px;height: 80px;margin-top: 40px;margin-right: 25px;
}
.items-price{line-height: 34px;height: 20.8px;display: block;margin-top: 0;color: #ff6700;font-size: 12px;
}
.items-p{width: 94px;height: 44px;float: left;margin-top: 30px;margin-left: 30px;text-align: left;line-height: 44px;
}
.items-last-bottom{font-size: 18px;
}
.items-litter{display: block;height: 17.6px;line-height: 10px;
}
.items-last i{display: block;color: #ff6700;width: 48px;height: 48px;font-size: 48px;font-weight: 400;float: right;margin-top: 40px;margin-right: 30px;
}/* 家电部分结束 *//* 视频部分开始 */.video h2{margin-left: 0;}.video-box li{width: 296px;height: 285px;float: left;margin-bottom: 14px;margin-left: 14px;background-color: #fff;}.video-box li:first-child{margin-left: 0;}.video-img{position: relative;width: 296px;height: 180px;}.video-name{width: 268px;height: 21px;line-height: 21px;margin: 28px auto 6px;font-size: 14px;color: #333;overflow: hidden;/* 多余文本部分变为省略号 */text-overflow: ellipsis;/* 转换成一行 */white-space: nowrap;}.play{width: 36px;height: 24px;border: 2px solid #fff;box-sizing: border-box;position: absolute;bottom: 10px;left: 20px;border-radius: 12px;transition: all .2s;}.play>div{width: 0;height: 0;border-left: 8px solid #fff;border-top: 5px solid transparent;border-bottom: 5px solid transparent;margin: 4px auto 0px;}.video-img:hover>.play{border: #ff6700;background-color: #ff6700;}.video-box>li:hover{box-shadow:0 15px 30px rgba(0,0,0,.1);;transform:translateY(-2px);}.video-name2{height: 18px;color: #b0b0b0;font-size: 12px;margin: 0 12px;line-height: 18px;}/* 视频部分结束 *//* 页脚部分开始 */.footer{background-color: #fff;}.footer-sever{line-height: 25px;width: 100%;height: 25px;padding: 27px 0;border-bottom: 1px solid #e0e0e0;}.footer-sever li{width: 19.8%;float: left;border-right: 1px solid #e0e0e0;}.footer-sever li:last-child{border-right: 0;}.footer-sever li a{transition: all .2s;font-size: 16px;color: #616161;}.footer-sever li a:hover{color: #ff6700;}.footer-sever li a i{font-size: 23px;padding-right: 4px;}.footer-links{width: 100%;height: 307.8px;padding: 40px 0;}.footer-links>ul{float: left;width: 160px;text-align: left;}.footer-links>ul a{color: #757575;font-size: 12px;}.footer-links>ul li{line-height: 17.6px;color: #424242;font-size: 14px;margin: 10px 0 0;}.footer-links li:first-child{line-height: 1.25;margin: -1px 0 26px;}.footer-links ul:first-child{margin-left: 160px;}.footer-links-right{width: 252px;height: 79.2px;border-left: 1px solid #e0e0e0;float: right;}.phonenumber{font-size: 22px;color: #ff6700;line-height: 1;margin: 0 0 10px;}.time{font-size: 12px;margin: 0 0 5px;text-align: center;line-height: 1;color: #616161;}.people a{transition: all .2s;display: inline-block;color: #ff6700;background-color: #fff;font-size: 12px;width: 118px;height: 28px;line-height: 28px;border: 1px solid #ff6700;}.people a:hover{background-color: #ff6700;color: #fff;}.footer-last{width: 100%;height: 203.2px;padding: 30px 0;}.footer-last-top{width: 100%;height: 184.2px;}.footer-last-left{float: left;width: 56px;height: 56px;margin-right: 20px;}.footer-last-litter{line-height: 18.4px;padding-left: 0px;height: 18.4px;width: 1149px;text-align: left;float: right;}.footer-last-litter a{font-size: 12px;color: #757575;}.footer-last-litter span{font-size: 12px;color: #b0b0b0;padding: 0 3px;}.footer-last-last{width: 1149px;height: 70.4px;text-align: left;line-height: 18px;font-size: 12px;color: #b0b0b0;float: right;}.footer-last-last a{color: #b0b0b0;font-size: 12px;}.footer-last-last a:hover{color: #ff6700;}.footer-last-img{width: 100%;height: 28px;float: left;margin: 4px 0 15px;padding-left: 77px;text-align: left;}.footer-last-bottom{width: 100%;height: 19px;margin-top: 30px;float: left;line-height: 19px;font-size: 18px;color: #a9a9a9;word-spacing: 10px;}/* 页脚部分结束 */关于网站的一些图片可以这样拿到：
特殊图表用i标签class为iconfont，去上面我分享的demo_index.html找到图表号
复制粘贴到i标签中就能使用了
那么说到css效果库的使用这里给大家分享我平时会使用的几个比较好用的
1.图表的出现，消失，震动等等效果：Animista - CSS Animations on Demand
2.背景图的颜色：CSS Background Patterns by MagicPattern
3.按钮颜色与形状：Neumorphism/Soft UI CSS shadow generator
4.炫酷按钮效果显示：Universe of UI elements
5.背景轮廓：Universe of UI elements
6.iconfont矢量图标库：iconfont-阿里巴巴矢量图标库
小米网站首页实现（html+css）相关推荐
- 【前端初级项目】学成在线网站首页，HTML+CSS，附PSD设计稿！！
技术栈及工具 HTML CSS 切图/测量工具:Photoshop 编辑器:VSCode 效果预览 学成在线网站首页,只有一张首页,适合刚学HTML,CSS的同学练手,虽然只有一张静态页面,但是总体上 ...
- 仿写小米网站首页 顶部导航栏部分
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
- 仿写小米网站首页 中间部分
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
- 仿写小米网站首页 产品导航栏
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
- 【使用DIV+CSS重写网站首页案例】CSS引入方式
CSS引入方式(3种) *就近原则:行内引入可以覆盖内部引入的效果 内部引入: * type="text/css" 为默认可以不写 例子: 1 <!DOCTYPE ...
- HTML5期末大作业：商城网站设计——防锤子手机商城官网首页模板(HTML+CSS+JavaScript ) 电商网页HTML代码
HTML5期末大作业:商城网站设计--防锤子手机商城官网首页模板HTML+CSS+JavaScript 电商网页HTML代码 学生网页课程设计期末作业下载 商城网页大学生网页设计制作成 临近期末, 你 ...
- HTML5期末大作业：商城网站设计——防锤子手机商城官网首页模板(HTML+CSS+JavaScript ) 电商网页HTML代码...
HTML5期末大作业:商城网站设计--防锤子手机商城官网首页模板HTML+CSS+JavaScript 电商网页HTML代码 学生网页课程设计期末作业下载 商城网页大学生网页设计制作成 临近期末, 你 ...
- ps css html,用ps两分钟做个xhtml+css的网站首页
xhtml+css网站重构web标准等等之类的文章太多了,我就不重复了,发个最简单的制作xhtml+css页面的方法,方法虽然很简单,但真不一定有几个人知道.... 起码google搜索没搜索到. 开 ...
- HTML+CSS写网站首页
(html+css写网站首页) HTML <html><head><meta charset="UTF-8"><title>网站建设 ...
最新文章
- ATS 5.3.0在反向代理模式下实现正向代理功能方法
- javaweb学习总结(七)——HttpServletResponse对象(一)
- Go语言11-日志系统客户端相关组件
- 纯css3制作的几个社交媒体网站的图标
- redis+mysql几种用法
- ir指令、立即数的作用_ARM指令中使用立即数详解
- AOP 拦截器 JDK动态代理机制 struts2 mybatis spring-aop
- 深度学习自学（二十二）：推理框架-MNN
- 拓端tecdat|使用OpenCV在Python中进行图像处理
- 使用 java -jar命令启动jar包时报不支持的jdk版本异常
- HTML 内容保存到word文档（angular4调用第三方js插件实现）
- 前端基础入门之css动画与变形
- java网络编程Socket客户端给服务器端通信
- 员工未回复群消息全员被罚200元，企业：符合公司规章制度！ 律师回复来了......
- Python笔记_07_列表的相关操作_列表相关函数_深浅拷贝_字典相关函数_集合相关函数_冰冻集合
- 社科院与杜兰大学金融管理硕士项目——有规划的人生值得期待，你当下的规划是什么呢
- 编程初学者必备的基础知识
- 树莓派（USB麦克风和麦克风阵列） 录音和播放
- 《程序员十二时辰》，居然是这样的！内容过于真实 ...
- 1077 Kuchiguse (20point(s)) - C语言 PAT 甲级