前言

本项目所建立的小米官网为高仿,原创不易,麻烦各位多多支持。

一、代码目录

。

二、使用步骤

1.引入库

图标库:

图标库网站:

html代码:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet/less" href="css/123.less" /><script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.1/less.min.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw=="crossorigin="anonymous" referrerpolicy="no-referrer" /><script type="text/javascript" src="js/jquery-3.3.1.min.js"></script><script type="text/javascript" src="js/jquery-1.12.3.min.js"></script></head><body><div class="header"><div class="site-topbar"><div class="container"><div class="topbar-nav"><a href="#">小米商城</a><span class="sep">|</span><a href="#">MIUI</a><span class="sep">|</span><a href="#">loT</a><span class="sep">|</span><a href="#">云服务</a><span class="sep">|</span><a href="#">天星数科</a><span class="sep">|</span><a href="#">有品</a><span class="sep">|</span><a href="#">小爱开放平台</a><span class="sep">|</span><a href="#">企业团购</a><span class="sep">|</span><a href="">资质证照</a><span class="sep">|</span><a href="#">协议规则</a><span class="sep">|</span><a href="#">下载app</a><span class="sep">|</span><a href="#">智能生活</a><span class="sep">|</span><a href="">Select Location</a></div><div class="topbar-cart"><a href=""><i class="fa fa-shopping-cart orange" aria-hidden="true"></i><em class="iconfont-cart"></em>购物车<span>(0)</span></a></div><div class="topbar-info"><a href="">登录</a><span>|</span><a href="">注册</a><span>|</span><span class="message"><a href="">消息通知</a></span></div></div></div><div class="site-header"><div class="container"><div class="header-logo"><a href=""><img src="img/小米.jpg" alt=""></a></div><div class="header-nav"><ul class="clearfix"><li class="nav-category"><a href=""><span>全部商品分类</span></a><div class="site-category" style="display: block;"><ul class="clearfix site-category-list"><li><a href="">手机<i class="fa fa-arrow-right" aria-hidden="true"></i></a></li><li><a href="">电视<i class="fa fa-arrow-right" aria-hidden="true"></i></a></li><li><a href="">笔记本 平板<i class="fa fa-arrow-right" aria-hidden="true"></i></a></li><li><a href="">家电<i class="fa fa-arrow-right" aria-hidden="true"></i></a></li><li><a href="">出行 穿戴<i class="fa fa-arrow-right" aria-hidden="true"></i></a></li><li><a href="">智能 路由器<i class="fa fa-arrow-right" aria-hidden="true"></i></a></li><li><a href="">电源 配件<i class="fa fa-arrow-right" aria-hidden="true"></i></a></li><li><a href="">健康 儿童<i class="fa fa-arrow-right" aria-hidden="true"></i></a></li><li><a href="">耳机 音箱<i class="fa fa-arrow-right" aria-hidden="true"></i></a></li><li><a href="">生活 箱包<i class="fa fa-arrow-right" aria-hidden="true"></i></a></li></ul></div></li><li class="nav-item"><a href=""><span>Xiaomi手机</span></a></li><li class="nav-item"><a href=""><span>Redmi红米</span></a></li><li class="nav-item"><a href=""><span>电视</span></a></li><li class="nav-item"><a href=""><span>平板</span></a></li><li class="nav-item"><a href=""><span>家电</span></a></li><li class="nav-item"><a href=""><span>路由器</span></a></li><li class="nav-item"><a href=""><span>服务</span></a></li><li class="nav-item"><a href=""><span>社区</span></a></li></ul></div><div class="header-search"><form action="" class="clearfix"><a href="#"><input type="search" class="search-header" placeholder="手机"></a><a href="#"><input type="submit" class="search-btn" value=""><i class="fa fa-search"aria-hidden="true"></i></a></form></div></div></div></div><div class="home-hero-container container"><div class="home-hero"><div class="swiper"><ul id="unit"><li><a href=""><img src="img/note11.jpg" alt=""></a></li><li><a href=""><img src="img/年终盛典.jpg" alt=""></a></li><li><a href=""><img src="img/小米笔记本.jpg" alt=""></a></li><li><a href=""><img src="img/智能门铃.jpg" alt=""></a></li></ul><div class="Btn"><a href="javascript:void(0)" id="leftBtn" class="leftBtn">&lt;</a><a href="javascript:void(0)" id="rightBtn" class="rightBtn">&gt;</a></div><div class="circles" id="circles"><ol><li class="cur"></li><li></li><li></li><li></li></ol></div></div><div class="home-hero-sub"><div class="span4"><ul class="clearfix"><li><a href="#"><img src="img/保障服务.png" alt="">保障服务</a></li><li><a href="#"><img src="img/企业团购.png" alt="">企业团购</a></li><li><a href="#"><img src="img/以旧换新.png" alt="">F码通道</a></li><li><a href="#"><img src="img/米粉卡.png" alt="">米粉卡</a></li><li><a href="#"><img src="img/以旧换新.png" alt="">以旧换新</a></li><li><a href="#"><img src="img/话费充值.png" alt="">话费充值</a></li></ul></div><div class="span16"><ul class="clearfix"><li class="first"><a href=""><img src="img/11Ultra.jpg" alt=""></a></li><li><a href=""><img src="img/MIX FOLD.jpg" alt=""></a></li><li><a href=""><img src="img/Redmi Buds3.jpg" alt=""></a></li></ul></div></div></div><div class="tools" id="tools"><a href=""><i class="fa fa-mobile" aria-hidden="true"></i><h3>手机APP</h3><div class="pop-content"><img src="img/关注小米二维码.png" alt=""><span>扫码领取新人百元礼包</span></div></a><a href=""><i class="fa fa-user" aria-hidden="true"></i><h3>个人中心</h3></a><a href=""><i class="fa fa-wrench" aria-hidden="true"></i><h3>售后服务</h3></a><a href=""><i class="fa fa-headphones" aria-hidden="true"></i><h3>人工客服</h3></a><a href=""><i class="fa fa-shopping-cart orange" aria-hidden="true"></i><h3>购物车</h3></a><a href="#top" id="to" style="display: none;"><i class="fa fa-arrow-up" aria-hidden="true"></i><h3>回顶部</h3></a></div></div><div class="page-main"><div class="container"><div class="home-banner-box"><a href=""><img src="img/K40.jpg" alt=""></a></div><div class="home-brick-box"><div class="box-hd"><h2 class="title">手机</h2><div class="more"><a href="">查看更多<i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a></div></div><div class="box-bd clearfix"><div class="row "><div class="span4"><ul class="clearfix"><li class="brick-item"><a href=""><img src="img/LongMix.jpg" alt=""></a></li></ul></div><div class="span16 "><ul class="clearfix"><li class="brick-item "><a href=""><div class="figure"><img src="img/Redmi11%20pro.jpg" alt=""></div><h3 class="title">Redmi Note 11 Pro系列</h3><p class="desc">Redmi Note 11 Pro系列</p><p class="price">1799<span class="num">元</span><span>起</span></p></a></li><li class="brick-item"><a href=""><div class="figure"><img src="img/Redmi%20Note%2011.jpg" alt=""></div><h3 class="title">Redmi Note 11 5G</h3><p class="desc">5000mAh大电量</p><p class="price">1199<span class="num">元</span><span>起</span></p></a></li><li class="brick-item"><a href=""><div class="figure"><img src="img/黑鲨4s.jpg" alt=""></div><h3 class="title">黑鲨4S</h3><p class="desc">磁动力升降肩键</p><p class="price">2699<span class="num">元</span><span>起</span></p></a></li><li class="brick-item"><a href=""><div class="figure"><img src="img/黑鲨4spro.jpg" alt=""></div><h3 class="title">黑鲨4S Pro</h3><p class="desc">磁动力升降肩键</p><p class="price">4799<span class="num">元</span><span>起</span></p></a></li><li class="brick-item"><a href=""><div class="figure"><img src="img/小米CIVI.jpg" alt=""></div><h3 class="title">Xiaomi Civi</h3><p class="desc">3200万高清质感自拍</p><p class="price">2599<span class="num">元</span><span>起</span></p></a></li><li class="brick-item"><a href=""><div class="figure"><img src="img/SmallMix.jpg" alt=""></div><h3 class="title">Xiaomi MIX 4</h3><p class="desc">CUP全面屏</p><p class="price"><span class="num">4999</span>元<span>起</span></p></a></li><li class="brick-item"><a href=""><div class="figure"><img src="img/note10pro.jpg" alt=""></div><h3 class="title">Redmi Note 10 Pro</h3><p class="desc">天玑1100年度旗舰芯</p><p class="price">1499<span class="num">元</span><span>起</span><delstyle="margin-left: 10px;color: #b0b0b0;font-size: 10px;">4999元</del></p></a></li><li class="brick-item"><a href=""><div class="figure"><img src="img/SmallMix.jpg" alt=""></div><h3 class="title">Redmi Note 10 5G</h3><p class="desc">5G小金刚|旗舰长续航</p><p class="price">1099<span class="num">元</span><span>起</span><delstyle="margin-left: 10px;color: #b0b0b0;font-size: 10px;">1699元</del></p></a></li></ul></div></div></div><div class="home-brick-row"><div class="box-hd clearfix"><h2 class="title">智能穿戴</h2><div class="more"><ul class="tab-list"><li class="tab-active">热门</li><li>穿戴</li></ul></div></div><div class="box-bd clearfix"><div class="row "><div class="span4"><ul class="clearfix"><li class="brick-item"><a href=""><img src="img/watch.jpg" alt=""></a></li></ul></div><div class="span16 "><ul class="clearfix"><li class="brick-item "><a href=""><div class="figure"><img src="img/手表2.jpg" alt=""></div><h3 class="title">Redmi 手表 2</h3><p class="desc">AMOLED高清大屏</p><p class="price">389<span class="num">元</span><delstyle="margin-left: 10px;color: #b0b0b0;font-size: 10px;">399元</del></p></a></li><li class="brick-item"><a href=""><div class="figure"><img src="img/手环6.jpg" alt=""></div><h3 class="title">小米手环</h3><p class="desc">全屏实力</p><p class="price">249<span class="num">元</span></p></a></li><li class="brick-item"><a href=""><div class="figure"><img src="img/手表.jpg" alt=""></div><h3 class="title">Redmi 手表</h3><p class="desc">磁吸式充电</p><p class="price">169<span class="num">元</span></p></a></li><li class="brick-item"><a href=""><div class="figure"><img src="img/耳机3.jpg" alt=""></div><h3 class="title">Redmi AirDots 3很无线蓝牙耳机</h3><p class="desc">圈铁音质,超长续航</p><p class="price">199<span class="num">元</span><delstyle="margin-left: 10px;color: #b0b0b0;font-size: 10px;">99元</del></p></a></li><li class="brick-item"><a href=""><div class="figure"><img src="img/耳机3Pro.jpg" alt=""></div><h3 class="title">小米Buds 青春版</h3><p class="desc">轻巧无线 持久动听</p><p class="price">199<span class="num">元</span></p></a></li><li class="brick-item"><a href=""><div class="figure"><img src="img/耳机3Pro青春.jpg" alt=""></div><h3 class="title">Xiaomi MIX 4</h3><p class="desc">CUP全面屏</p><p class="price">99<span class="num">元</span><delstyle="margin-left: 10px;color: #b0b0b0;font-size: 10px;">59元</del></p></a></li><li class="brick-item"><a href=""><div class="figure"><img src="img/Air耳机.jpg" alt=""></div><h3 class="title">Redmi Buds 3 半入耳无线耳机</h3><p class="desc">轻巧入耳,舒适有天分</p><p class="price">299<span class="num">元</span><delstyle="margin-left: 10px;color: #b0b0b0;font-size: 10px;">199元</del></p></a></li><li class="brick-item-s "><a href=""><div class="figure"><i class="fa fa-arrow-right" aria-hidden="true"></i></div><div class="more">浏览更多<small>热门</small></div></a></li></ul></div></div></div></div><div class="home-brick-row-box"><div class="box-hd clearfix"><h2 class="title">家电</h2><div class="more"><ul class="tab-list"><li class="tab-active">热门</li><li>电视影音</li></ul></div></div><div class="box-bd clearfix"><div class="row "><div class="span4"><ul class="clearfix"><li class="brick-item"><a href=""><img src="img/电视6.jpg" alt=""></a></li><li class="brick-item"><a href=""><img src="img/电视77.jpg" alt=""></a></li></ul></div><div class="span16 "><ul class="clearfix"><li class="brick-item "><a href=""><div class="figure"><img src="img/电视6D.jpg" alt=""></div><h3 class="title">小米电视6 65” OLED</h3><p class="desc">小米电视6 65” OLED</p><p class="price">6999<span class="num">元</span><delstyle="margin-left: 10px;color: #b0b0b0;font-size: 10px;">399元</del></p></a></li><li class="brick-item"><a href=""><div class="figure"><img src="img/电视6至尊.jpg" alt=""></div><h3 class="title">小米电视6 至尊版 65英寸</h3><p class="desc">小米电视6 至尊版 65英寸</p><p class="price">7999<span class="num">元</span></p></a></li><li class="brick-item"><a href=""><div class="figure"><img src="img/电视2022.jpg" alt=""></div><h3 class="title">小米电视 ES55 2022款</h3><p class="desc">小米电视 ES55 2022款</p><p class="price">2999<span class="num">元</span></p></a></li><li class="brick-item"><a href=""><div class="figure"><img src="img/冰箱.jpg" alt=""></div><h3 class="title">米家互联网对开门冰箱 540L</h3><p class="desc">米家互联网对开门冰箱 540L</p><p class="price">2899<span class="num">元</span><delstyle="margin-left: 10px;color: #b0b0b0;font-size: 10px;">99元</del></p></a></li><li class="brick-item"><a href=""><div class="figure"><img src="img/电磁炉.jpg" alt=""></div><h3 class="title">米家超薄电磁炉</h3><p class="desc">米家超薄电磁炉</p><p class="price">499<span class="num">元</span></p></a></li><li class="brick-item"><a href=""><div class="figure"><img src="img/扫地机器人.jpg" alt=""></div><h3 class="title">米家集尘扫拖机器人</h3><p class="desc">米家集尘扫拖机器人</p><p class="price">2999<span class="num">元</span><delstyle="margin-left: 10px;color: #b0b0b0;font-size: 10px;">59元</del></p></a></li><li class="brick-item"><a href=""><div class="figure"><img src="img/洗衣机.jpg" alt=""></div><h3 class="title">Redmi全自动波轮洗衣机1A 8kg</h3><p class="desc">Redmi全自动波轮洗衣机1A 8kg</p><p class="price">849<span class="num">元</span><delstyle="margin-left: 10px;color: #b0b0b0;font-size: 10px;">199元</del></p></a></li><li class="brick-item-a"><a href=""><div class="figure"><img width="80" height="80" alt="米家电烤箱"data-src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/1612c93ad4756215774a0dbec7a81bb2.jpg?thumb=1&amp;w=124&amp;h=124&amp;f=webp&amp;q=90"src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/1612c93ad4756215774a0dbec7a81bb2.jpg?thumb=1&amp;w=124&amp;h=124&amp;f=webp&amp;q=90"lazy="loaded"></div><h3 class="title">米家烤电箱</h3><p class="price"><span>299元</span></p></a></li><li class="brick-item-s "><a href=""><div class="figure"><i class="fa fa-arrow-right" aria-hidden="true"></i></div><div class="more">浏览更多<small>热门</small></div></a></li></ul></div></div></div></div><div class="home-brick-row-box"><div class="box-hd clearfix"><h2 class="title">生活电器</h2><div class="more"><ul class="tab-list"><li class="tab-active">扫地机</li><li>空净</li><li>清洁</li><li>风扇</li></ul></div></div><div class="box-bd clearfix"><div class="row "><div class="span4"><ul class="clearfix"><li class="brick-item"><a href=""><img src="img/净化器4.jpg" alt=""></a></li><li class="brick-item"><a href=""><img src="img/拖地机器人.jpg" alt=""></a></li></ul></div><div class="span16 "><ul class="clearfix"><li class="brick-item "><a href=""><div class="figure"><img src="img/拖地机器人2Pro.jpg" alt=""></div><h3 class="title">米家扫拖机器人 2Pro</h3><p class="desc">米家扫拖机器人 2Pro</p><p class="price">2699<span class="num">元</span><delstyle="margin-left: 10px;color: #b0b0b0;font-size: 10px;">399元</del></p></a></li><li class="brick-item"><a href=""><div class="figure"><img src="img/拖地机器人2.jpg" alt=""></div><h3 class="title">米家扫拖机器人 2</h3><p class="desc">米家扫拖机器人 2</p><p class="price">1599<span class="num">元</span></p></a></li><li class="brick-item"><a href=""><div class="figure"><img src="img/扫地机器人.jpg" alt=""></div><h3 class="title">米家集尘扫拖机器人</h3><p class="desc">米家集尘扫拖机器人</p><p class="price">1799<span class="num">元</span></p></a></li><li class="brick-item"><a href=""><div class="figure"><img src="img/扫地机器人1T.jpg" alt=""></div><h3 class="title">米家扫拖机器人 2C</h3><p class="desc">米家扫拖机器人 2C</p><p class="price">1299<span class="num">元</span><delstyle="margin-left: 10px;color: #b0b0b0;font-size: 10px;">99元</del></p></a></li><li class="brick-item"><a href=""><div class="figure"><img src="img/扫地机器人2C.jpg" alt=""></div><h3 class="title">米家扫地机器人1S</h3><p class="desc">米家扫地机器人1S</p><p class="price">1199<span class="num">元</span></p></a></li><li class="brick-item"><a href=""><div class="figure"><img src="img/扫地机器人1S.jpg" alt=""></div><h3 class="title">米家扫拖机器人 G1</h3><p class="desc">米家扫拖机器人 G1</p><p class="price">2199<span class="num">元</span><delstyle="margin-left: 10px;color: #b0b0b0;font-size: 10px;">59元</del></p></a></li><li class="brick-item"><a href=""><div class="figure"><img src="img/扫地机器人G1.jpg" alt=""></div><h3 class="title">米家扫拖机器人1T</h3><p class="desc">米家扫拖机器人1T</p><p class="price">2299<span class="num">元</span><delstyle="margin-left: 10px;color: #b0b0b0;font-size: 10px;">199元</del></p></a></li><li class="brick-item-a"><a href=""><div class="figure"><img width="80" height="80" alt="米家扫拖机器人 Pro"data-src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/3d910c9c340274064a1e784e1d371ce5.jpg?thumb=1&amp;w=124&amp;h=124&amp;f=webp&amp;q=90"src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/3d910c9c340274064a1e784e1d371ce5.jpg?thumb=1&amp;w=124&amp;h=124&amp;f=webp&amp;q=90"lazy="loaded"></div><h3 class="title">米家扫拖机器人 Pro</h3><p class="price"><span>299元</span></p></a></li><li class="brick-item-s "><a href=""><div class="figure"><i class="fa fa-arrow-right" aria-hidden="true"></i></div><div class="more">浏览更多<small>热门</small></div></a></li></ul></div></div></div></div><div class="home-banner-box"><a href=""><img src="img/门铃.jpg" alt=""></a></div><div class="home-brick-row-box"><div class="box-hd clearfix"><h2 class="title">生活电器</h2><div class="more"><ul class="tab-list"><li class="tab-active">扫地机</li><li>空净</li><li>清洁</li><li>风扇</li></ul></div></div><div class="box-bd clearfix"><div class="row "><div class="span4"><ul class="clearfix"><li class="brick-item"><a href=""><img src="img/净化器4.jpg" alt=""></a></li><li class="brick-item"><a href=""><img src="img/拖地机器人.jpg" alt=""></a></li></ul></div><div class="span16 "><ul class="clearfix"><li class="brick-item "><a href=""><div class="figure"><img src="img/拖地机器人2Pro.jpg" alt=""></div><h3 class="title">米家扫拖机器人 2Pro</h3><p class="desc">米家扫拖机器人 2Pro</p><p class="price">2699<span class="num">元</span><delstyle="margin-left: 10px;color: #b0b0b0;font-size: 10px;">399元</del></p></a></li><li class="brick-item"><a href=""><div class="figure"><img src="img/拖地机器人2.jpg" alt=""></div><h3 class="title">米家扫拖机器人 2</h3><p class="desc">米家扫拖机器人 2</p><p class="price">1599<span class="num">元</span></p></a></li><li class="brick-item"><a href=""><div class="figure"><img src="img/扫地机器人.jpg" alt=""></div><h3 class="title">米家集尘扫拖机器人</h3><p class="desc">米家集尘扫拖机器人</p><p class="price">1799<span class="num">元</span></p></a></li><li class="brick-item"><a href=""><div class="figure"><img src="img/扫地机器人1T.jpg" alt=""></div><h3 class="title">米家扫拖机器人 2C</h3><p class="desc">米家扫拖机器人 2C</p><p class="price">1299<span class="num">元</span><delstyle="margin-left: 10px;color: #b0b0b0;font-size: 10px;">99元</del></p></a></li><li class="brick-item"><a href=""><div class="figure"><img src="img/扫地机器人2C.jpg" alt=""></div><h3 class="title">米家扫地机器人1S</h3><p class="desc">米家扫地机器人1S</p><p class="price">1199<span class="num">元</span></p></a></li><li class="brick-item"><a href=""><div class="figure"><img src="img/扫地机器人1S.jpg" alt=""></div><h3 class="title">米家扫拖机器人 G1</h3><p class="desc">米家扫拖机器人 G1</p><p class="price">2199<span class="num">元</span><delstyle="margin-left: 10px;color: #b0b0b0;font-size: 10px;">59元</del></p></a></li><li class="brick-item"><a href=""><div class="figure"><img src="img/扫地机器人G1.jpg" alt=""></div><h3 class="title">米家扫拖机器人1T</h3><p class="desc">米家扫拖机器人1T</p><p class="price">2299<span class="num">元</span><delstyle="margin-left: 10px;color: #b0b0b0;font-size: 10px;">199元</del></p></a></li><li class="brick-item-a"><a href=""><div class="figure"><img width="80" height="80" alt="米家扫拖机器人 Pro"data-src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/3d910c9c340274064a1e784e1d371ce5.jpg?thumb=1&amp;w=124&amp;h=124&amp;f=webp&amp;q=90"src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/3d910c9c340274064a1e784e1d371ce5.jpg?thumb=1&amp;w=124&amp;h=124&amp;f=webp&amp;q=90"lazy="loaded"></div><h3 class="title">米家扫拖机器人 Pro</h3><p class="price"><span>299元</span></p></a></li><li class="brick-item-s "><a href=""><div class="figure"><i class="fa fa-arrow-right" aria-hidden="true"></i></div><div class="more">浏览更多<small>热门</small></div></a></li></ul></div></div></div></div></div></div></div><div><div class="site-footer"><div class="container"><div class="footer-service"><ul class="list-service clearfix"><li><a href=""><i class="fa fa-wrench" aria-hidden="true"></i>预约维修服务</a></li><li><a href=""><i class="fa fa-slideshare" aria-hidden="true"></i>7天无理由退货</a></li><li><a href=""><i class="fa fa-header" aria-hidden="true"></i>15天免费换货</a></li><li><a href=""><i class="fa fa-gift" aria-hidden="true"></i>满69包邮</a></li><li><a href=""><i class="fa fa-map-marker" aria-hidden="true"></i>520余家售后网点</a></li></ul></div><div class="footer-links clearfix"><dl><dt>帮助中心</dt><dd><a href="">账户管理</a></dd><dd><a href="">购物指南</a></dd><dd><a href="">订单操作</a></dd></dl><dl><dt>服务支持</dt><dd><a href="">售后政策</a></dd><dd><a href="">自助服务</a></dd><dd><a href="">相关下载</a></dd></dl><dl><dt>线下门店</dt><dd><a href="">小米之家</a></dd><dd><a href="">服务网点</a></dd><dd><a href="">授权体验店/专区</a></dd></dl><dl><dt>关于小米</dt><dd><a href="">了解小米</a></dd><dd><a href="">加入小米</a></dd><dd><a href="">投资者关系</a></dd><dd><a href="">企业社会责任</a></dd><dd><a href="">廉洁举报</a></dd></dl><dl><dt><a href="">关注我们</a></dt><dd><a href="">新浪微博</a></dd><dd><a href="">官方微信</a></dd><dd><a href="">廉洁举报</a></dd><dd><a href="">联系我们</a></dd></dl><dl><dt>特色服务</dt><dd><a href="">F码通道</a></dd><dd><a href="">礼物码</a></dd><dd><a href="">防伪查询</a></dd></dl><div class="col-contact"><p class="phone">400-100-5678</p><p>8:00-18:00 (仅收市话费)</p><a href="" class="spa"><i class="fa fa-commenting-o" aria-hidden="true"></i>人工客服</a><div class="follow">关注小米:<a href=""><i class="fa fa-weibo" aria-hidden="true"></i></a><a href=""><i class="fa fa-weixin" aria-hidden="true"></i><img src="img/关注小米二维码.png"alt=""></a></div></div></div></div></div><div class="site-info"><div class="container"><div class="logo"><img src="img/小米.jpg" alt="" style="background-color: #fafafa;"></div><div class="info-text"><p class="sites"><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></p><p class="sites"><a href="">北京互联网法院法律服务工作站</a><span>|</span><a href="">中国消费者协会</a><span>|</span><a href="">北京市消费者协会</a></p><p><a href="">@mi.com</a><span>京ICP证110507号</span><a href="">京ICP备10046444号</a><a href="">京公网安备11010802020134号</a><a href="">京网文[2020]0276-042号</a><br><a href="">(京)网械平台备字（2018）第00005号</a><a href="">互联网药品信息服务资格证(京)-非经营性-2014-0090</a><a href="">营业执照</a><a href="">医疗器械质量公告</a><br><a href="">增值电信业务许可证</a><span>网络食品经营备案</span><span>京食药网食备202010048</span><a href="">食品经营许可证</a><br><span>违法和不良信息举报电话：171-5104-4404</span><a href="">知识产权侵权投诉</a><span>本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</span></p><div class="info-links"><a href=""><img src="img/隐私认证.png" alt=""></a><a href=""><img src="img/诚信网站.png" alt=""></a><a href=""><img src="img/可信网站.png" alt=""></a><a href=""><img src="img/诚信经营.png" alt=""></a><a href=""><img src="img/网站安全.png" alt=""></a></div><div class="slogan"><i>让全球每个人都能享受科技带来的美好生活</i></div></div></div></div></div></body>
</html>

