app开发定制html+css制作静态小米商城页面（含css手动轮播图）

目录

对于采用html,cssapp开发定制制作静态界面，app开发定制我的理解是只要你脑海app开发定制里有大致框架的思路和app开发定制定位的感觉就不会太难，app开发定制分为一块一块来写，app开发定制最好养成根据文档结构app开发定制一层一层递进的写选择器的习惯，app开发定制这样不会乱，app开发定制在后期修改的时候也方便查找，app开发定制前端就是网页的美容师，app开发定制就看你如何去给他动刀子了。

1.整体效果

整个页面大致分为几个板块：

                         顶部；

                         头部logo，中间和左侧导航条，右侧搜索框；

                         CSS手动；

                         右侧工具栏；

                         底部广告部分。

在准备期间先将公共css样式写好,设置body最小值，以防止溢出容器：

  1. /* 公共样式 */
  2. clearfix::before
  3. clearfix::after{
  4.     content: "";
  5.     display: table;
  6.     clear: both;
  7. }
  8.  
  9. a{
  10.     text-decoration: none;
  11. }
  12. body{
  13.    font-size: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
  14.    color: #333;
  15.    /* 不让body过小导致溢出容器 */
  16.    min-width: 1226px;
  17. }
  18.  
  19. /* 设置一个类，用来表示中间容器的宽度 */
  20. .w{
  21.     width: 1226px;
  22.     margin: 0 auto;
  23. }

2.顶部导航条

经典的导航条练习，浮动之后利用伪类和过渡效果设置下拉二维码和购物车下拉栏的位置，并给其设置层级以防止被别的元素覆盖。（因为二维码会被和谐，所以这里打了码）

效果图：

