链接：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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="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="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="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="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="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="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="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="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="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="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="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="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="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="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="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="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="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="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b883131e62133041d7ac8272c17762b0.webp" alt="">
<span>Xiaomi 12S</span>
</a>
</li>
<li>
<a href="#">
<img src="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="images/290270b6fc499fc5fcb653417e99fe91.jpg" alt=""></a></div>
<div class="adv-img"><a href="#"><img src="images/5d1892854c8bb165e755d68bde287d71.jpg" alt=""></a></div>
<div class="adv-img"><a href="#"><img src="images/28c13d0d11b38ec17fa5d83bc6ba5912.jpg" alt=""></a></div>
</div>
</div>
<!-- 广告部分结束 -->
<!-- 主体开始 -->
<div class="container">
<div class="wrap">
<!-- 手机开始 -->
<div class="phone">
<div class="home-banner-box"><img src="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="images/6b99bcb716c8f76e1fc5475172bdfc27.webp" alt="" width="234px" height="614px"></a></div>
<div class="phone-box-right">
<ul>
<li class="items">
<a href="#"><img src="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="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="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="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="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="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="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="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="images/3d47879ec183e25a36e67e0219636e60.webp" alt="" width="234px" height="300px"></a></li>
<li class="items"><a href="#"><img src="images/229bbaccda43f32f464c0a810b800106.webp" alt="" width="234px" height="300px"></a></li>
</ul>
</div>
<div class="elc-right">
<ul>
<li class="items">
<a href="#">
<img src="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="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="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="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="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="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="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="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="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="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="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="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="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="images/truste.png" alt="" width="83px" height="28px"></a>
<a href=""><img src="images/v-logo-2.png" alt="" width="83px" height="28px"></a>
<a href=""><img src="images/icon3.png" alt="" width="83px" height="28px"></a>
<a href=""><img src="images/ba10428a4f9495ac310fd0b5e0cf8370.png" alt="" width="83px" height="28px"></a>
<a href=""><img src="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-阿里巴巴矢量图标库
421
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