css代码:

* {margin: 0;padding: 0;
}
body {font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
}
.clearfix::after {content: "";display: table;clear: both;
}
a {text-decoration: none;
}
div {display: block;
}
ul {list-style: none;
}
li {display: list-item;text-align: -webkit-match-parent;
}
.container {width: 1226px;margin: 0 auto;position: relative;
}
.header {display: block;
}
.header .site-topbar {position: relative;z-index: 30;height: 40px;font-size: 12px;color: #b0b0b0;background: #333;
}
.header .site-topbar .topbar-nav {float: left;height: 40px;line-height: 40px;
}
.header .site-topbar .topbar-nav a {color: #b0b0b0;line-height: 40px;display: inline-block;
}
.header .site-topbar .topbar-nav .sep {margin: 0 0.3em;color: #424242;
}
.header .site-topbar .topbar-cart {position: relative;float: right;width: 120px;height: 40px;margin-left: 15px;transition: all 0.2s;font-size: 12px;
}
.header .site-topbar .topbar-cart a {position: relative;z-index: 32;display: block;height: 40px;line-height: 40px;text-align: center;color: #b0b0b0;background: #424242;
}
.header .site-topbar .topbar-cart a .iconfont-cart {margin-right: 4px;font-size: 20px;line-height: 20px;vertical-align: -4px;
}
.header .site-topbar .topbar-cart a span {line-height: 40px;text-align: center;color: #b0b0b0;
}
.header .site-topbar .topbar-info {position: relative;float: right;height: 40px;line-height: 40px;
}
.header .site-topbar .topbar-info a {padding: 0 5px;text-align: center;float: left;color: #b0b0b0;line-height: 40px;display: inline-block;
}
.header .site-topbar .topbar-info span {margin: 0;float: left;color: #424242;
}
.header .site-topbar .topbar-info .message {float: left;padding: 0 10px;
}
.header .site-topbar .topbar-info .message a {color: #b0b0b0;line-height: 40px;display: inline-block;text-align: none;
}
.header .site-header {position: relative;z-index: 20;height: 100px;
}
.header .site-header .header-logo {float: left;width: 62px;margin-top: 22px;
}
.header .site-header .header-logo a {position: relative;display: block;width: 56px;height: 56px;overflow: hidden;text-align: left;color: #757575;
}
.header .site-header .header-logo a img {padding-bottom: 2px;position: absolute;top: 0;left: -8px;z-index: 1;width: 69px;height: 58px;
}
.header .site-header .header-nav {float: left;width: 850px;
}
.header .site-header .header-nav ul {position: relative;z-index: 10;float: left;width: 1100px;height: 88px;margin: 0;padding: 12px 0 0 30px;font-style: 16px;
}
.header .site-header .header-nav ul .nav-category {position: relative;float: left;width: 127px;height: 548px;padding-right: 15px;
}
.header .site-header .header-nav ul .nav-category a {display: block;padding: 3px 0 38px;color: #333;
}
.header .site-header .header-nav ul .nav-category a span {color: #333;visibility: hidden;
}
.header .site-header .header-nav ul .nav-category .site-category {position: absolute;top: 88px;left: -92px;z-index: 21;width: 234px;height: 460px;font-size: 14px;
}
.header .site-header .header-nav ul .nav-category .site-category .site-category-list {margin: 0;padding: 20px 0;height: 420px;border: 0;color: #fff;width: 234px;background-color: rgba(105, 101, 101, 0.6);
}
.header .site-header .header-nav ul .nav-category .site-category .site-category-list li {height: 42px;color: #fff;
}
.header .site-header .header-nav ul .nav-category .site-category .site-category-list li a {color: #fff;position: relative;display: block;padding-left: 30px;height: 42px;line-height: 42px;
}
.header .site-header .header-nav ul .nav-category .site-category .site-category-list li a .fa-arrow-right {position: absolute;top: 12px;right: 20px;line-height: 16px;color: #e0e0e0;
}
.header .site-header .header-nav ul .nav-item {float: left;
}
.header .site-header .header-nav ul .nav-item a {display: block;padding: 26px 14px 38px;color: #333;transition: color 0.2s;
}
.header .site-header .header-nav ul .nav-item a span {color: #333;
}
.header .site-header .header-search {float: right;width: 296px;margin-top: 25px;
}
.header .site-header .header-search form {position: relative;width: 296px;height: 50px;z-index: 20;display: block;
}
.header .site-header .header-search form a:nth-child(1) {color: #333;
}
.header .site-header .header-search form a:nth-child(1) .search-header {position: absolute;top: 0;right: 51px;z-index: 1;width: 223px;height: 60px;padding: 0 10px;font-size: 14px;line-height: 48px;border: 1px solid #e0e0e0;outline: 0;transition: all 0.2s;
}
.header .site-header .header-search form a:nth-child(2) {color: #333;
}
.header .site-header .header-search form a:nth-child(2) .search-btn {position: absolute;top: 0;right: 0;z-index: 2;width: 52px;height: 60px;padding: 0 10px;font-size: 24px;line-height: 24px;color: #616161;border: 1px solid #e0e0e0;outline: 0;transition: all 0.2s;background: #fff;
}
.header .site-header .header-search form a:nth-child(2) i {position: absolute;top: 22px;right: 18px;z-index: 3;transform: scale(1.5);
}
.home-hero-container {position: relative;z-index: 10;
}
.home-hero-container .home-hero {position: relative;margin-bottom: 206px;
}
.home-hero-container .home-hero .swiper {position: relative;overflow: hidden;width: 1226px;height: 460px;
}
.home-hero-container .home-hero .swiper ul {position: relative;width: 8000px;
}
.home-hero-container .home-hero .swiper ul li {float: left;
}
.home-hero-container .home-hero .swiper ul li a img {display: block;width: 1226px;height: 460px;
}
.home-hero-container .home-hero .Btn a {position: absolute;top: 40%;left: 244px;margin-left: -10px;font-size: 50px;color: #b0b0b0;text-align: center;opacity: 0.8;outline: none;padding-bottom: 5px;
}
.home-hero-container .home-hero .Btn a:hover {background-color: gray;
}
.home-hero-container .home-hero .Btn .rightBtn {left: 97.7%;
}
.home-hero-container .home-hero .circles {position: absolute;left: 95%;bottom: 15px;height: 10px;margin-left: -30px;background-color: rgba(222, 222, 222, 0.4);padding: 5px;border-top-right-radius: 30px;border-bottom-right-radius: 30px;border-top-left-radius: 30px;border-bottom-left-radius: 30px;
}
.home-hero-container .home-hero .circles ol {list-style: none;
}
.home-hero-container .home-hero .circles ol li {float: left;width: 10px;height: 10px;border-radius: 50%;background-color: white;margin-right: 5px;
}
.home-hero-container .home-hero .circles ol .cur {background-color: red;
}
.home-hero-container .home-hero .home-hero-sub {margin-top: 14px;margin-left: -14px;
}
.home-hero-container .home-hero .home-hero-sub .span4 {width: 234px;float: left;margin-left: 14px;min-height: 1px;
}
.home-hero-container .home-hero .home-hero-sub .span4 ul {margin: 0;padding: 3px;font-size: 12px;text-align: center;background: #5f5750;
}
.home-hero-container .home-hero .home-hero-sub .span4 ul li {position: relative;float: left;width: 70px;height: 82px;padding: 0 3px;
}
.home-hero-container .home-hero .home-hero-sub .span4 ul li a {display: block;padding-top: 18px;text-overflow: ellipsis;color: #fff;opacity: 0.7;transition: opacity 0.2s;
}
.home-hero-container .home-hero .home-hero-sub .span4 ul li a img {display: block;width: 24px;height: 24px;margin: 0 auto 4px;border: 0;
}
.home-hero-container .home-hero .home-hero-sub .span4 ul li::before {position: absolute;content: "";background: #665e57;top: -1px;left: 6px;width: 64px;height: 1px;
}
.home-hero-container .home-hero .home-hero-sub .span4 ul li::after {position: absolute;content: "";background: #665e57;top: 6px;left: 0;width: 1px;height: 70px;
}
.home-hero-container .home-hero .home-hero-sub .span16 {width: 978px;float: left;margin-left: 14px;min-height: 1px;
}
.home-hero-container .home-hero .home-hero-sub .span16 ul {margin: 0;padding: 0;
}
.home-hero-container .home-hero .home-hero-sub .span16 ul .first {margin-left: 0;
}
.home-hero-container .home-hero .home-hero-sub .span16 ul li {margin-left: 15px;float: left;width: 316px;height: 170px;
}
.home-hero-container .home-hero .home-hero-sub .span16 ul li a {display: block;height: 170px;color: #757575;
}
.home-hero-container .home-hero .home-hero-sub .span16 ul li a img {display: block;width: 316px;height: 170px;
}
.home-hero-container .tools {position: fixed;right: 0;top: 200px;left: auto;color: #757575;width: 100px;height: 200px;background-color: gray;
}
.home-hero-container .tools a {cursor: default;color: #757575;padding-top: 20px;text-decoration: none;position: relative;display: block;margin-top: -1px;background-color: #fff;border: 1px solid #f5f5f5;text-align: center;
}
.home-hero-container .tools a i {transform: scale(2);opacity: 0.6;
}
.home-hero-container .tools a h3 {opacity: 0.6;padding-top: 15px;padding-bottom: 15px;
}
.home-hero-container .tools a:hover {color: orangered;
}
.home-hero-container .tools a:hover .pop-content {opacity: 1;visibility: visible;
}
.home-hero-container .tools a .pop-content {position: absolute;left: -150px;top: 0;padding: 14px;background: #fff;border: 1px solid #f5f5f5;transition: opacity 0.3s;transform: translateZ(0);opacity: 0;visibility: hidden;
}
.home-hero-container .tools a .pop-content img {display: block;width: 100px;height: 100px;margin: 6px auto;
}
.home-hero-container .tools a .pop-content span {display: block;width: 82px;margin: 14px auto 0;color: #757575;text-align: center;
}
.page-main {padding-top: 4px;padding-bottom: 12px;background: #f5f5f5;
}
.page-main .home-banner-box {height: 120px;margin: 22px 0;overflow: hidden;
}
.page-main .home-banner-box a {color: #757575;
}
.page-main .home-banner-box a img {width: 1226px;height: 120px;-webkit-aspect-ratio: auto 10.21666667;
}
.page-main .home-brick-box {margin-bottom: 8px;
}
.page-main .home-brick-box .box-hd {position: relative;height: 58px;
}
.page-main .home-brick-box .box-hd .title {margin: 0;font-size: 22px;font-weight: 200;line-height: 58px;color: #333;
}
.page-main .home-brick-box .box-hd .more {position: absolute;top: 0;right: 0;
}
.page-main .home-brick-box .box-hd .more a {font-size: 16px;line-height: 58px;color: #424242;transition: all 0.4s;
}
.page-main .home-brick-box .box-hd .more a i {opacity: 0.3;
}
.page-main .home-brick-box .box-bd .row {margin-left: -14px;
}
.page-main .home-brick-box .box-bd .row .span4 {width: 234px;float: left;margin-left: 14px;min-height: 1px;
}
.page-main .home-brick-box .box-bd .row .span4 ul {margin: 0 0 -14px -14px;height: 614px;padding: 0;
}
.page-main .home-brick-box .box-bd .row .span4 ul .brick-item {height: 614px;position: relative;z-index: 1;float: left;width: 234px;margin-left: 14px;margin-bottom: 14px;background: #fff;transition: all 0.2s linear;
}
.page-main .home-brick-box .box-bd .row .span4 ul .brick-item a {display: block;width: 100%;height: 100%;
}
.page-main .home-brick-box .box-bd .row .span4 ul .brick-item a img {width: 234px;height: 614px;border: 0;
}
.page-main .home-brick-box .box-bd .row .span16 {width: 978px;float: left;margin-left: 14px;min-height: 1px;
}
.page-main .home-brick-box .box-bd .row .span16 ul {margin: 0 0 -14px -14px;width: 992px;height: 614px;padding: 0;
}
.page-main .home-brick-box .box-bd .row .span16 ul .brick-item {position: relative;z-index: 1;float: left;width: 234px;margin-left: 14px;margin-bottom: 14px;background: #fff;transition: all 0.2s linear;height: 300px;padding: 0;
}
.page-main .home-brick-box .box-bd .row .span16 ul .brick-item a {display: block;height: 100%;box-sizing: border-box;padding: 20px 0;
}
.page-main .home-brick-box .box-bd .row .span16 ul .brick-item a .figure {width: 160px;height: 160px;margin: 0 auto 18px;
}
.page-main .home-brick-box .box-bd .row .span16 ul .brick-item a .figure img {width: 160px;height: 160px;
}
.page-main .home-brick-box .box-bd .row .span16 ul .brick-item a .title {margin: 0 10px 2px;text-align: center;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;font-size: 14px;font-weight: 400;color: #333;
}
.page-main .home-brick-box .box-bd .row .span16 ul .brick-item a .desc {text-align: center;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;margin: 0 10px 10px;height: 18px;font-size: 12px;color: #b0b0b0;
}
.page-main .home-brick-box .box-bd .row .span16 ul .brick-item a .price {margin: 0 10px 14px;text-align: center;color: #ff6700;
}
.page-main .home-brick-box .home-brick-row {margin-bottom: 8px;
}
.page-main .home-brick-box .home-brick-row .box-hd {position: relative;height: 58px;
}
.page-main .home-brick-box .home-brick-row .box-hd .title {margin: 0;font-size: 22px;font-weight: 200;line-height: 58px;color: #333;
}
.page-main .home-brick-box .home-brick-row .box-hd .more {position: absolute;right: 0;top: 0;
}
.page-main .home-brick-box .home-brick-row .box-hd .more .tab-list {margin: 0;padding: 16px 0;font-size: 16px;
}
.page-main .home-brick-box .home-brick-row .box-hd .more .tab-list .tab-active {color: #ff6700;border-bottom: 2px solid #ff6700;
}
.page-main .home-brick-box .home-brick-row .box-hd .more .tab-list li {cursor: pointer;margin: 0 0 0 30px;display: inline-block;padding: 0;color: #424242;transition: border 0.3s;
}
.page-main .home-brick-box .home-brick-row .box-bd .row {margin-left: -14px;
}
.page-main .home-brick-box .home-brick-row .box-bd .row .span4 {width: 234px;float: left;margin-left: 14px;min-height: 1px;
}
.page-main .home-brick-box .home-brick-row .box-bd .row .span4 ul {margin: 0 0 -14px -14px;height: 614px;padding: 0;
}
.page-main .home-brick-box .home-brick-row .box-bd .row .span4 ul .brick-item {height: 614px;position: relative;z-index: 1;float: left;width: 234px;margin-left: 14px;margin-bottom: 14px;background: #fff;transition: all 0.2s linear;
}
.page-main .home-brick-box .home-brick-row .box-bd .row .span4 ul .brick-item a {display: block;width: 100%;height: 100%;
}
.page-main .home-brick-box .home-brick-row .box-bd .row .span4 ul .brick-item a img {width: 234px;height: 614px;border: 0;
}
.page-main .home-brick-box .home-brick-row .box-bd .row .span16 {width: 978px;float: left;margin-left: 14px;min-height: 1px;
}
.page-main .home-brick-box .home-brick-row .box-bd .row .span16 ul {margin: 0 0 -14px -14px;width: 992px;height: 614px;padding: 0;
}
.page-main .home-brick-box .home-brick-row .box-bd .row .span16 ul .brick-item {position: relative;z-index: 1;float: left;width: 234px;margin-left: 14px;margin-bottom: 14px;background: #fff;transition: all 0.2s linear;height: 300px;padding: 0;
}
.page-main .home-brick-box .home-brick-row .box-bd .row .span16 ul .brick-item a {display: block;height: 100%;box-sizing: border-box;padding: 20px 0;
}
.page-main .home-brick-box .home-brick-row .box-bd .row .span16 ul .brick-item a .figure {width: 160px;height: 160px;margin: 0 auto 18px;
}
.page-main .home-brick-box .home-brick-row .box-bd .row .span16 ul .brick-item a .figure img {width: 160px;height: 160px;
}
.page-main .home-brick-box .home-brick-row .box-bd .row .span16 ul .brick-item a .title {margin: 0 10px 2px;text-align: center;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;font-size: 14px;font-weight: 400;color: #333;
}
.page-main .home-brick-box .home-brick-row .box-bd .row .span16 ul .brick-item a .desc {text-align: center;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;margin: 0 10px 10px;height: 18px;font-size: 12px;color: #b0b0b0;
}
.page-main .home-brick-box .home-brick-row .box-bd .row .span16 ul .brick-item a .price {margin: 0 10px 14px;text-align: center;color: #ff6700;
}
.page-main .home-brick-box .home-brick-row .box-bd .row .span16 ul .brick-item-s {height: 93px;padding-top: 50px;position: relative;z-index: 1;float: left;width: 234px;margin-left: 14px;margin-bottom: 14px;background: #fff;transition: all 0.2s linear;
}
.page-main .home-brick-box .home-brick-row .box-bd .row .span16 ul .brick-item-s a .figure {position: absolute;right: 35px;top: 48px;width: 48px;height: 48px;color: #ff6700;
}
.page-main .home-brick-box .home-brick-row .box-bd .row .span16 ul .brick-item-s a .figure .fa {transform: scale(1.5);text-align: center;background: rgba(200, 191, 194, 0.6);border-radius: 50%;color: orangered;padding: 10px;
}
.page-main .home-brick-box .home-brick-row .box-bd .row .span16 ul .brick-item-s a .more {display: block;margin: 0 110px 0 30px;font-size: 18px;color: #333;
}
.page-main .home-brick-box .home-brick-row .box-bd .row .span16 ul .brick-item-s a .more small {display: block;font-size: 12px;color: #757575;
}
.page-main .home-brick-box .home-brick-row-box {margin-bottom: 8px;
}
.page-main .home-brick-box .home-brick-row-box .box-hd {position: relative;height: 58px;
}
.page-main .home-brick-box .home-brick-row-box .box-hd .title {margin: 0;font-size: 22px;font-weight: 200;line-height: 58px;color: #333;
}
.page-main .home-brick-box .home-brick-row-box .box-hd .more {position: absolute;right: 0;top: 0;
}
.page-main .home-brick-box .home-brick-row-box .box-hd .more .tab-list {margin: 0;padding: 16px 0;font-size: 16px;
}
.page-main .home-brick-box .home-brick-row-box .box-hd .more .tab-list .tab-active {color: #ff6700;border-bottom: 2px solid #ff6700;
}
.page-main .home-brick-box .home-brick-row-box .box-hd .more .tab-list li {cursor: pointer;margin: 0 0 0 30px;display: inline-block;padding: 0;color: #424242;transition: border 0.3s;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row {margin-left: -14px;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span4 {width: 234px;float: left;margin-left: 14px;min-height: 1px;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span4 ul {margin: 0 0 -14px -14px;height: 614px;padding: 0;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span4 ul .brick-item {height: 300px;position: relative;z-index: 1;float: left;width: 234px;margin-left: 14px;margin-bottom: 14px;background: #fff;transition: all 0.2s linear;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span4 ul .brick-item a {display: block;width: 100%;height: 100%;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span4 ul .brick-item a img {width: 234px;height: 300px;border: 0;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span16 {width: 978px;float: left;margin-left: 14px;min-height: 1px;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span16 ul {margin: 0 0 -14px -14px;width: 992px;height: 614px;padding: 0;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span16 ul .brick-item {position: relative;z-index: 1;float: left;width: 234px;margin-left: 14px;margin-bottom: 14px;background: #fff;transition: all 0.2s linear;height: 300px;padding: 0;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span16 ul .brick-item a {display: block;height: 100%;box-sizing: border-box;padding: 20px 0;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span16 ul .brick-item a .figure {width: 160px;height: 160px;margin: 0 auto 18px;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span16 ul .brick-item a .figure img {width: 160px;height: 160px;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span16 ul .brick-item a .title {margin: 0 10px 2px;text-align: center;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;font-size: 14px;font-weight: 400;color: #333;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span16 ul .brick-item a .desc {text-align: center;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;margin: 0 10px 10px;height: 18px;font-size: 12px;color: #b0b0b0;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span16 ul .brick-item a .price {margin: 0 10px 14px;text-align: center;color: #ff6700;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span16 ul .brick-item-a {height: 93px;padding-top: 50px;position: relative;z-index: 1;float: left;width: 234px;margin-left: 14px;margin-bottom: 14px;background: #fff;transition: all 0.2s linear;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span16 ul .brick-item-a a .figure {position: absolute;right: 20px;top: 32px;width: 80px;height: 80px;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span16 ul .brick-item-a a .title {color: #333;margin: -10px 110px 5px 30px;font-size: 14px;font-weight: 400;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span16 ul .brick-item-a a .price {margin: 0 110px 0 30px;font-size: 12px;color: #ff6700;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span16 ul .brick-item-s {height: 93px;padding-top: 50px;position: relative;z-index: 1;float: left;width: 234px;margin-left: 14px;margin-bottom: 14px;background: #fff;transition: all 0.2s linear;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span16 ul .brick-item-s a .figure {position: absolute;right: 35px;top: 48px;width: 48px;height: 48px;color: #ff6700;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span16 ul .brick-item-s a .figure .fa {transform: scale(1.5);text-align: center;background: rgba(200, 191, 194, 0.6);border-radius: 50%;color: orangered;padding: 10px;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span16 ul .brick-item-s a .more {display: block;margin: 0 110px 0 30px;font-size: 18px;color: #333;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span16 ul .brick-item-s a .more small {display: block;font-size: 12px;color: #757575;
}
.site-footer .footer-service {padding: 27px 0;border-bottom: 1px solid #e0e0e0;
}
.site-footer .footer-service .list-service {margin: 0;padding: 0;
}
.site-footer .footer-service .list-service li:first-child {border-left: 0;
}
.site-footer .footer-service .list-service li {float: left;width: 19.8%;height: 25px;font-size: 16px;line-height: 25px;text-align: center;border-left: 1px solid #e0e0e0;
}
.site-footer .footer-service .list-service li a {color: #616161;transition: color 0.2s;
}
.site-footer .footer-links {padding: 40px 0;
}
.site-footer .footer-links dl {float: left;width: 160px;margin: 0;
}
.site-footer .footer-links dl dt {margin: -1px 0 26px;font-size: 14px;line-height: 1.25;color: #424242;
}
.site-footer .footer-links dl dd {margin: 10px 0 0;font-size: 12px;
}
.site-footer .footer-links dl dd a {color: #616161;
}
.site-footer .footer-links dl dd a:hover {color: orangered;
}
.site-footer .footer-links .col-contact {float: right;width: 251px;border-left: 1px solid #e0e0e0;text-align: center;color: #616161;
}
.site-footer .footer-links .col-contact .phone {font-size: 22px;line-height: 1;color: #ff6700;
}
.site-footer .footer-links .col-contact p {margin: 0 0 15px 0;font-size: 12px;
}
.site-footer .footer-links .col-contact .spa {padding: 10px 20px;color: #ff6700;background-color: #fff;width: 118px;height: 28px;font-size: 12px;line-height: 28px;display: inline-block;margin: 0;padding: 0;border: 1px solid #ff6700;text-align: center;cursor: pointer;transition: all 0.4s;
}
.site-footer .footer-links .col-contact .spa:hover {background-color: orangered;color: white;
}
.site-footer .footer-links .col-contact .spa:hover i {color: white;
}
.site-footer .footer-links .col-contact .spa i {color: #ff6700;
}
.site-footer .footer-links .col-contact .follow {font-size: 12px;margin-top: 20px;position: relative;
}
.site-footer .footer-links .col-contact .follow a {text-decoration: none;
}
.site-footer .footer-links .col-contact .follow a:hover {color: orangered;
}
.site-footer .footer-links .col-contact .follow a img {position: absolute;width: 80px;height: 80px;top: 20px;left: 100px;
}
.site-footer .footer-links .col-contact .follow a i {color: #757575;transform: scale(1.5);margin-left: 8px;margin-top: -3px;
}
.site-footer .footer-links .col-contact .follow a:nth-child(2) img {display: none;
}
.site-footer .footer-links .col-contact .follow a:nth-child(2):hover img {display: block;
}
.site-info {padding: 30px 0;position: relative;background: white;
}
.site-info .logo {position: absolute ;top: 0;left: -15px;display: block;
}
.site-info .logo img {width: 80px;height: 65px;
}
.site-info .info-text {color: #b0b0b0;padding-left: 67px;
}
.site-info .info-text .sites {margin: 0;line-height: 18px;
}
.site-info .info-text .sites a {color: #757575;
}
.site-info .info-text .sites a span {margin: 0;font-family: sans-serif;
}
.site-info .info-text .sites a:hover {color: orangered;
}
.site-info .info-text p {margin: 0;line-height: 18px;
}
.site-info .info-text p a {color: #b0b0b0;
}
.site-info .info-text p a:hover {color: orangered;
}
.site-info .info-text p span {color: #b0b0b0;
}
.site-info .info-text .info-links {height: 28px;margin: 4px 0 15px;
}
.site-info .info-text .info-links a {display: inline-block;
}
.site-info .info-text .info-links a img {width: auto;height: 28px;margin-left: 0;
}
.site-info .info-text .slogan {clear: both;margin: 30px auto 0;width: 40%;height: 19px;display: block;text-align: left;color: #b0b0b0;font-size: 17px;opacity: 0.6;
}