html代码:

  1. <!-- 顶部导航条 -->
  2.     <!-- 顶部导航条外部容器 -->
  3.     <div class="topbar-wrapper">
  4.         <!-- 顶部导航条内部容器 -->
  5.         <div class="topbar w clearfix">
  6.             <!-- 设置服务栏 -->
  7.             <ul class="service">
  8.                 <li><a href="javascript:;">小米官网</a></li>
  9.                 <li class="line">|</li>
  10.                 <li><a href="javascript:;">小米商城</a></li>
  11.                 <li class="line">|</li>
  12.                 <li><a href="javascript:;">MIUI</a></li>
  13.                 <li class="line">|</li>
  14.                 <li><a href="javascript:;">loT</a></li>
  15.                 <li class="line">|</li>
  16.                 <li><a href="javascript:;">云服务</a></li>
  17.                 <li class="line">|</li>
  18.                 <li><a href="javascript:;">天星数科</a></li>
  19.                 <li class="line">|</li>
  20.                 <li><a href="javascript:;">有品</a></li>
  21.                 <li class="line">|</li>
  22.                 <li><a href="javascript:;">小爱开放平台</a></li>
  23.                 <li class="line">|</li>
  24.                 <li><a href="javascript:;">企业团购</a></li>
  25.                 <li class="line">|</li>
  26.                 <li><a href="javascript:;">资质证照</a></li>
  27.                 <li class="line">|</li>
  28.                 <li><a href="javascript:;">协议规则</a></li>
  29.                 <li class="line">|</li>
  30.                 <li>
  31.                     <a class="app" href="javascript:;">
  32.                         下载app
  33.                         <!-- 设置下拉二维码 -->
  34.                         <div class="qrcode">
  35.                             <img src="./img/download.png">
  36.                             <span>小米商城APP</span>
  37.                         </div>
  38.                     </a>
  39.                 </li>
  40.                 <li class="line">|</li>
  41.                 <li><a href="javascript:;">Select location</a></li>
  42.             </ul>
  43.  
  44.             <!-- 设置购物车栏 -->
  45.             <ul class="shop-cart">
  46.                 <li>
  47.                     <a href="javascript:;">
  48.                         <i class="fa-solid fa-cart-shopping">
  49.  
  50.                         </i>
  51.                         购物车(0)
  52.                         <!-- 设置购物车下拉框 -->
  53.                         <div class="cart-menu"> 购物车中还没有商品，赶紧选购吧！
  54.                         </div>
  55.                     </a>
  56.                 </li>
  57.  
  58.             </ul>
  59.  
  60.             <!-- 设置使用信息栏 -->
  61.             <ul class="user-info">
  62.                 <li>
  63.                     <a href="javascript:;">登录</a>
  64.                 </li>
  65.                 <li class="line">|</li>
  66.                 <li>
  67.                     <a href="javascript:;">注册</a>
  68.                 </li>
  69.                 <li class="line">|</li>
  70.                 <li>
  71.                     <a href="javascript:;">消息通知</a>
  72.                 </li>
  73.  
  74.             </ul>
  75.  
  76.         </div>
  77.     </div>

 css代码：

  1. /* 设置顶部导航条外部容器 */
  2. .topbar-wrapper {
  3.     width: 100%;
  4.     height: 40px;
  5.     line-height: 40px;
  6.     background-color: #333;
  7. }
  8.  
  9. .topbar a {
  10.     color: #b0b0b0;
  11.     font-size: 12px;
  12.     display: block;
  13. }
  14.  
  15. /* 设置下拉二维码 */
  16. .app .qrcode {
  17.     position: absolute;
  18.     width: 124px;
  19.     height: 0px;
  20.     overflow: hidden;
  21.     background-color: #fff;
  22.     line-height: 1;
  23.     text-align: center;
  24.     box-shadow: 0 0 10px rgb(0, 0, 0, .4);
  25.     left: -35px;
  26.     z-index: 990;
  27.  
  28.     /* transition：用于为样式设置过滤效果   利用高度的变化*/
  29.     transition: height 0.5s;
  30.  
  31. }
  32.  
  33. .app .qrcode img {
  34.     width: 90px;
  35.     margin: 17px 17px;
  36.     margin-bottom: 10px;
  37. }
  38.  
  39. .app {
  40.     position: relative;
  41. }
  42.  
  43. .app:hover .qrcode,
  44. .app:hover::after {
  45.     display: block;
  46.     height: 148px;
  47. }
  48.  
  49. .app::after {
  50.     display: none;
  51.     width: 0px;
  52.     height: 0px;
  53.     border: 8px solid transparent;
  54.     border-top: none;
  55.     border-bottom-color: #fff;
  56.     position: absolute;
  57.     content: "";
  58.     left: 0;
  59.     right: 0;
  60.     bottom: 0;
  61.     margin: auto;
  62. }
  63.  
  64. .app .qrcode span {
  65.     color: #000;
  66.     font-size: 14px;
  67. }
  68.  
  69. .topbar a:hover {
  70.     color: #fff;
  71. }
  72.  
  73. .topbar .line {
  74.     color: #424242;
  75.     font-size: 12px;
  76.     margin: 0 8px;
  77. }
  78.  
  79.  
  80. .service,
  81. .topbar li {
  82.     float: left;
  83. }
  84.  
  85. .user-info,
  86. .shop-cart {
  87.     float: right;
  88. }
  89.  
  90. /* 设置购物车栏 */
  91. .shop-cart {
  92.     margin-left: 26px;
  93.     position: relative;
  94. }
  95.  
  96. .shop-cart a {
  97.     width: 120px;
  98.     background-color: #424242;
  99.     text-align: center;
  100. }
  101.  
  102. .shop-cart:hover a {
  103.     background-color: #fff;
  104.     color: #ff6700;
  105. }
  106.  
  107. .shop-cart .cart-menu {
  108.     position: absolute;
  109.     width: 316px;
  110.     height: 0;
  111.     overflow: hidden;
  112.     color: #424242;
  113.     box-shadow: 0 2px 10px rgb(0 0 0 / 15%);
  114.     background-color: #fff;
  115.     left: -196px;
  116.     transition: height 0.5s;
  117.     line-height: 100px;
  118.     z-index: 998;
  119. }
  120.  
  121. .shop-cart:hover .cart-menu {
  122.     display: block;
  123.     height: 100px;
  124. }

 3. 头部logo，中间和左侧导航条，右侧搜索框

