实现的地址：https://www.mi.com/
源码连接：
链接：https://pan.baidu.com/s/1S-dCsY3lCfKQrrN0m6-kmw
提取码：9zgf
复制这段内容后打开百度网盘手机App，操作更方便哦

文章目录

  • 一、❤ ❤实现结果
  • 二、❤ ❤导航栏布局
  • 三、❤ ❤代码
    • 1.html代码（1328行）
    • 2.JS代码
    • 3.css代码
  • ❤ ❤总结
    • 1.新学习到的知识点：

一、❤ ❤实现结果

二、❤ ❤导航栏布局

三、❤ ❤代码

1.html代码（1328行）

<!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>小米商城</title><link rel="stylesheet" href="css/mi.css"><link rel="icon shortcut" href="./img/xiaomi.png" ></head>
<body><!-- 第一部分 --><div class="header"><div class="site-topbar"><div class="container"><div class="topbar-nav"><a rel="nofollow" href="">小米商城</a> <span class="sep">|</span><a rel="nofollow" href=""   >MIUI</a> <span class="sep">|</span> <a rel="nofollow" href=""   >IoT</a> <span class="sep">|</span> <a rel="nofollow" href=""   >云服务</a> <span class="sep">|</span> <a rel="nofollow" href=""   >天星数科</a> <span class="sep">|</span> <a rel="nofollow" href=""   >有品</a> <span class="sep">|</span> <a rel="nofollow" href=""   >小爱开放平台</a> <span class="sep">|</span> <a rel="nofollow" href=""   >企业团购</a> <span class="sep">|</span> <a rel="nofollow" href=""   >资质证照</a> <span class="sep">|</span> <a rel="nofollow" href=""   >协议规则</a> <span class="sep">|</span> <a rel="nofollow" class="erweima" href="">下载app<span class="appcode"> 小米商城APP</span><img src="./img/erweima.png"> </a><span class="sep">|</span> <a rel="nofollow">智能生活</a> <span class="sep">|</span> <a rel="nofollow" href="javascript:;">Select Location</a></div><div class="topbar-cart"><img src="img/topbar-carticon.png" class="topbar-carticon" alt=""><a>购物车</a><div>购物车还没有商品，赶紧选购吧！</div></div><div class="topbar-info"><a href="">登录</a><span class="sep" >|</span><a href="">注册</a><span class="sep">|</span><a href="">消息通知</a></div></div></div><div class="site-header"><div class="container"><div class="header-logo"><img src="img/site-header-logo.png" class="logo" alt="" title="小米官网"></div><div class="header-nav"><ul class="nav-list"><li class="nav-category"><a href="" class="link-category"><span>全部商品分类</span></a><div class="site-category" style="display: block;" ><ul class="site-category-list"><li class="category-item"><a href="">手机&nbsp;电话卡<img class="img" src="./img/xiangyou.png" alt=""></a><!-- 第一个 --><div ><ul class="category-item-detail"><li><img src="./img/m2.png" alt=""><span>小米MIX&nbsp;FOLD</span></li><li><img src="./img/m2.png" alt=""><span>小米MIX&nbsp;FOLD</span></li><li><img src="./img/m2.png" alt=""><span>小米MIX&nbsp;FOLD</span></li><li><img src="./img/m2.png" alt=""><span>小米MIX&nbsp;FOLD</span></li><li><img src="./img/m2.png" alt=""><span>小米MIX&nbsp;FOLD</span></li><li><img src="./img/m2.png" alt=""><span>小米MIX&nbsp;FOLD</span></li><li><img src="./img/m2.png" alt=""><span>小米MIX&nbsp;FOLD</span></li><li><img src="./img/m2.png" alt=""><span>小米MIX&nbsp;FOLD</span></li><li><img src="./img/m2.png" alt=""><span>小米MIX&nbsp;FOLD</span></li><li><img src="./img/m2.png" alt=""><span>小米MIX&nbsp;FOLD</span></li><li><img src="./img/m2.png" alt=""><span>小米MIX&nbsp;FOLD</span></li><li><img src="./img/m2.png" alt=""><span>小米MIX&nbsp;FOLD</span></li><li><img src="./img/m2.png" alt=""><span>小米MIX&nbsp;FOLD</span></li><li><img src="./img/m2.png" alt=""><span>小米MIX&nbsp;FOLD</span></li><li><img src="./img/m2.png" alt=""><span>小米MIX&nbsp;FOLD</span></li><li><img src="./img/m2.png" alt=""><span>小米MIX&nbsp;FOLD</span></li><li><img src="./img/m2.png" alt=""><span>小米MIX&nbsp;FOLD</span></li></ul></div></li><li class="category-item"><a href="">电视盒子<img class="img" src="./img/xiangyou.png" alt=""></a><div ><ul class="category-item-detail"><li><img src="./img/tv.png" alt=""><span>小米MIX&nbsp;FOLD</span></li><li><img src="./img/tv.png" alt=""><span>小米MIX&nbsp;FOLD</span></li><li><img src="./img/tv.png" alt=""><span>小米MIX&nbsp;FOLD</span></li><li><img src="./img/tv.png" alt=""><span>小米MIX&nbsp;FOLD</span></li><li><img src="./img/tv.png" alt=""><span>小米MIX&nbsp;FOLD</span></li><li><img src="./img/tv.png" alt=""><span>小米MIX&nbsp;FOLD</span></li><li><img src="./img/tv.png" alt=""><span>小米MIX&nbsp;FOLD</span></li><li><img src="./img/tv.png" alt=""><span>小米MIX&nbsp;FOLD</span></li><li><img src="./img/tv.png" alt=""><span>小米MIX&nbsp;FOLD</span></li><li><img src="./img/tv.png" alt=""><span>小米MIX&nbsp;FOLD</span></li><li><img src="./img/tv.png" alt=""><span>小米MIX&nbsp;FOLD</span></li><li><img src="./img/tv.png" alt=""><span>小米MIX&nbsp;FOLD</span></li><li><img src="./img/tv.png" alt=""><span>小米MIX&nbsp;FOLD</span></li><li><img src="./img/tv.png" alt=""><span>小米MIX&nbsp;FOLD</span></li><li><img src="./img/tv.png" alt=""><span>小米MIX&nbsp;FOLD</span></li><li><img src="./img/tv.png" alt=""><span>小米MIX&nbsp;FOLD</span></li><li><img src="./img/tv.png" alt=""><span>小米MIX&nbsp;FOLD</span></li></ul></div></li><li class="category-item"><a href="">笔记本&nbsp;显示器<img class="img" src="./img/xiangyou.png" alt=""></a><!-- 第三个 --><div ><ul class="category-item-detail"><li><img src="./img/m3.png" alt=""><span>RedmiBook&nbsp;Pro&nbsp;14&nbsp;锐龙版</span></li><li><img src="./img/m4.png" alt=""><span>RedmiBook&nbsp;Pro&nbsp;14&nbsp;锐龙版</span></li><li><img src="./img/m5.png" alt=""><span>RedmiBook&nbsp;Pro&nbsp;14&nbsp;锐龙版</span></li><li><img src="./img/m6.png" alt=""><span>RedmiBook&nbsp;Pro&nbsp;14&nbsp;锐龙版</span></li><li><img src="./img/m7.png" alt=""><span>RedmiBook&nbsp;Pro&nbsp;14&nbsp;锐龙版</span></li><li><img src="./img/m8.png" alt=""><span>RedmiBook&nbsp;Pro&nbsp;14&nbsp;锐龙版</span></li><li><img src="./img/m9.png" alt=""><span>RedmiBook&nbsp;Pro&nbsp;14&nbsp;锐龙版</span></li><li><img src="./img/m10.png" alt=""><span>RedmiBook&nbsp;Pro&nbsp;14&nbsp;锐龙版</span></li><li><img src="./img/m11.png" alt=""><span>RedmiBook&nbsp;Pro&nbsp;14&nbsp;锐龙版</span></li><li><img src="./img/m5.png" alt=""><span>RedmiBook&nbsp;Pro&nbsp;14&nbsp;锐龙版</span></li><li><img src="./img/m6.png" alt=""><span>RedmiBook&nbsp;Pro&nbsp;14&nbsp;锐龙版</span></li><li><img src="./img/m7.png" alt=""><span>RedmiBook&nbsp;Pro&nbsp;14&nbsp;锐龙版</span></li><li><img src="./img/m8.png" alt=""><span>RedmiBook&nbsp;Pro&nbsp;14&nbsp;锐龙版</span></li><li><img src="./img/m9.png" alt=""><span>RedmiBook&nbsp;Pro&nbsp;14&nbsp;锐龙版</span></li><li><img src="./img/m10.png" alt=""><span>RedmiBook&nbsp;Pro&nbsp;14&nbsp;锐龙版</span></li><li><img src="./img/m11.png" alt=""><span>RedmiBook&nbsp;Pro&nbsp;14&nbsp;锐龙版</span></li><li><img src="./img/m4.png" alt=""><span>RedmiBook&nbsp;Pro&nbsp;14&nbsp;锐龙版</span></li></ul></div></li><li class="category-item"><a href="">家电&nbsp;插线板<img class="img" src="./img/xiangyou.png" alt=""></a><!-- 第四个 --><div ><ul class="category-item-detail"><li><img src="./img/j1.png" alt=""><span>立式空调</span></li><li><img src="./img/j2.png" alt=""><span>立式空调</span></li><li><img src="./img/j3.png" alt=""><span>立式空调</span></li><li><img src="./img/j4.png" alt=""><span>立式空调</span></li><li><img src="./img/j5.png" alt=""><span>立式空调</span></li><li><img src="./img/j6.png" alt=""><span>立式空调</span></li><li><img src="./img/j7.jpg" alt=""><span>立式空调</span></li><li><img src="./img/j8.jpg" alt=""><span>立式空调</span></li><li><img src="./img/j9.jpg" alt=""><span>立式空调</span></li><li><img src="./img/j10.png" alt=""><span>立式空调</span></li><li><img src="./img/j11.png" alt=""><span>立式空调</span></li><li><img src="./img/j1.png" alt=""><span>立式空调</span></li><li><img src="./img/j9.jpg" alt=""><span>立式空调</span></li><li><img src="./img/j8.jpg" alt=""><span>立式空调</span></li><li><img src="./img/j7.jpg" alt=""><span>立式空调</span></li><li><img src="./img/j6.png" alt=""><span>立式空调</span></li><li><img src="./img/j5.png" alt=""><span>立式空调</span></li></ul></div></li><li class="category-item"><a href="">出行&nbsp;穿戴<img class="img" src="./img/xiangyou.png" alt=""></a><!-- 第五个 --><div ><ul class="category-item-detail"><li><img src="./img/c1.webp" alt=""><span>小米手环</span></li><li><img src="./img/c2.jpg" alt=""><span>小米手环</span></li><li><img src="./img/c3.jpg" alt=""><span>小米手环</span></li><li><img src="./img/c4.webp" alt=""><span>小米手环</span></li><li><img src="./img/c5.jpg" alt=""><span>小米手环</span></li><li><img src="./img/C6.jpg" alt=""><span>小米手环</span></li><li><img src="./img/c7.webp" alt=""><span>小米手环</span></li><li><img src="./img/c8.webp" alt=""><span>小米手环</span></li><li><img src="./img/c9.webp" alt=""><span>小米手环</span></li><li><img src="./img/c10.jpg" alt=""><span>小米手环</span></li><li><img src="./img/c11.webp" alt=""><span>小米手环</span></li><li><img src="./img/c1.webp" alt=""><span>小米手环</span></li><li><img src="./img/c2.jpg" alt=""><span>小米手环</span></li><li><img src="./img/c3.jpg" alt=""><span>小米手环</span></li><li><img src="./img/c4.webp" alt=""><span>小米手环</span></li><li><img src="./img/c5.jpg" alt=""><span>小米手环</span></li><li><img src="./img/C6.jpg" alt=""><span>小米手环</span></li></ul></div></li><li class="category-item"><a href="">智能&nbsp;路由器<img class="img" src="./img/xiangyou.png" alt=""></a><!-- 第六个 --><div ><ul class="category-item-detail"><li><img src="./img/z1.jpg" alt=""><span>打印机</span></li><li><img src="./img/z2.jpg" alt=""><span>打印机</span></li><li><img src="./img/z3.webp" alt=""><span>打印机</span></li><li><img src="./img/z4.jpg" alt=""><span>打印机</span></li><li><img src="./img/z6.webp" alt=""><span>打印机</span></li><li><img src="./img/z7.webp" alt=""><span>打印机</span></li><li><img src="./img/z8.png" alt=""><span>打印机</span></li><li><img src="./img/z9.webp" alt=""><span>打印机</span></li><li><img src="./img/z1.jpg" alt=""><span>打印机</span></li><li><img src="./img/z2.jpg" alt=""><span>打印机</span></li><li><img src="./img/z3.webp" alt=""><span>打印机</span></li><li><img src="./img/z4.jpg" alt=""><span>打印机</span></li><li><img src="./img/z6.webp" alt=""><span>打印机</span></li><li><img src="./img/z7.webp" alt=""><span>打印机</span></li><li><img src="./img/z8.png" alt=""><span>打印机</span></li><li><img src="./img/z9.webp" alt=""><span>打印机</span></li><li><img src="./img/z1.jpg" alt=""><span>打印机</span></li></ul></div></li><li class="category-item"><a href="">电源&nbsp;配件<img class="img" src="./img/xiangyou.png" alt=""></a><!-- 第七个 --><div><ul class="category-item-detail"><li><img src="./img/d1.webp" alt=""><span>移动电源</span></li><li><img src="./img/d2.jpg" alt=""><span>移动电源</span></li><li><img src="./img/d3.jpg" alt=""><span>移动电源</span></li><li><img src="./img/d4.jpg" alt=""><span>移动电源</span></li><li><img src="./img/d5.jpg" alt=""><span>移动电源</span></li><li><img src="./img/d6.jpg" alt=""><span>移动电源</span></li><li><img src="./img/d7.jpg" alt=""><span>移动电源</span></li><li><img src="./img/d1.webp" alt=""><span>移动电源</span></li><li><img src="./img/d2.jpg" alt=""><span>移动电源</span></li><li><img src="./img/d3.jpg" alt=""><span>移动电源</span></li><li><img src="./img/d4.jpg" alt=""><span>移动电源</span></li><li><img src="./img/d5.jpg" alt=""><span>移动电源</span></li><li><img src="./img/d6.jpg" alt=""><span>移动电源</span></li><li><img src="./img/d7.jpg" alt=""><span>移动电源</span></li></ul></div></li><li class="category-item"><a href="">健康&nbsp;儿童<img class="img" src="./img/xiangyou.png" alt=""></a><!-- 第八个 --><div><ul class="category-item-detail"><li><img src="./img/t1.jpg" alt=""><span>益智积木</span></li><li><img src="./img/t2.jpg" alt=""><span>益智积木</span></li><li><img src="./img/t3.webp" alt=""><span>益智积木</span></li><li><img src="./img/t4.webp" alt=""><span>益智积木</span></li><li><img src="./img/t5.webp" alt=""><span>益智积木</span></li><li><img src="./img/t6.jpg" alt=""><span>益智积木</span></li><li><img src="./img/t7.jpg" alt=""><span>益智积木</span></li><li><img src="./img/t1.jpg" alt=""><span>益智积木</span></li><li><img src="./img/t2.jpg" alt=""><span>益智积木</span></li><li><img src="./img/t3.webp" alt=""><span>益智积木</span></li><li><img src="./img/t4.webp" alt=""><span>益智积木</span></li><li><img src="./img/t5.webp" alt=""><span>益智积木</span></li><li><img src="./img/t6.jpg" alt=""><span>益智积木</span></li><li><img src="./img/t7.jpg" alt=""><span>益智积木</span></li></ul></li><li class="category-item"><a href="">耳机&nbsp;音箱<img class="img" src="./img/xiangyou.png" alt=""></a><!-- 第九个 --><div><ul class="category-item-detail"><li><img src="./img/y1.webp" alt=""><span>益智积木</span></li><li><img src="./img/y2.webp" alt=""><span>益智积木</span></li><li><img src="./img/y3.webp" alt=""><span>益智积木</span></li><li><img src="./img/y4.webp" alt=""><span>益智积木</span></li><li><img src="./img/y1.webp" alt=""><span>益智积木</span></li><li><img src="./img/y2.webp" alt=""><span>益智积木</span></li><li><img src="./img/y3.webp" alt=""><span>益智积木</span></li><li><img src="./img/y4.webp" alt=""><span>益智积木</span></li><li><img src="./img/y1.webp" alt=""><span>益智积木</span></li><li><img src="./img/y2.webp" alt=""><span>小米音箱</span></li><li><img src="./img/y3.webp" alt=""><span>小米音箱</span></li><li><img src="./img/y4.webp" alt=""><span>小米音箱</span></li><li><img src="./img/y1.webp" alt=""><span>小米音箱</span></li><li><img src="./img/y2.webp" alt=""><span>小米音箱</span></li><li><img src="./img/y3.webp" alt=""><span>小米音箱</span></li><li><img src="./img/y4.webp" alt=""><span>小米音箱</span></li></ul></li><li class="category-item"><a href="">生活&nbsp;箱包<img class="img" src="./img/xiangyou.png" alt=""></a><!-- 第十个 --><div><ul class="category-item-detail"><li><img src="./img/s1.webp" alt=""><span>旅行包</span></li><li><img src="./img/s2.jpg" alt=""><span>旅行包</span></li><li><img src="./img/s3.webp" alt=""><span>旅行包</span></li><li><img src="./img/s4.png" alt=""><span>旅行包</span></li><li><img src="./img/s5.webp" alt=""><span>旅行包</span></li><li><img src="./img/s6.jpg" alt=""><span>旅行包</span></li><li><img src="./img/s1.webp" alt=""><span>旅行包</span></li><li><img src="./img/s2.jpg" alt=""><span>旅行包</span></li><li><img src="./img/s3.webp" alt=""><span>旅行包</span></li><li><img src="./img/s4.png" alt=""><span>旅行包</span></li><li><img src="./img/s5.webp" alt=""><span>旅行包</span></li><li><img src="./img/s6.jpg" alt=""><span>旅行包</span></li><li><img src="./img/s1.webp" alt=""><span>旅行包</span></li><li><img src="./img/s2.jpg" alt=""><span>旅行包</span></li><li><img src="./img/s3.webp" alt=""><span>旅行包</span></li><li><img src="./img/s4.png" alt=""><span>旅行包</span></li><li><img src="./img/s5.webp" alt=""><span>旅行包</span></li><li><img src="./img/s6.jpg" alt=""><span>旅行包</span></li></ul></li></ul></div></li><li class="nav-item"><a href="" class="link" id="btn">小米手机1</a></li><li class="nav-item"><a href="" class="link">Redmi红米</a></li><li class="nav-item"><a href="" class="link">电视</a></li><li class="nav-item"><a href="" class="link">笔记本</a></li><li class="nav-item"><a href="" class="link">家电</a></li><li class="nav-item"><a href="" class="link">路由器</a></li><li class="nav-item"><a href="" class="link">智能硬件</a></li><li class="nav-item"><a href="" class="link">服务</a></li><li class="nav-item"><a href="" class="link">社区</a></li></ul></div><div class="header-search"><form action="" class="search-form"><input type="text" class="search-text"><input type="button" class="search-btn" ></form></div></div><div id="div1"><div class="container"><ul class="children-list">                   <li ><img src="img/phone1.png" alt="小米MIX FOLD" width="160" height="110"><div class="title">小米MIX FOLD</div><p class="price">9999元起</p></li> <li><img src="img/phone2.png" alt="小米MIX FOLD" width="160" height="110"><div class="title">小米MIX FOLD</div><p class="price">9999元起</p></li><li><img src="img/phone3.png" alt="小米MIX FOLD" width="160" height="110"><div class="title">小米MIX FOLD</div><p class="price">9999元起</p></li><li><img src="img/phone4.png" alt="小米MIX FOLD" width="160" height="110"><div class="title">小米MIX FOLD</div><p class="price">9999元起</p></li><li><img src="img/phone5.png" alt="小米MIX FOLD" width="160" height="110"><div class="title">小米MIX FOLD</div><p class="price">9999元起</p></li><li><img src="img/phone6.png" alt="小米MIX FOLD" style="border:none;" width="160" height="110"><div class="title">小米MIX FOLD</div><p class="price">9999元起</p></li></ul> </div></div></div>  </div><div class="container home-hero-containe"><!-- 第二部分 --><div class="box"><div class="box-1"><ul><li><img src="./img/1.png" alt="这里是第一场图片"></img></li><li><img src="./img/2.png" alt="这里是第二张图片"></img></li><li><img src="./img/3.png" alt="这里是第三张图片"></img></li><li><img src="./img/4.jpg" alt="这里是第一场图片"></img></li></ul></div><div class="box-2"><ul></ul></div><div class="box-3"><span class="prev"> < </span><span class="next"> > </span></div></div><!-- 第二部分结束 --><!-- 第三部分开始 --><div class="home-hero-sub"><div class="span4"><ul class="home-channel-list"><li><img src="./img/shizhong.png" alt=""><br><a>小米秒杀</a></li><li><img src="./img/lou.png" alt=""><br><a>企业团购</a></li><li><img src="./img/fma.png" alt=""><br><a>F码通道</a></li><li><img src="./img/ka.png" alt=""><br><a>米粉卡</a></li><li><img src="./img/huanxin.png" alt=""><br><a>以旧换新</a></li><li><img src="./img/huafei.png" alt=""><br><a>话费充值</a></li></ul></div><div class="span16"><ul class="home-promo-list"><li class="first"><img src="./img/huang.jpg" alt=""><a href=""></a></li><li><a href=""><img src="./img/lan.jpg" alt=""></a></li><li><a href=""><img src="./img/hei.png" alt=""></a></li></ul></div></div></div><div class="home-main"><div class="container"><!-- 第3.1部分 --><div class="home-flashsale"><div class="box-hd"><h2 class="title">小米秒杀</h2></div><div class="box-bd"><div class="item1 flashsale-left" ><div class="round">20:00 场</div><img src="./img/shandian.png" alt=""><div class="desc">距离结束还有</div><div class="countdown"><span>22</span><i>:</i><span>22</span><i>:</i><span>33</span></div></div><div class="flashsale-list"><div class="show_banner" id="show_banner"> <ul id="banner"><li><img src="./img/item1.png" alt=""><h3 class="title">onemodern高速指纹加密移动固态硬盘PSSD 500GB</h3><p class="desc">手机电脑两用，指纹加密，自动备份，540MB/s传输</p><p class="price"><span>199</span><del>699元</del></p></li><li><img src="./img/item2.webp" alt=""><h3 class="title">onemodern高速指纹加密移动固态硬盘PSSD 500GB</h3><p class="desc">手机电脑两用，指纹加密，自动备份，540MB/s传输</p><p class="price"><span>299</span><del>699元</del></p></li><li><img src="./img/item3.webp" alt=""><h3 class="title">onemodern高速指纹加密移动固态硬盘PSSD 500GB</h3><p class="desc">手机电脑两用，指纹加密，自动备份，540MB/s传输</p><p class="price"><span>399</span><del>699元</del></p></li><li><img src="./img/item4.webp" alt=""><h3 class="title">onemodern高速指纹加密移动固态硬盘PSSD 500GB</h3><p class="desc">手机电脑两用，指纹加密，自动备份，540MB/s传输</p><p class="price"><span>499</span><del>699元</del></p></li><li><img src="./img/item5.webp" alt=""><h3 class="title">onemodern高速指纹加密移动固态硬盘PSSD 500GB</h3><p class="desc">手机电脑两用，指纹加密，自动备份，540MB/s传输</p><p class="price"><span>599</span><del>699元</del></p></li><li><img src="./img/item7.webp" alt=""><h3 class="title">onemodern高速指纹加密移动固态硬盘PSSD 500GB</h3><p class="desc">手机电脑两用，指纹加密，自动备份，540MB/s传输</p><p class="price"><span>699</span><del>699元</del></p></li> <li><img src="./img/item3.webp" alt=""><h3 class="title">onemodern高速指纹加密移动固态硬盘PSSD 500GB</h3><p class="desc">手机电脑两用，指纹加密，自动备份，540MB/s传输</p><p class="price"><span>799</span><del>699元</del></p></li><li><img src="./img/item1.png" alt=""><h3 class="title">onemodern高速指纹加密移动固态硬盘PSSD 500GB</h3><p class="desc">手机电脑两用，指纹加密，自动备份，540MB/s传输</p><p class="price"><span>599</span><del>699元</del></p></li><li><img src="./img/item1.png" alt=""><h3 class="title">onemodern高速指纹加密移动固态硬盘PSSD 500GB</h3><p class="desc">手机电脑两用，指纹加密，自动备份，540MB/s传输</p><p class="price"><span>5899</span><del>699元</del></p></li><li><img src="./img/item1.png" alt=""><h3 class="title">onemodern高速指纹加密移动固态硬盘PSSD 500GB</h3><p class="desc">手机电脑两用，指纹加密，自动备份，540MB/s传输</p><p class="price"><span>999</span><del>699元</del></p></li><li><img src="./img/item7.webp" alt=""><h3 class="title">onemodern高速指纹加密移动固态硬盘PSSD 500GB</h3><p class="desc">手机电脑两用，指纹加密，自动备份，540MB/s传输</p><p class="price"><span>1099</span><del>699元</del></p></li><li><img src="./img/item5.webp" alt=""><h3 class="title">onemodern高速指纹加密移动固态硬盘PSSD 500GB</h3><p class="desc">手机电脑两用，指纹加密，自动备份，540MB/s传输</p><p class="price"><span>1199</span><del>699元</del></p></li></ul><span id="left"><</span><span id="right">></span><ul id="circular"><li class="cri"></li><li class="cri"></li><li class="cri"></li><li class="cri"></li><li class="cri"></li></ul></div></div></div></div><!-- 第3.2部分 --><div class="home-banner-box"><img src="./img/box.png" alt="">  </div><div class="home-brick-box"><div class="box-hd"><h2 class="title">手机</h2><div class="more"><a href="">查看更多</a></div></div><div class="row"><div class="span44"><div class="brick-list"><img src="./img/MIx.png"></div></div> <div class="span116"><ul><li> <img src="./img/phone2.png"><h3 class="title2">Note&nbsp;10&nbsp;Pro</h3><p class="desc">手机电脑两用，指纹加密，自动备份</p><p class="price"><span>599</span><del>699元</del></p></li><li> <img src="./img/phone3.png"><h3 class="title2">Note&nbsp;10&nbsp;Pro</h3><p class="desc">手机电脑两用，指纹加密，自动备份</p><p class="price"><span>599</span><del>699元</del></p></li><li> <img src="./img/phone4.png"><h3 class="title2">Note&nbsp;10&nbsp;Pro</h3><p class="desc">手机电脑两用，指纹加密，自动备份</p><p class="price"><span>599</span><del>699元</del></p></li><li> <img src="./img/phone5.png"><h3 class="title2">Note&nbsp;10&nbsp;Pro</h3><p class="desc">手机电脑两用，指纹加密，自动备份</p><p class="price"><span>599</span><del>699元</del></p></li><li> <img src="./img/phone6.png"><h3 class="title2">Note&nbsp;10&nbsp;Pro</h3><p class="desc">手机电脑两用，指纹加密，自动备份</p><p class="price"><span>599</span><del>699元</del></p></li><li> <img src="./img/phone1.png"><h3 class="title2">Note&nbsp;10&nbsp;Pro</h3><p class="desc">手机电脑两用，指纹加密，自动备份</p><p class="price"><span>599</span><del>699元</del></p></li><li> <img src="./img/phone2.png"><h3 class="title2">Note&nbsp;10&nbsp;Pro</h3><p class="desc">手机电脑两用，指纹加密，自动备份</p><p class="price"><span>599</span><del>699元</del></p></li><li> <img src="./img/phone3.png"><h3 class="title2">Note&nbsp;10&nbsp;Pro</h3><p class="desc">手机电脑两用，指纹加密，自动备份</p><p class="price"><span>599</span><del>699元</del></p></li></ul></div></div></div><div class="home-banner-box"><img src="./img/home-banner2.png" alt=""></div><div class="home-brick-box"><div class="box-hd"><h2 class="title">手机</h2><div class="more"><a href="">查看更多</a></div></div><div class="row"><div class="span44"><div class="brick-list"><img src="./img/MIx.png"></div></div> <div class="span116"><ul><li> <img src="./img/phone2.png"><h3 class="title2">Note&nbsp;10&nbsp;Pro</h3><p class="desc">手机电脑两用，指纹加密，自动备份</p><p class="price"><span>599</span><del>699元</del></p></li><li> <img src="./img/phone3.png"><h3 class="title2">Note&nbsp;10&nbsp;Pro</h3><p class="desc">手机电脑两用，指纹加密，自动备份</p><p class="price"><span>599</span><del>699元</del></p></li><li> <img src="./img/phone4.png"><h3 class="title2">Note&nbsp;10&nbsp;Pro</h3><p class="desc">手机电脑两用，指纹加密，自动备份</p><p class="price"><span>599</span><del>699元</del></p></li><li> <img src="./img/phone5.png"><h3 class="title2">Note&nbsp;10&nbsp;Pro</h3><p class="desc">手机电脑两用，指纹加密，自动备份</p><p class="price"><span>599</span><del>699元</del></p></li><li> <img src="./img/phone6.png"><h3 class="title2">Note&nbsp;10&nbsp;Pro</h3><p class="desc">手机电脑两用，指纹加密，自动备份</p><p class="price"><span>599</span><del>699元</del></p></li><li> <img src="./img/phone1.png"><h3 class="title2">Note&nbsp;10&nbsp;Pro</h3><p class="desc">手机电脑两用，指纹加密，自动备份</p><p class="price"><span>599</span><del>699元</del></p></li><li> <img src="./img/phone2.png"><h3 class="title2">Note&nbsp;10&nbsp;Pro</h3><p class="desc">手机电脑两用，指纹加密，自动备份</p><p class="price"><span>599</span><del>699元</del></p></li><li> <img src="./img/phone3.png"><h3 class="title2">Note&nbsp;10&nbsp;Pro</h3><p class="desc">手机电脑两用，指纹加密，自动备份</p><p class="price"><span>599</span><del>699元</del></p></li></ul></div></div></div><div class="home-banner-box"><img src="./img/home-banner3.png" alt=""></div><div class="home-brick-box"><div class="box-hd"><h2 class="title">手机</h2><div class="more"><a href="">查看更多</a></div></div><div class="row"><div class="span44"><div class="brick-list"><img src="./img/MIx.png"></div></div> <div class="span116"><ul><li> <img src="./img/phone2.png"><h3 class="title2">Note&nbsp;10&nbsp;Pro</h3><p class="desc">手机电脑两用，指纹加密，自动备份</p><p class="price"><span>599</span><del>699元</del></p></li><li> <img src="./img/phone3.png"><h3 class="title2">Note&nbsp;10&nbsp;Pro</h3><p class="desc">手机电脑两用，指纹加密，自动备份</p><p class="price"><span>599</span><del>699元</del></p></li><li> <img src="./img/phone4.png"><h3 class="title2">Note&nbsp;10&nbsp;Pro</h3><p class="desc">手机电脑两用，指纹加密，自动备份</p><p class="price"><span>599</span><del>699元</del></p></li><li> <img src="./img/phone5.png"><h3 class="title2">Note&nbsp;10&nbsp;Pro</h3><p class="desc">手机电脑两用，指纹加密，自动备份</p><p class="price"><span>599</span><del>699元</del></p></li><li> <img src="./img/phone6.png"><h3 class="title2">Note&nbsp;10&nbsp;Pro</h3><p class="desc">手机电脑两用，指纹加密，自动备份</p><p class="price"><span>599</span><del>699元</del></p></li><li> <img src="./img/phone1.png"><h3 class="title2">Note&nbsp;10&nbsp;Pro</h3><p class="desc">手机电脑两用，指纹加密，自动备份</p><p class="price"><span>599</span><del>699元</del></p></li><li> <img src="./img/phone2.png"><h3 class="title2">Note&nbsp;10&nbsp;Pro</h3><p class="desc">手机电脑两用，指纹加密，自动备份</p><p class="price"><span>599</span><del>699元</del></p></li><li> <img src="./img/phone3.png"><h3 class="title2">Note&nbsp;10&nbsp;Pro</h3><p class="desc">手机电脑两用，指纹加密，自动备份</p><p class="price"><span>599</span><del>699元</del></p></li></ul></div></div></div><div class="home-banner-box"><img src="./img/home-banner4.png" alt=""></div></div><!--到达顶部的bar-->
<div class="topBar"><a href="#" class="ewm_b" style="position: relative;"><img src="./img/shouji.png" alt=""><br><span>手机APP</span><img class="ewm" class="" src="./img/erweima2.png" alt=""></a><a href="#"><img src="./img/geren.png" alt=""><br><span>个人中心</span></a><a href="#"><img src="./img/shouhou.png" alt=""><br><span>售后服务</span></a><a href="#"><img src="./img/kefu.png" alt=""><br><span>人工客服</span></a><a href="#"  style="margin-top:20px;"><img src="./img/topBar.png" alt=""><br><span>返回顶部</span></a>
</div>
<!--到达顶部的bar--><!-- 轮播图 -->
<script src="./js/mi.js"></script> </body>
</html>