JS代码:

<script>var $tpbox = $(".swiper");var $unit = $("#unit");var $tpboxLis = $("#circles li");var $leftBtn = $(".leftBtn");var $rightBtn = $(".rightBtn");var num = $unit.children("li").length;$unit.children("li:first").clone().appendTo($unit);var time = setInterval(rightBtnHandler, 2000);$tpbox.mouseenter(function() {clearInterval(time);});$tpbox.mouseleave(function() {time = setInterval(rightBtnHandler, 2000);});var idx = 0;$rightBtn.click(rightBtnHandler);function rightBtnHandler() {if ($unit.is(":animated")) {return;}idx++;$unit.animate({left: idx * -1226}, 500, function() {if (idx > num - 1) {idx = 0;$unit.css("left", 0);}});var i = idx <= num - 1 ? idx : 0;$tpboxLis.eq(i).addClass("cur").siblings().removeClass("cur");}$leftBtn.click(function() {if ($unit.is(":animated")) {return;}idx--;if (idx < 0) {idx = num - 1;$unit.css("left", num * -1226);}$unit.animate({left: idx * -1226}, 500);$tpboxLis.eq(idx).addClass("cur").siblings().removeClass("cur");});$tpboxLis.mouseenter(function() {idx = $(this).index();$unit.stop(true).animate({"left": idx * -1226}, 500);$tpboxLis.eq(idx).addClass("cur").siblings().removeClass("cur");});</script>