开启定位使鼠标悬停logo时移动并通过设置悬停时的状态时logo在点击时变小。导航条下拉栏内容最好用js去实现，这里就不展示了。在真实的小米官网页面中中间导航条有一个隐藏元素“全部商品”它是连接着左侧导航条，所以这里将它们分到一个块里。

效果视频：

html代码：

  1.  <!-- 创建一个头部的外部容器 -->
  2.     <div class="header-wrapper">
  3.         <div class="header w">
  4.             <!-- 创建一个logo -->
  5.             <h1 class="logo" title="小米官网">
  6.                 <a class="mi" href="/"></a>
  7.                 <a class="mi2" href="javascript:;"></a>
  8.                 <!-- <a class="mi3" href="javascript:;"></a>  
  9.                            如果跳转网页可以再加这个 -->
  10.             </h1>
  11.             <!-- 创建一个中间导航条的容器 -->
  12.             <div class="nav-wrapper">
  13.                 <!-- 创建一个导航条 -->
  14.                 <ul class="nav clearfix ">
  15.                     <li class="all-goods-wrapper">
  16.                         <a class="nav1" href="javascript">全部商品分类</a>
  17.  
  18.                         <!-- 创建一个左侧导航菜单 -->
  19.                         <ul class="left-menu">
  20.                             <li>
  21.                                 <a href="javascript:;">
  22.                                     手机
  23.                                     <i class="fas fa-angle-right"></i>
  24.                                 </a>
  25.                             </li>
  26.                             <li>
  27.                                 <a href="javascript:;">
  28.                                     电视
  29.                                     <i class="fas fa-angle-right"></i>
  30.                                 </a>
  31.                             </li>
  32.                             <li>
  33.                                 <a href="javascript:;">
  34.                                     笔记本 平板
  35.                                     <i class="fas fa-angle-right"></i>
  36.                                 </a>
  37.                             </li>
  38.                             <li>
  39.                                 <a href="javascript:;">
  40.                                     出行 穿戴
  41.                                     <i class="fas fa-angle-right"></i>
  42.                                 </a>
  43.                             </li>
  44.                             <li>
  45.                                 <a href="javascript:;">
  46.                                     耳机 音箱
  47.                                     <i class="fas fa-angle-right"></i>
  48.                                 </a>
  49.                             </li>
  50.                             <li>
  51.                                 <a href="javascript:;">
  52.                                     家电
  53.                                     <i class="fas fa-angle-right"></i>
  54.                                 </a>
  55.                             </li>
  56.                             <li>
  57.                                 <a href="javascript:;">
  58.                                     智能 路由器
  59.                                     <i class="fas fa-angle-right"></i>
  60.                                 </a>
  61.                             </li>
  62.                             <li>
  63.                                 <a href="javascript:;">
  64.                                     电源 配件
  65.                                     <i class="fas fa-angle-right"></i>
  66.                                 </a>
  67.                             </li>
  68.                             <li>
  69.                                 <a href="javascript:;">
  70.                                     健康 儿童
  71.                                     <i class="fas fa-angle-right"></i>
  72.                                 </a>
  73.                             </li>
  74.                             <li>
  75.                                 <a href="javascript:;">
  76.                                     生活 箱包
  77.                                     <i class="fas fa-angle-right"></i>
  78.                                 </a>
  79.                             </li>
  80.                         </ul>
  81.                     </li>
  82.                     <li class="show-goods"><a href="javascript:;">Xiaomi手机</a></li>
  83.                     <li class="show-goods"><a href="javascript:;">Redmi红米</a></li>
  84.                     <li class="show-goods"><a href="javascript:;">电视</a></li>
  85.                     <li class="show-goods"><a href="javascript:;">笔记本</a></li>
  86.                     <li class="show-goods"><a href="javascript:;">平板</a></li>
  87.                     <li class="show-goods"><a href="javascript:;">家电</a></li>
  88.                     <li class="show-goods"><a href="javascript:;">路由器</a></li>
  89.                     <li><a href="javascript:;">服务中心</a></li>
  90.                     <li><a href="javascript:;">社区</a></li>
  91.  
  92.                     <!-- 创建一个商品下拉列表 -->
  93.                     <div class="goods-info">这里下拉导航层和左侧导航条里的内容最好使用js去实现,这里就不演示了
  94.  
  95.                     </div>
  96.  
  97.                 </ul>
  98.             </div>
  99.             <!-- 创建搜索框的容器  -->
  100.             <div class="search-wrapper">
  101.                 <form class="search" action="javascript:;">
  102.                     <input class="search-inp" type="text" placeholder="想养一只柴柴">
  103.                     <button class="search-btn">
  104.                         <i class="fa-solid fa-magnifying-glass"></i>
  105.                     </button>
  106.                 </form>
  107.             </div>
  108.  
  109.         </div>
  110.     </div>