2.JS代码

window.onload=function(){function $(param){if(arguments[1] == true){return document.querySelectorAll(param);}else{return document.querySelector(param);}}var $box = $(".box");var $box1 = $(".box-1 ul li",true);var $box2 = $(".box-2 ul");var $box3 = $(".box-3");var $length = $box1.length;var str = "";for(var i =0;i<$length;i++){if(i==0){str +="<li class='on'>"+(i+1)+"</li>";}else{str += "<li>"+(i+1)+"</li>";}}$box2.innerHTML = str;var current = 0;var timer;timer = setInterval(go,1000);function go(){for(var j =0;j<$length;j++){$box1[j].style.display = "none";$box2.children[j].className = "";}if($length == current){current = 0;}$box1[current].style.display = "block";$box2.children[current].className = "on";current++;}for(var k=0;k<$length;k++){$box1[k].onmouseover = function(){clearInterval(timer);}$box1[k].onmouseout = function(){timer = setInterval(go,1000);}}for(var p=0;p<$box3.children.length;p++){$box3.children[p].onmouseover = function(){clearInterval(timer);};$box3.children[p].onmouseout = function(){timer = setInterval(go,1000);}}for(var u =0;u<$length;u++){$box2.children[u].index  = u;$box2.children[u].onmouseover = function(){clearInterval(timer);for(var j=0;j<$length;j++){$box1[j].style.display = "none";$box2.children[j].className = "";}this.className = "on";$box1[this.index].style.display = "block";current = this.index +1;}$box2.children[u].onmouseout = function(){timer = setInterval(go,1000);}}$box3.children[0].onclick = function(){back();}$box3.children[1].onclick = function(){go();}function back(){for(var j =0;j<$length;j++){$box1[j].style.display = "none";$box2.children[j].className = "";}if(current == 0){current = $length;}$box1[current-1].style.display = "block";$box2.children[current-1].className = "on";current--;}//运动框架
var btn=document.getElementById("btn");
var oDiv1=document.getElementById('div1');
btn.onmouseover=function () {startMove(oDiv1,229);oDiv1.style.display="block";};
btn.onmouseout=function () {startMove(oDiv1,0);oDiv1.style.display="none";
};// 函数调用,变高
function startMove(obj,iTarget){clearInterval(obj.timer);obj.timer=setInterval(function () {var speed=(iTarget-obj.offsetHeight)/6;speed=speed>0?Math.ceil(speed):Math.floor(speed);//缓冲运动速度取整，大于零向上，小于零向下if(obj.offsetHeight===iTarget){clearInterval(obj.timer);}else{obj.style.height=obj.offsetHeight+speed+'px';}},30);
}
// 轮播2
var banner = document.getElementById("banner");
var show_banner = document.getElementById("show_banner");
var Left = document.getElementById("left");
var Right = document.getElementById("right");
var cri = document.getElementById("circular").children;
//          var cri = document.getElementsByClassName("cri");
//          console.log(cri);
var i=0;var timer = setInterval(IntervalBanner,1000)
show_banner.onmouseover=function(){clearInterval(timer)
}
show_banner.onmouseout=function(){timer = setInterval(IntervalBanner,1000)
}
Right.onclick=function(){i++;if(i==3){i = 0;}Banner();
}
Left.onclick=function(){i--;if(i==-1){i = 2;}Banner();
}function Banner(){for(var j=0;j<cri.length;j++){cri[j].style.background = "white";}cri[i].style.background = "#f60";banner.style.marginLeft = -992*i+"px";
}
function IntervalBanner(){i++;if(i==3){i = 0;}Banner();
}}

3.css代码


*{padding: 0;margin: 0;
}
body{height: 3000px;
}
.site-topbar{position: relative;top:0;left: 0;z-index: 30;height: 40px;font-size: 12px;color: #b0b0b0;background: #333;}/* 导航栏中间 */
.container {width: 1226px;margin-right: auto;margin-left: auto;
}
/* //头部导航栏左边 */
.site-topbar .topbar-nav {float: left;height: 40px;line-height: 40px;
}
.site-topbar a {color: #b0b0b0;line-height: 40px;display: inline-block;
}
.site-topbar a:hover{color:#fff;
}
.site-topbar .erweima{position: relative;}.site-topbar .erweima>img{position: absolute;top:40px;left:0px;display: none;}
.site-topbar .erweima:hover>img{display: block;
}
.site-topbar .sep {margin: 0 .3em;color: #424242;
}
/* 头部导航栏右边登录注册 */
.site-topbar .topbar-info {position: relative;float: right;height: 40px;line-height: 40px;
}
.topbar-cart{position: relative;float: right;width: 120px;height: 40px;color:#b0b0b0;text-align: center;margin-left: 15px;-webkit-transition: all .2s;transition: all .2s;font-size: 12px;background-color: #424242;
}
.topbar-cart>div{width:300px;height: 100px;position: absolute;top:40px;right:0px; display: none;color: #424242; background-color:#fff;line-height: 100px;text-align: center;box-shadow: 0 3px 4px rgb(0 0 0 / 18%);} .topbar-cart:hover>div{display: block;
}
.topbar-cart:hover{background-color: #fff;}
.topbar-cart a:hover{color: #ff6700;
}
.topbar-carticon{margin-right: 4px;font-size: 20px;/*  vertical-align设置元素垂直排列 *//* text-align是水平对其 */vertical-align: -4px;line-height: 20px;width: 20px;height: 20px;
}
/* site-header白色导航栏开始 */
.site-header{z-index: 20;height: 100px;position: relative;}
.site-header .container{position: relative;
}
.site-header .header-logo {float: left;width: 62px;margin-top: 22px;
}
.site-header .logo {position: relative;display: block;width: 56px;height: 56px;overflow: hidden;text-align: left;
}
.site-header .header-nav {float: left;width: 850px;
}
.site-header .nav-list {position: relative;z-index: 10;float: left;width: 1100px;height: 88px;margin: 0;padding: 12px 0 0 30px;list-style-type: none;font-size: 16px;
}
.site-header .nav-item {float: left;
}
.site-header .nav-item .link {display: block;padding: 26px 10px 38px;*padding: 26px 8px 38px;color: #333;-webkit-transition: color .2s;transition: color .2s;
}
.site-header .nav-item .link:hover{color:#ff7819;
}
a,a:hover {text-decoration: none;
}
/* 搜索部分开始 */.site-header .header-search {float: right;width: 296px;margin-top: 25px;
}
.site-header .search-form {position: relative;width: 296px;right:0;height: 50px;z-index: 20;
}.site-header .search-text {right: 51px;z-index: 1;width: 223px;height: 48px;padding: 0 10px;font-size: 14px;line-height: 48px;
}input[type=search]{-webkit-appearance: textfield;-webkit-box-sizing: content-box;box-sizing: content-box;
}
.site-header .search-btn, .site-header .search-text {position: absolute;top: 0;border: 1px solid #e0e0e0;outline: 0;-webkit-transition: all .2s;transition: all .2s;
} .site-header .search-btn {right: 0;z-index: 2;width: 52px;height: 50px;font-size: 24px;line-height: 24px;background:url("../img/search.png")no-repeat;background-size:50px 50px;color: #616161;}
.site-header .search-btn:hover{background:url("../img/search2.png")no-repeat;background-size:50px 50px;}
/*  #div1{position: absolute;display: block;width: 1200px;height: 10px;z-index:500;top: 140px;left: 0;background-color: #fff;z-index: 24;border-top: 1px solid #e0e0e0;overflow: hidden;} */
.site-header #div1{height: 229px;display: none;position: absolute;top: 100px;width: 100%;z-index: 500;height: 0px;background-color: #fff;border-top: 1px solid #e0e0e0;border-bottom: 1px solid\9;box-shadow: 0 3px 4px rgb(0 0 0 / 18%);}#div1 .container {margin-left:17.8%;width: 1226px;background-color: green;}
.site-header  #div1 .children-list {margin: 0;padding: 0;list-style-type: none;font-size: 12px;
}
.site-header  #div1 .children-list li {position: relative;float: left;width: 180px;padding: 35px 12px 0;text-align: center;}
.site-header  #div1 .children-list li img{border-right: 1px solid #e0e0e0;
}
.site-headers:hover>.children-list{display: block;
}
/* 左边菜单栏 */
.site-header .nav-category{position: relative;float: left;width: 127px;padding-right: 15px;
}
.site-header .nav-category .link-category{display: block;padding: 26px 0 38px;text-align: right;color: #333;
}
/* 下拉菜单栏开始 */
.site-category{display: none;position: absolute;top: 88px;left: -92px;z-index: 100;width: 234px;height: 460px;font-size: 14px;
}
.site-category-list{margin: 0;padding: 20px 0;height: 420px;border: 0;background: rgba(105,101,101,.6);
}
/* 每个li */
.category-item{width: 234px;height: 42px;text-align: center;line-height: 42px;list-style-type: none;
}
.category-item a{position: relative;padding-left: 30px;float:left;color: #fff;
}.site-category ul>Li>div{width:992px;height:460px;position: absolute;top:0px;left:234px;display: none;background-color: #fff;border: 1px solid #e0e0e0;border-left: 0;-webkit-box-shadow: 0 8px 16px rgb(0 0 0 / 18%);box-shadow: 0 8px 16px rgb(0 0 0 / 18%);
}
.site-category ul>li:hover>div{display: block;
}
.site-category .category-item-detail li{position: relative;z-index:50;float: left;width: 248px;height: 76px;background-color: #ffffff;
}
.site-category .category-item-detail li span{float: left;width: 80px;line-height: 74px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.site-category .category-item-detail li span:hover{color: #ff6a00;
}
.site-category .category-item-detail li img{width: 40px;height: auto;float: left;margin:15px 15px 0;}.category-item:hover{background-color: #ff6700;
}
em{padding-left: 94px;;position: absolute;color: white;
width: 20px;height: 25px;
}
.category-item .img{display: block;
position: absolute;top: 10px;left: 192px;   width: 16px;height: 16px;
}
/* 第二部分开始 */
.home-hero-container{position: relative;z-index: 10;
}
/* 轮播图 */
ul,li {list-style: none;}
.box a {text-decoration: none;color: rgb(200, 200, 200);}
.box{width: 1226px;height: 460px;margin: 0px auto;overflow: hidden;position: relative;}
/* .box-1 ul{} */
.box-1 ul li{width:1226px;height: 460px;position: relative;overflow: hidden;}
.box-1 ul li img{display:block;width:1226px; height: 460px;}.box-2{position: absolute;right: 10px;bottom: 14px;}
.box-2 ul li{float:left;width: 12px;height: 12px;overflow: hidden; margin: 0 5px; border-radius: 50%;background: rgba(0,0,0,0.5);text-indent: 100px;cursor: pointer;}
.box-2 ul .on{background: rgba(255,255,255,0.6);}
.box-3 span{position: absolute;color: white;background: rgba(125,125,120,.3);width: 50px;height: 80px;top:50%; font-family: "宋体";line-height: 80px;font-size:60px;margin-top: -40px;text-align: center;cursor: pointer;}
.box-3 .prev{left: 233px;}
.box-3 .next{right: 0px;}
.box-3 span::selection{background: transparent;}
.box-3 span:hover{background: rgba(125,125,120,.8);}
/* 第三部分开始 */
.home-hero-sub {margin-top: 14px;
}
/* 第三部分左边 */
.span4 {width: 234px;float: left;
}.home-channel-list li{padding: 3px;font-size: 12px;list-style-type: none;position: relative;float: left;width: 70px;height: 82px;padding: 0 3px;margin: 0;text-align: center;background: #5f5750;border:1px solid #b4b1ad;
}
.home-channel-list img{width: 24px;height: 24px;margin: 12px auto 4px;
}
.home-channel-list li a{color: #cfccca;
}
.home-channel-list li a:hover{color: #fff;
}
/*第三部分右边 */
.span16 { float: left;margin-left: 14px;min-height: 1px;width: 978px;
}
.home-promo-list li {float: left;width: 316px;height: 170px;margin-left: 15px;list-style-type: none;}
.home-promo-list li:hover{/* -webkit-transition: -webkit-box-shadow .2s #666666;transition: -webkit-box-shadow .2s #666666;transition: box-shadow .2s #666666;transition: box-shadow .2s #666666,-webkit-box-shadow .2s #666666; */box-shadow: 0 6px 9px rgb(0 0 0 / 18%);-webkit-transition: all .6s;
transition: all .2s;
}
.home-promo-list .first{margin-left: 0;
}
.home-promo-list img{width: 100%;height: auto;
}
/* 第三部分结束 */
/* 第四部分开始 */
.home-main {position: relative;width: 100%;/* background: red; */margin-top: 196px;padding-bottom: 12px;background-color: #f5f5f5;
}
.home-flashsale {margin-bottom: 22px;position: relative;
}
.box-hd .title {margin: 0;font-size: 22px;font-weight: 200;line-height: 58px;color: #333;
}.home-flashsale .item1 {border-top-color: #e53935;}
.home-flashsale .flashsale-left{float:left;height: 278px;width: 234px;padding-top: 39px;border-top-width: 1px;border-top-style: solid;background: #f1eded;text-align: center;
}
.flashsale-left .round {font-size: 21px;color: #ef3a3b;padding-top: 15px;
}
.flashsale-left .desc {color: rgba(0,0,0,.54);font-size: 15px;
}
.flashsale-left  .countdown{width: 168px;margin: 28px auto 0;
}
.flashsale-left .countdown span{width: 46px;/* height: 46px; */background: #605751;color: #fff;font-size: 24px;line-height: 46px;float: left;
}
.countdown i {width: 15px;float: left;height: 46px;line-height: 46px;color: #605751;font-size: 28px;font-style: normal;
}
.home-flashsale .flashsale-left img{
margin: 25px auto;
}
/* 右边自动轮播列表 */
.home-flashsale .flashsale-list{float: left;
}.flashsale-list .show_banner{width: 992px;height: 340px;overflow: hidden; position: relative;
}.home-flashsale .flashsale-list ul {margin: 0;padding: 0;width: 3000px;height: 340px;
}
.home-flashsale .flashsale-list li {float:left;width: 234px;margin-left: 14px;border-top-width: 1px;border-top-style: solid;text-align: center;background: #fff;list-style: none;border-top-color: #b3d8f6;
}
.home-flashsale .flashsale-list li:hover{margin-left: 12px;  margin-top:-5px;
-webkit-transition: all .2s;
transition: all .2s;
box-shadow: 1px 6px 8px rgb(0 0 0 / 10%);
}.home-flashsale .flashsale-list li img{width: 160px;height: 160px;margin: 39px auto 22px;
}.title{margin: 0 20px 3px;font-size: 14px;font-weight: 400;text-overflow: ellipsis;color: #212121;overflow: hidden;white-space: nowrap;
}
.desc{text-align: center;height: 18px;margin: 0 20px 12px;font-size: 12px;text-overflow: ellipsis;color: #b0b0b0;overflow: hidden;white-space: nowrap;}
.price {text-align: center;margin-bottom: 19px;color: #ff6709;}
.price del{text-align: center;text-align: center;padding-left: 5px;color: #afafaf;
}
.show_banner>span{width:40px;height:40px;color:white;position: absolute;font-size:20px;text-align: center;line-height: 40px;background:rgba(0,0,0,0.4);top:50%;margin-top:-20px;display: none;
}
.show_banner>span:hover{background:rgba(0,0,0,0.8);
}
.show_banner:hover>span{display: block;
}
.show_banner>#left{left:0px;border-radius: 0px 20px 20px 0px;
}
.show_banner>#right{right:0px;border-radius: 20px 0px 0px 20px;
}
.show_banner>#circular{width:100px;
overflow: hidden;
background:rgba(255,255,255,0.3);
position: absolute;
left:50%;
bottom:30px;
padding:8px 0px 8px 10px;
border-radius: 50px;
transform: translate(-50%,0px);
}
.show_banner>#circular>li{width:10px;height:10px;border-radius: 50%;background:white;list-style: none;float: left;margin-right:10px;
}
/* 结束 */
/* 第3.2部分 --> */
.home-banner-box {height: 120px;margin: 22px 0;overflow: hidden;width:100%;
}.home-banner-box img {margin-top:20px;width: 1226px;height: 120px;
}
.home-brick-box{position: relative;margin-bottom: 8px;
}
.home-brick-box .box-hd .more{position: absolute;top: 0;right: 0px;
}
.box-hd .more a{font-size: 16px;
line-height: 58px;
text-align: center;
color: #424242;
}
.home-brick-box .row{position: relative;
}
.span44{float: left;background-color: green;
width: 234px;min-height: 1px;
}
.span44 img{margin-bottom: 14px;;
}
.brick-list{height: 614px;
}.span116{width: 992px;float: left;
}.span116 ul li{position: relative;width: 234px;height: 300px;float: left;
margin-left:14px;margin-bottom: 14px;
}
.span116 ul li:hover{margin-left:14px;margin-top: -5px;box-shadow: 0 7px 9px rgb(0 0 0 / 10%);transition: all .2s;
}
.span116 ul li img{width: 180px;height: auto;margin:28px 27px 22px;}.span116 ul li .title2{text-overflow: ellipsis;overflow: hidden;white-space: nowrap;text-align: center;margin: 0 13px 0px;font-size: 14px;font-weight: 400;color: #333;text-align: center;}
.span166 ul li .desc{text-align: center;line-height: 20px;text-align: center;margin: 0 10px 10px;height: 18px;font-size: 12px;color: #b0b0b0;
} /*返回顶部的bar*/
.topBar{position: fixed;bottom: 80px;right:10px;width: 90px;height: 540px;}
.topBar a{display: block;width: 90px;height: 100px;border-bottom: 2px solid #f5f5f5;background-color: #ffffff;
}
.topBar img{margin-left:25px;margin-top:20px;width: 36px;height: 36px;
}
.topBar img:hover{background-color: #ff6a00;
}
.topBar .ewm{width: 100px;height: auto;display: none;position: absolute;right: 100px;top:-20px;border:1px solid #cccccc;
}
.topBar .ewm_b:hover>.ewm{display: block;
}
.topBar span{color:#a4a4a4;line-height: 21px;text-align: center;padding-left:12px;
}
.topBar span:hover{color:#ff6a00;
}

❤ ❤总结

1.新学习到的知识点：

1.可以设置一个Class给所有模块居中 margin-right: auto;margin-left: auto;

.container {width: 1226px;margin-right: auto;margin-left: auto;
}

2.给块设置宽高，当块中文字内容溢出时，可以使用text-overflow: ellipsis;
overflow: hidden;将文字内容以省略号形式隐藏

.site-category .category-item-detail li span{float: left;width: 80px;line-height: 74px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}

实现效果：

百度一下overflow有三个属性text-overflow: clip | ellipsis | string;其作用分别为

3.实现点击浮动可以使用css3(CSS3有很多好看的特效，值得学习）

-webkit-transition: all .2s;transition: all .2s;

表示该模块发生改变时的速度，可以给其 添加定位，进行位置的移动
4.阴影

box-shadow: 0 3px 4px rgb(0 0 0 / 18%);

box-shadow: offsetx,offsetY, 模糊程度，阴影长度，颜色。

每天练习一点点，菜鸟变大牛！最后，创作不易，喜欢就点个赞吧！！！

❤ ❤响应式小米官网源码！！！（js+css+html）❤ ❤相关推荐

  1. 仿小米官网源码，2021年9月最新版

    部分源码: <div class="header"><div class="page-top"><div class=" ...

  2. 分享一套响应式自适应公司网站官网源码，带文字搭建教程

    分享一套响应式自适应公司网站官网源码,带文字搭建教程.需要源码学习可私信我. 技术架构 PHP7.2 + nginx + mysql5.7 + JS + CSS + HTML cnetos7以上 + ...

  3. php企业官网源码 响应式,基于ThinkPHP5框架开发的响应式企业官网PHP源码_PC端+WAP手机端自适应+TP企业官网建站系统...

    源码介绍 基于ThinkPHP5框架开发的响应式企业官网PHP源码,是一款基于ThinkPHP5.0.10内核开发的企业建站管理系统,非常适合企业拿来二次开发自己的企业官网系统.前端界面采用流行的bo ...

  4. HTML5期末大作业：网站——响应式网络游戏官网HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个人网站作业模板 ~简单个人网页

    HTML5期末大作业:网站--响应式网络游戏官网HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个人网站作业模板 ~简单个人网页 ...

  5. webstack响应式网站导航html源码kyuan 本地静态化版

    介绍: webstack响应式网站导航html源码 安装方法:直接上传 一言.和风天气的api建议大家自己注册换成自己的,每个注册的人有每日免费使用次数, 自带的一起用可能最后都显示不出来了. 以上提 ...

  6. 完整企业官网源码，前端基于Vue+ElementUI，后台基于基于core3 webapi，含数据库文件，含详情安装部署文档

    完整企业官网源码,前端基于Vue+ElementUI,后台基于基于core3 webapi,含数据库文件,含详情安装部署文档 完整代码下载地址:完整企业官网源码 某工程管理有限公司企业官网 前端 新版 ...

  7. html5+css3做的响应式企业网站前端源码

    大家好,今天给大家介绍一款,html5+css3做的响应式企业网站前端源码 (图1).送给大家哦,获取方式在本文末尾. 图1 首页banner幻灯片切换特效(图2) 图2 首页布局简约合理(图3) 图 ...

  8. java计算机毕业设计漠河旅游官网源码+系统+数据库+lw文档+mybatis+运行部署

    java计算机毕业设计漠河旅游官网源码+系统+数据库+lw文档+mybatis+运行部署 java计算机毕业设计漠河旅游官网源码+系统+数据库+lw文档+mybatis+运行部署 本源码技术栈: 项目 ...

  9. 计算机毕业设计Java桂林恒保健康防护有限公司官网(源码+系统+mysql数据库+Lw文档）

    计算机毕业设计Java桂林恒保健康防护有限公司官网(源码+系统+mysql数据库+Lw文档) 计算机毕业设计Java桂林恒保健康防护有限公司官网(源码+系统+mysql数据库+Lw文档) 本源码技术栈 ...

  10. 我的世界SkyPixel像素天空HTML官网源码

    简介: 我的世界SkyPixel像素天空HTML官网源码,上传HTML源码至空间网站目录,绑定域名即可访问.源码自带中文和英文 网盘下载地址: http://kekewangLuo.cc/1AtBrL ...

最新文章

  1. python学习笔记011——内置函数__module__、__name__
  2. CentOS6.9编译安装Nginx1.12
  3. JWT简介json web token bear token
  4. golang sql查询获取结果集个数
  5. 利用尾递归减少栈空间的消耗
  6. brain teasers
  7. OS / 进程中某个线程崩溃，是否会对其他线程造成影响？
  8. 走向.NET架构设计—第四章—业务层分层架构（前篇）
  9. 架构大型企业Java项目–我的虚拟JUG会话
  10. python怎么创建txt文件啊_python根据txt文本批量创建文件夹
  11. html type=text/css,type=text/css 有什么用啊 ？
  12. gSoap客户端调用WebService完成后注意内存释放顺序
  13. Spring Boot三合一实验（添加人员，修改人员，删除人员）
  14. 标识符的命名规定java 0126
  15. MVC5 Entity Framework学习参加排序、筛选和排序功能
  16. 100套高质量的免费 PSD 界面设计素材【系列一】
  17. 三个线性同余方程组的计算机解决方案（C程序）
  18. 对C#Chart控件使用整理
  19. 小学-综合素质【5】
  20. 智商情商哪个重要_情商与智商哪个更重要？三个方面让你彻底明白

热门文章

  1. arcgis 批量计算几何_GIS中的计算几何
  2. 计算几何——多边形面积
  3. 计算机科学与技术专业叙述,计算机科学与技术专业描述怎么写
  4. 用什么材料作电磁屏蔽呢？
  5. 读《采购与供应链管理》
  6. 前端数据可视化D3 ——（案例1）柱状图
  7. 设置 cmd 窗口默认为快速编辑(quickedit)
  8. SLAM专题（8）卡尔曼滤波和扩展卡尔曼滤波 原理与应用
  9. axure9怎么让页面上下滑动_Axure如何实现同页面上下、左右滑动
  10. GB 2312 编码