总结

本文所需要jquery的库，需要的可以后台留言我发给你们。原创不易,多多支持。

html+CSS+JS实现小米官网(附全部代码)相关推荐

web网页设计与制作-html+css+js实现企业官网展示
web网页设计与制作-html+css+js实现企业官网展示主要使用原生HTML.CSS.JavaScript编写的一个静态企业官网展示类型的网站. 文件目录 assets:静态资源目录: favi ...
前端搭建（HTML+CSS+JS）游戏官网（或其它）页面------实例与代码（示例：游戏官网界面）
前端搭建(HTML+CSS+JS)游戏官网(或其它)页面------实例与代码(示例:游戏官网界面) 注意:网页中的示例图片均出自米哈游–原神官网设计,如侵权,联系博主立马进行删除. 目标:网页实现前 ...
Html5+Css实战前端小米官网左侧导航（思路+详解+素材）
实战后的效果大家好,我是小叶同学,如今都大二了,跟着学校老师只学到皮毛,不如自己自学,说起来也惭愧,今天实战Html+CSS小米官网左侧导航开发,后面也会一点点对小米官网全部开发,欢迎前来坐坐沙发 ...
美团html页面代码,html+css+js制作美团官网
[实例简介] 该美团官网用html+css+js实现,对于前端新手来说,也可以去找类似的官网练练手,对自己帮助还是很大的,其中的很多细节错误都可以在锻炼中修改.希望该项目对大家有帮助,下载了的朋友顺便 ...
html css js项目总结-官网
项目介绍:官网展示技术点:js,html,css,swiper轮播,pdjjs文档在页面预览加载首页: 1布局场景一.左边img 中间是两头虚线中间实线右边文字结构如下:<div cla ...
html+css+js 复现阴阳师官网，练手作
1.header部分 2. 首页 3.平安世界 4.游戏攻略 5.同人手账 6.同人大触,视听盛宴 7.泛娱乐 8.京都商业街 9.二维码,小神乐 10.footer 代码获取: git clone ...
html+css 简单的静态网页小米官网
html+css简单静态小米官网把之前做的改进了一下,其他的都是一样的布局效果图: 新增了一些字体文件不多说上代码 HTML代码: ```html <!DOCTYPE html> & ...
小米官网首屏纯css代码
小米官网首屏代码(纯CSS编写) ** 1.html部分: ** 小米商城  <div class="top-bar w"> ...
html制作小米官网代码,仿小米官网(html+js+css)
[实例简介] 学习前端知识时写的一个仿小米官网的一些页面+css样式+js验证代码 [实例截图] [核心代码] 小米官网(高仿) └── xiaomi ├── css_1 │ ├── financ ...
html css 模仿小米官网搜索框
写网页效果,掌握html,css,唯一的捷径就是多模仿,多练习.小米官网的搜索框效果看似简单,实际写代码的时候才发现要掌握好多css知识才能完成效果.浮动.导航条.鼠标经过.定位.文字框效果实现.js ...

html+CSS+JS实现小米官网(附全部代码)

文章目录

前言

一、代码目录

二、使用步骤

1.引入库

总结

html+CSS+JS实现小米官网(附全部代码)相关推荐

最新文章

热门文章