css代码：

  1. /* 设置中间header */
  2. .header {
  3.     height: 100px;
  4.  
  5. }
  6.  
  7. .header-wrapper {
  8.     position: relative;
  9.  
  10. }
  11.  
  12. /* 设置logo */
  13. .header .logo {
  14.     float: left;
  15.     margin-top: 22px;
  16.     width: 55px;
  17.     height: 55px;
  18.     position: relative;
  19.  
  20. }
  21.  
  22. .header .logo .mi,
  23. .header .logo .mi2 {
  24.     position: absolute;
  25.     width: 55px;
  26.     height: 55px;
  27.     background-size: cover;
  28.     background-image: url(../img/logo.png);
  29.  
  30. }
  31.  
  32. .header .logo .mi2 {
  33.     display: none;
  34.     width: 40px;
  35.     height: 40px;
  36.     top: 7px;
  37.     left: 7px;
  38. }
  39.  
  40. .header .logo:active .mi2 {
  41.     display: block;
  42. }
  43.  
  44. .header .logo:active .mi {
  45.     display: none;
  46. }
  47.  
  48. .header .logo:hover .mi {
  49.     left: 2px;
  50. }
  51.  
  52. /* .header .logo .mi3 {
  53.     position: absolute;
  54.     width: 55px;
  55.     height: 55px;
  56.     z-index: 898;
  57.     background-size: cover
  58. } */
  59.  
  60. /* 设置中间导航条 */
  61. .header .nav-wrapper {
  62.     float: left;
  63.     margin-left: 7px;
  64. }
  65.  
  66. .header .nav {
  67.     height: 100px;
  68.     line-height: 100px;
  69.     padding-left: 58px;
  70. }
  71.  
  72. /* 设置导航条中的li */
  73. .nav>li {
  74.     float: left;
  75. }
  76.  
  77. .all-goods-wrapper {
  78.     position: relative;
  79. }
  80.  
  81. /* 设置左侧导航条的样式 */
  82. .left-menu {
  83.     width: 234px;
  84.     height: 420px;
  85.     padding: 20px 0;
  86.     background-color: rgba(105, 101, 101, .6);
  87.     position: absolute;
  88.     z-index: 887;
  89.     left: -120px;
  90.     line-height: 1;
  91. }
  92.  
  93. ul .left-menu li a {
  94.     display: block;
  95.     height: 42px;
  96.     line-height: 42px;
  97.     color: white;
  98.     padding: 0 30px;
  99.     font-size: 14px;
  100. }
  101.  
  102. /* 选择器的优先级，跟.nav-wrapper li a 比优先级一样，但因下面的会覆盖上面的，所以上面的选择器要再加一个ul来增大优先级 */
  103. ul .left-menu li a:hover {
  104.     color: white;
  105.     background-color: #ff6700;
  106. }
  107.  
  108. .left-menu a i {
  109.     float: right;
  110.     line-height: 42px;
  111. }
  112.  
  113. .nav-wrapper li a {
  114.     padding-right: 20px;
  115.     font-size: 16px;
  116.     color: #333;
  117.     display: block;
  118. }
  119.  
  120. .nav-wrapper li a:hover {
  121.     color: #ff6700;
  122. }
  123.  
  124. /* 隐藏全部商品 */
  125. .nav .nav1 {
  126.     visibility: hidden;
  127. }
  128.  
  129. /* 设置导航条下拉列表 */
  130. .nav .goods-info {
  131.     /* height: 228px; */
  132.     height: 0;
  133.     overflow: hidden;
  134.     width: 100%;
  135.     background-color: #fff;
  136.     /* border-top: 1px solid rgb(224,224, 224); */
  137.     position: absolute;
  138.     top: 100px;
  139.     left: 0%;
  140.     /* box-shadow: 0 5px 5px rgb(0,0, 0,.3); */
  141.     transition: height 0.5s;
  142.     z-index: 888;
  143.     line-height: 228px;
  144.     text-align: center;
  145.     font-size: 25px;
  146.     color: rgb(65, 231, 24);
  147. }
  148.  
  149. .nav .show-goods:hover~.goods-info,
  150. .goods-info:hover {
  151.     height: 228px;
  152.     border-top: 1px solid rgb(224, 224, 224);
  153.     box-shadow: 0 5px 5px rgb(0, 0, 0, .3);
  154. }
  155.  
  156. /* 设置搜索框容器 */
  157. .search-wrapper {
  158.     width: 296px;
  159.     height: 50px;
  160.     float: right;
  161.     margin-top: 25px;
  162.     position: relative;
  163. }
  164.  
  165. .search-inp {
  166.     float: left;
  167.     width: 244px;
  168.     height: 50px;
  169.     box-sizing: border-box;
  170.     border: none;
  171.     padding: 0 10px;
  172.     font-size: 16px;
  173.     border: 1px solid rgb(224, 224, 224);
  174.  
  175. }
  176.  
  177. /* 设置inp获取焦点以后的样式 */
  178. .search-inp:focus,
  179. .search-inp:focus+.search-btn {
  180.     outline: 1px solid #ff6700;
  181.     border: none;
  182. }
  183.  
  184. .search-btn {
  185.     float: left;
  186.     width: 52px;
  187.     height: 50px;
  188.     font-size: 18px;
  189.     background-color: #fff;
  190.     color: #616161;
  191.     border: 1px solid rgb(224, 224, 224);
  192.     border-left: none;
  193.  
  194. }
  195.  
  196. .search-btn:hover {
  197.     background-color: #ff6700;
  198.     color: #fff;
  199.     border: none;
  200. }

4.CSS中间轮播图

实现原理：利用 css3 中 input:checked 和 + ～选择器实现。

虽然没有js的方便和交互性，但是也是一种自我锻炼。

效果：

html代码：

  1. <!-- 创建container的容器 -->
  2.     <div class="container w">
  3.         <input type="radio" id="pic1" name="pic" checked >
  4.         <input type="radio" id="pic2" name="pic"  >
  5.         <input type="radio" id="pic3" name="pic" >
  6.         <div class="wrap">
  7.             <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/02248aa55d5bef10c9013297074d7795.jpg?w=2452&h=920"
  8.                 alt="图片1" >
  9.             <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4a7872075a72ffc83108c2efcbfc92e5.jpg?thumb=1&w=1533&h=575&f=webp&q=90"
  10.                 alt="图片2" >
  11.             <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fecdd392ada6618dc3e40e98f9f7be4f.png?thumb=1&w=1533&h=575&f=webp&q=90" 
  12.             alt="图片3" >
  13.         </div>
  14.         <div class="arrow left">
  15.             <label for="pic1"><div class="btn"><i class="fa-solid fa-angle-left"></i></div></label>
  16.             <label for="pic2"><div class="btn"><i class="fa-solid fa-angle-left"></i></div></label>
  17.             <label for="pic3"><div class="btn"><i class="fa-solid fa-angle-left"></i></div></label>
  18.         </div>
  19.         <div class="arrow right">
  20.             <label for="pic1"><div class="btn"><i class="fa-solid fa-angle-right"></i></div></label>
  21.             <label for="pic2"><div class="btn"><i class="fa-solid fa-angle-right"></i></div></label>
  22.             <label for="pic3"><div class="btn"><i class="fa-solid fa-angle-right"></i></div></label>
  23.         </div>
  24.     </div>

css代码：

  1. /* 设置container */
  2. .container {
  3.     position: relative;
  4.     width: 1226px;
  5.     height: 460px;
  6. }
  7.  
  8. /* 设置input位置 */
  9. .container input {
  10.     position: absolute;
  11.     z-index: 23;
  12.     bottom: 10px;
  13. }
  14.  
  15. /* 设置input位置 */
  16. #pic1 {
  17.     left: 48%;
  18. }
  19.  
  20. #pic2 {
  21.     left: 50%;
  22. }
  23.  
  24. #pic3 {
  25.     left: 52%;
  26. }
  27.  
  28. /* 设置图片大小，透明度为0 */
  29. .wrap img {
  30.     opacity: 0;
  31.     position: absolute;
  32.     width: 100%;
  33.     height: 100%;
  34. }
  35.  
  36. /* 默认选中第一张，根据选中的input，展示对应的图片 */
  37. #pic1:checked~.wrap img:nth-of-type(1),
  38. #pic2:checked~.wrap img:nth-of-type(2),
  39. #pic3:checked~.wrap img:nth-of-type(3) {
  40.     opacity: 1;
  41.     animation: showImg linear 1s 1 0s normal;
  42.  
  43. }
  44.  
  45. /* 设置图片展示出来时候的动画 */
  46. @keyframes showImg {
  47.     0% {
  48.         opacity: 0.2;
  49.     }
  50.  
  51.     50% {
  52.         opacity: 0.5;
  53.     }
  54.  
  55.     100% {
  56.         opacity: 1;
  57.     }
  58. }
  59.  
  60. /* 设置箭头的位置大小 */
  61. .arrow {
  62.     position: absolute;
  63.     top: 50%;
  64.     color: rgba(219, 219, 219, 0.736);
  65.  
  66. }
  67.  
  68. /* 设置箭头的图片的大小 */
  69. .arrow .btn {
  70.     width: 41px;
  71.     height: 69px;
  72. }
  73.  
  74. .arrow .btn i {
  75.     height: 1;
  76.     line-height: 69px;
  77.     position: absolute;
  78.     left: 8px;
  79. }
  80.  
  81. /* 设置左箭头位置 */
  82. .left {
  83.     left: 234px;
  84.     font-size: 50px;
  85.  
  86. }
  87.  
  88. /* 设置右箭头位置 */
  89. .right {
  90.     right: 0px;
  91.     font-size: 50px;
  92. }
  93.  
  94. /* 默认隐藏箭头 */
  95. .arrow label {
  96.     display: none;
  97. }
  98.  
  99. /* 根据选中的input设置需要展示哪个左边箭头 */
  100. #pic1:checked~.left label:nth-of-type(3),
  101. #pic2:checked~.left label:nth-of-type(1),
  102. #pic3:checked~.left label:nth-of-type(2) {
  103.     display: block;
  104. }
  105.  
  106. /* 根据选中的input设置需要展示哪个右边箭头 */
  107. #pic1:checked~.right label:nth-of-type(2),
  108. #pic2:checked~.right label:nth-of-type(3),
  109. #pic3:checked~.right label:nth-of-type(1) {
  110.     display: block;
  111. }
  112.  
  113. .arrow:hover {
  114.     color: #fff;
  115.     background-color: #333;
  116. }

5.右侧工具栏

开启固定定位将工具栏固定在右侧，同样利用伪类设置弹出的二维码。（因为二维码会被和谐，所以这里打码）

效果：

 

 html代码：

  1.  <!-- 创建右侧工具栏 -->
  2.     <div class="tool-bar">
  3.         <ul>
  4.             <li class="APP">
  5.                 <a class="icon" href="javascript:;"><img src="./img/tool5.png"></a>
  6.                 <span class="text">手机APP</span>
  7.                     
  8.                     <!-- 设置侧边二维码 -->
  9.                     <div class="beside-qrcode">
  10.                         <img class="bsimg" src="./img/download.png">
  11.                         <span>扫码领取新人百元礼包</span>
  12.                     </div>
  13.                 </a>
  14.             </li>
  15.             <li>
  16.                 <a class="icon" href="javascript:;"><img src="./img/tool1.png"></a>
  17.                 <span class="text">个人中心</span>
  18.                 
  19.             </li>
  20.             <li>
  21.                 <a class="icon" href="javascript:;"><img src="./img/tool2.png"></a>
  22.                 <span class="text">售后服务</span>
  23.                 
  24.             </li>
  25.             <li>
  26.                 <a class="icon" href="javascript:;"><img src="./img/tool3.png"></a>
  27.                 <span class="text">人工客服</span>
  28.  
  29.             </li>
  30.             <li>
  31.                 <a class="icon" href="javascript:;"><img src="./img/tool4.png"></a>
  32.                 <span class="text">&nbsp;&nbsp;购物车</span>
  33.                 
  34.             </li>
  35.         </ul>
  36.     </div>

 css代码：

  1. /* 设置右侧工具栏位置 */
  2. .tool-bar {
  3.     width: 84px;
  4.     height: 455px;
  5.     position: fixed;
  6.     bottom: 70px;
  7.     right: 0;
  8. }
  9.  
  10. .tool-bar li {
  11.     width: 82px;
  12.     height: 90px;
  13.     margin-top: 0%;
  14.     background-color: #fff;
  15.     border: 1px solid #f5f5f5;
  16.     line-height: 92px;
  17.     position: relative;
  18. }
  19.  
  20. .tool-bar img{
  21.     width: 30px;
  22.     height: 30px;
  23. }
  24.  
  25. .tool-bar .icon{
  26.     position: absolute;
  27.     left: 26px;
  28.     top: -10px;
  29. }
  30.  
  31. .tool-bar .text{
  32.     position: absolute;
  33.     left: 8px;
  34.     margin-top: 13px;
  35.     margin-left: 3px;
  36.     color: #757575
  37. }
  38.  
  39. /* 设置侧边二维码 */
  40. .APP .beside-qrcode {
  41.     position: absolute;
  42.     height: 155px;
  43.     overflow: hidden;
  44.     line-height: 1;
  45.     width: 0;
  46.     text-align: center;
  47.     box-shadow: 0 0 4px rgba(0, 0, 0, .4);
  48.     background-color: #ffffff;
  49.     right: 82px;
  50.     top: 0;
  51.     z-index:9979;
  52.     transition:width 0.5s;
  53. }
  54.  
  55. .APP:hover .beside-qrcode,
  56. .APP:hover::after {
  57.     display: block;
  58.     width: 124px;
  59. }
  60.  
  61. .APP::after {
  62.     display: none;
  63.     width: 0px;
  64.     height: 0px;
  65.     border: 8px solid transparent;
  66.     border-right: none;
  67.     border-left-color:#ffffff;
  68.     position: absolute;
  69.     content: "";
  70.     right:-50px;
  71.     top:50px;
  72.     z-index: 9998;
  73. }
  74.  
  75. .APP .besideqrcode span {
  76.     color: #000;
  77.     font-size: 14px;
  78. }
  79.  
  80. .beside-qrcode .bsimg{
  81.     width: 90px;
  82.     height: 85px;
  83.     margin: 17px 17px;
  84.     margin-bottom: 10px;
  85. }

 6.底部广告部分

这里正常的浮动然后定位去做没什么好说的，为了省事左边的边框里我使用的是图标字体，想吐槽以下的是，左边那个只有左上边框没有右边框，一开始挺不理解这种设计的我觉得不好看，后来试了下颜色是和字体差不多的灰色还是挺好看的，小米的前端设计师，我承认是我之前说话太大声了。

 效果：

html代码：

  1.  <!-- 创建广告容器 -->
  2.     <div class="ad w">
  3.         <ul class="shortcut">
  4.             <li>
  5.                 <a href="javascript:;">
  6.                     <i class="fas fa-clock"></i>
  7.                     小米秒杀
  8.                 </a>
  9.             </li>
  10.             <li>
  11.                 <a href="javascript:;">
  12.                     <i class="fas fa-building"></i>
  13.                     企业团购
  14.                 </a>
  15.             </li>
  16.             <li>
  17.                 <a href="javascript:;">
  18.                     <i class="fas fa-frog"></i>
  19.                     F码通道
  20.                 </a>
  21.             </li>
  22.             <li>
  23.                 <a href="javascript:;">
  24.                     <i class="fas fa-robot"></i>
  25.                     米粉卡
  26.                 </a>
  27.             </li>
  28.             <li>
  29.                 <a href="javascript:;">
  30.                     <i class="fas fa-keyboard"></i>
  31.                     以旧换新
  32.                 </a>
  33.             </li>
  34.             <li>
  35.                 <a href="javascript:;">
  36.                     <i class="fas fa-sim-card"></i>
  37.                     话费充值
  38.                 </a>
  39.             </li>
  40.         </ul>
  41.  
  42.         <ul class="imgs"> 
  43.             <!-- ad命名类可能会被广告拦截插件屏蔽 -->
  44.             <li>
  45.                 <a href="javascript:;"><img src="./img/ad1.jpg"></a>
  46.             </li>
  47.             <li>
  48.                 <a href="javascript:;"><img src="./img/ad2.jpg"></a>
  49.             </li>
  50.             <li>
  51.                 <a href="javascript:;"><img src="./img/ad3.jpg"></a>
  52.             </li>
  53.         </ul>
  54.     </div>

 css代码：

  1. /* 设置下部广告区域 */
  2. .ad{
  3.  
  4.     height: 170px;
  5.     margin-top: 14px !important;
  6.     /* 被w样式覆盖所以需要!important增加权重 */
  7. }
  8.  
  9. .ad li
  10. {
  11.     float: left;
  12. }
  13.  
  14. .ad .imgs{
  15.     float:left;
  16. }
  17.  
  18. .ad .shortcut{
  19.     float: left;
  20. }
  21.  
  22. /* 设置左侧快捷方式 */
  23. .ad .shortcut{
  24.     width: 234px;
  25.     height: 170px;
  26.     background-color: #5f5750;
  27.     margin-right: 14px;
  28. }
  29.  
  30. .ad .shortcut li{
  31.     position:relative;
  32. }
  33.  
  34. /* 设置上边框 */
  35. .ad .shortcut li::before{
  36.     content: "";
  37.     position: absolute;
  38.     width: 64px;
  39.     height: 1px;
  40.     background-color:#b0b0b0;
  41.     left: 0;
  42.     top: 2px;
  43.     right: 0;
  44.     margin: 0 auto;
  45. }
  46.  
  47. /* 设置左边框 */
  48. .ad .shortcut li::after{
  49.     content: "";
  50.     position: absolute;
  51.     width:1px ;
  52.     height:70px ;
  53.     background-color: #b0b0b0;
  54.     left: 2px;
  55.     top: 0;
  56.     bottom: 0;
  57.     margin: auto 0;
  58. }
  59.  
  60. /* 设置快捷方式中的超链接 */
  61. .ad .shortcut a{
  62.     display: block;
  63.     color: #cfccca;
  64.     width: 76px;
  65.     height: 84px;
  66.     text-align: center;
  67.     font-size: 15px;
  68.     overflow: hidden;
  69. }
  70.  
  71. .ad .shortcut a:hover{
  72.     color: #fff;
  73. }
  74.  
  75. /* 设置图片 */
  76. .ad .imgs li{
  77.     width: 316px;
  78.     margin-right: 15px;
  79. }
  80.  
  81. .ad .imgs li:last-child{
  82.     margin: 0;
  83. }
  84.  
  85. .ad .imgs img{
  86.     width: 316px;
  87.     vertical-align: top;
  88. } 
  89.  
  90. /* 设置图标字体 */
  91. .ad .shortcut i{
  92.     display: block;
  93.     margin-top: 18px;
  94.     margin-bottom: 10px;
  95.     font-size: 20px;
  96. }

 7.favico.ico图标

最后收尾要设置网站的图标（在标题栏和收藏栏）

   -网站图片一般都存储在网站的根目录下，名字一般都叫做 favicon.ico

<link rel="icon" href="./img/favicon.ico" >

效果：

然后就是完结撒花！！！！！✿✿ヽ(°▽°)ノ✿

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发