devbox
空白诗007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

用HTML和css写淘宝首页_淘宝网页制作html,css源代码

作者：空白诗007 | 2024-08-18 08:11:40

赞

踩

淘宝网页制作html,css源代码

目录

HTML部分

css代码 

效果图 

HTML部分

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="./flexible.js"></script>
  9.     <link rel="stylesheet" href="./tu/font_4299446_jlvqz7brosb/iconfont.css">
  10.     <script src="./tu/font_4299446_jlvqz7brosb/iconfont.js"></script>
  11.     <link rel="stylesheet" href="./swiper/swiper-bundle.css">
  12.     <link rel="stylesheet" href="./css/index.css">
  13.  
  14. </head>
  15.  
  16. <body>
  17.     <header>
  18.         <ul class="left">
  19.             <li><a href="">中国大陆</a></li>
  20.             <li><a href="./登录页.html" id="qing">亲，请登录</a></li>
  21.             <li><a href="">免费注册</a></li>
  22.             <li><a href="">手机逛淘宝</a></li>
  23.             <li><a href="">网页无障碍</a></li>
  24.         </ul>
  25.         <ul class="right">
  26.             <li><a href="" id="qing">淘宝网首页</a></li>
  27.             <li><svg class="icon" aria-hidden="true">
  28.                     <use xlink:href="#icon-03f"></use>
  29.                 </svg><a href="">我的淘宝</a></li>
  30.             <li><a href="">购物车</a></li>
  31.             <li><a href="">收藏夹</a></li>
  32.             <li><a href="">商品分类</a></li>
  33.             <li><a href="">免费开店</a></li>
  34.             <li><a href="">千牛卖家中心</a></li>
  35.             <li><a href="">联系客服</a></li>
  36.         </ul>
  37.     </header>
  38.     <div class="nav">
  39.         <div class="r-img">
  40.             <img src="./img/logo.webp" alt="">
  41.         </div>
  42.  
  43.         <div class="input">
  44.             <div class="case">
  45.                 <input type="text" class="ipt" placeholder="枕头">
  46.                 <button class="btn">搜索</button>
  47.             </div>
  48.             <ul class="list">
  49.                 <li><a href="" id="ju">聚划算</a></li>
  50.                 <li><a href="">玩具</a></li>
  51.                 <li><a href="">沐浴露</a></li>
  52.                 <li><a href="">枕头</a></li>
  53.                 <li><a href="">保鲜袋</a></li>
  54.                 <li><a href="">抽纸</a></li>
  55.                 <li><a href="">保温杯</a></li>
  56.                 <li><a href="">袜子</a></li>
  57.                 <li><a href="">手机壳</a></li>
  58.                 <li><a href="">拖鞋</a></li>
  59.             </ul>
  60.         </div>
  61.     </div>
  62.     <!-- 主体 -->
  63.     <div class="main">
  64.         <!-- 侧边栏 -->
  65.         <ul class="sidebar">
  66.             <li>
  67.                 <div class="l-left"><img src="./img/im1.png" alt="" class="ren"><br>
  68.                     女人</div>
  69.                 <div class="r-right"><a href="" id="smiler">连衣裙冬</a>
  70.                     <a href="">牛仔裤</a>
  71.                     <a href="">帽子</a>
  72.                     <a href="">鞋子</a>
  73.                     <a href="">长裙</a>
  74.                     <a href="">半身裙</a>
  75.                     <a href="">内搭</a>
  76.                     <a href="">高跟鞋</a>
  77.                 </div>
  78.             </li>
  79.             <li>
  80.                 <div class="l-left"><img src="./img/im2.png" alt="" class="ren"><br>
  81.                     男人</div>
  82.                 <div class="r-right">
  83.  
  84.                     <a href="">男鞋</a>
  85.                     <a href="">潮男鞋</a>
  86.                     <a href="">牛仔裤</a>
  87.                     <a href="" id="smiler">打底衫</a>
  88.                     <a href="">外套</a>
  89.                     <a href="">电动车</a>
  90.                     <a href="">短靴子</a>
  91.                     <a href="">棒球服</a>
  92.  
  93.                 </div>
  94.             </li>
  95.             <li>
  96.                 <div class="l-left"><img src="./img/im3.png" alt="" class="ren"><br>
  97.                     数码</div>
  98.                 <div class="r-right">
  99.  
  100.                     <a href="">耳机</a>
  101.                     <a href="">洗衣机</a>
  102.                     <a href="">冰箱</a>
  103.                     <a href="">键盘</a>
  104.                     <a href="">护膝</a>
  105.                     <a href="" id="smiler">笔记本</a>
  106.                     <a href="">饮水机</a>
  107.                     <a href="">空调</a>
  108.  
  109.                 </div>
  110.             </li>
  111.             <li>
  112.                 <div class="l-left"><img src="./img/im4.png" alt="" class="ren"><br>
  113.                     母婴</div>
  114.                 <div class="r-right">
  115.  
  116.                     <a href="">羽绒衣</a>
  117.                     <a href="">卫衣</a>
  118.                     <a href="">针织衫</a>
  119.                     <a href="" id="smiler">笔袋</a>
  120.                     <a href="">护膝</a>
  121.                     <a href="">饼干</a>
  122.                     <a href="">奶粉</a>
  123.                     <a href="">餐椅</a>
  124.  
  125.                 </div>
  126.             </li>
  127.         </ul>
  128.  
  129.         <!-- 轮播图 -->
  130.  
  131.         <div class="swiper clearfix">
  132.             <div class="swiper-wrapper">
  133.                 <div class="swiper-slide"><img src="./img/1-1.webp" alt="" id="web"></div>
  134.                 <div class="swiper-slide"><img src="./img/1-2.webp" alt="" id="web"></div>
  135.  
  136.  
  137.             </div>
  138.             <!-- 如果需要分页器 -->
  139.             <div class="swiper-pagination"></div>
  140.  
  141.             <!-- 如果需要导航按钮 -->
  142.             <div class="swiper-button-prev"></div>
  143.             <div class="swiper-button-next"></div>
  144.  
  145.             <!-- 如果需要滚动条 -->
  146.             <div class="swiper-scrollbar"></div>
  147.         </div>
  148.  
  149.         <script src="./swiper/swiper-bundle.js"></script>
  150.         <script>
  151.             var mySwiper = new Swiper('.swiper', {
  152.                 // direction: 'vertical', // 垂直切换选项
  153.                 loop: true, // 循环模式选项
  154.  
  155.                 // 如果需要分页器
  156.                 pagination: {
  157.                     el: '.swiper-pagination',
  158.                 },
  159.  
  160.                 // 如果需要前进后退按钮
  161.                 navigation: {
  162.                     nextEl: '.swiper-button-next',
  163.                     prevEl: '.swiper-button-prev',
  164.                 },
  165.                 autoplay: true,
  166.                 // 如果需要滚动条
  167.                 // scrollbar: {
  168.                 //   el: '.swiper-scrollbar',
  169.                 // },
  170.             })        
  171.         </script>
  172.  
  173.         <!-- 主体右侧 -->
  174.         <div class="wod">
  175.  
  176.             <img src="./img/img.png" alt="" class="slide">
  177.  
  178.         </div>
  179.     </div>
  180.     <!-- 猜你喜欢 -->
  181.     <div class="cai">
  182.         猜你喜欢
  183.     </div>
  184.     <table>
  185.         <tr>
  186.             <td><img src="./img/t1.webp" alt="" class="imgt">
  187.                 <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
  188.                 <p class="month">月销量过万</p>
  189.                 <p>到手价<span class="num">￥28</span></p>
  190.                 <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
  191.             </td>
  192.             <td><img src="./img/t1.webp" alt="" class="imgt">
  193.                 <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
  194.                 <p class="month">月销量过万</p>
  195.                 <p>到手价<span class="num">￥28</span></p>
  196.                 <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
  197.             </td>
  198.             <td><img src="./img/t1.webp" alt="" class="imgt">
  199.                 <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
  200.                 <p class="month">月销量过万</p>
  201.                 <p>到手价<span class="num">￥28</span></p>
  202.                 <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
  203.             </td>
  204.             <td><img src="./img/t1.webp" alt="" class="imgt">
  205.                 <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
  206.                 <p class="month">月销量过万</p>
  207.                 <p>到手价<span class="num">￥28</span></p>
  208.                 <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
  209.             </td>
  210.             <td><img src="./img/t1.webp" alt="" class="imgt">
  211.                 <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
  212.                 <p class="month">月销量过万</p>
  213.                 <p>到手价<span class="num">￥28</span></p>
  214.                 <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
  215.             </td>
  216.         </tr>
  217.         <tr>
  218.             <td><img src="./img/t1.webp" alt="" class="imgt">
  219.                 <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
  220.                 <p class="month">月销量过万</p>
  221.                 <p>到手价<span class="num">￥28</span></p>
  222.                 <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
  223.             </td>
  224.             <td><img src="./img/t1.webp" alt="" class="imgt">
  225.                 <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
  226.                 <p class="month">月销量过万</p>
  227.                 <p>到手价<span class="num">￥28</span></p>
  228.                 <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
  229.             </td>
  230.             <td><img src="./img/t1.webp" alt="" class="imgt">
  231.                 <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
  232.                 <p class="month">月销量过万</p>
  233.                 <p>到手价<span class="num">￥28</span></p>
  234.                 <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
  235.             </td>
  236.             <td><img src="./img/t1.webp" alt="" class="imgt">
  237.                 <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
  238.                 <p class="month">月销量过万</p>
  239.                 <p>到手价<span class="num">￥28</span></p>
  240.                 <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
  241.             </td>
  242.             <td><img src="./img/t1.webp" alt="" class="imgt">
  243.                 <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
  244.                 <p class="month">月销量过万</p>
  245.                 <p>到手价<span class="num">￥28</span></p>
  246.                 <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
  247.             </td>
  248.         </tr>
  249.         <tr>
  250.             <td><img src="./img/t1.webp" alt="" class="imgt">
  251.                 <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
  252.                 <p class="month">月销量过万</p>
  253.                 <p>到手价<span class="num">￥28</span></p>
  254.                 <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
  255.             </td>
  256.             <td><img src="./img/t1.webp" alt="" class="imgt">
  257.                 <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
  258.                 <p class="month">月销量过万</p>
  259.                 <p>到手价<span class="num">￥28</span></p>
  260.                 <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
  261.             </td>
  262.             <td><img src="./img/t1.webp" alt="" class="imgt">
  263.                 <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
  264.                 <p class="month">月销量过万</p>
  265.                 <p>到手价<span class="num">￥28</span></p>
  266.                 <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
  267.             </td>
  268.             <td><img src="./img/t1.webp" alt="" class="imgt">
  269.                 <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
  270.                 <p class="month">月销量过万</p>
  271.                 <p>到手价<span class="num">￥28</span></p>
  272.                 <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
  273.             </td>
  274.             <td><img src="./img/t1.webp" alt="" class="imgt">
  275.                 <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
  276.                 <p class="month">月销量过万</p>
  277.                 <p>到手价<span class="num">￥28</span></p>
  278.                 <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
  279.             </td>
  280.         </tr>
  281.         <tr>
  282.             <td><img src="./img/t1.webp" alt="" class="imgt">
  283.                 <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
  284.                 <p class="month">月销量过万</p>
  285.                 <p>到手价<span class="num">￥28</span></p>
  286.                 <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
  287.             </td>
  288.             <td><img src="./img/t1.webp" alt="" class="imgt">
  289.                 <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
  290.                 <p class="month">月销量过万</p>
  291.                 <p>到手价<span class="num">￥28</span></p>
  292.                 <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
  293.             </td>
  294.             <td><img src="./img/t1.webp" alt="" class="imgt">
  295.                 <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
  296.                 <p class="month">月销量过万</p>
  297.                 <p>到手价<span class="num">￥28</span></p>
  298.                 <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
  299.             </td>
  300.             <td><img src="./img/t1.webp" alt="" class="imgt">
  301.                 <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
  302.                 <p class="month">月销量过万</p>
  303.                 <p>到手价<span class="num">￥28</span></p>
  304.                 <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
  305.             </td>
  306.             <td><img src="./img/t1.webp" alt="" class="imgt">
  307.                 <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
  308.                 <p class="month">月销量过万</p>
  309.                 <p>到手价<span class="num">￥28</span></p>
  310.                 <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
  311.             </td>
  312.         </tr>
  313.     </table>
  314.  
  315.     <!-- 底部 -->
  316.     <div class="footer">
  317.  
  318.         <div class="two">
  319.             <ul class="two-3">
  320.  
  321.                 <li>联系客服</li>
  322.                 <li>开放平台</li>
  323.                 <li>法律声明</li>
  324.                 <li>廉正举报</li>
  325.                 <li>Taobao.com版权所有2003-现在</li>
  326.                 <li>增值电信业务经营许可证:浙B2-20070195</li>
  327.                 <li>浙公网安备33010002000075号</li>
  328.  
  329.             </ul>
  330.             <ul class="two-1">
  331.                 <li>阿里巴巴集团</li>
  332.                 <li>|</li>
  333.                 <li>淘宝网</li>
  334.                 <li>|</li>
  335.                 <li>天猫</li>
  336.                 <li>|</li>
  337.                 <li>聚划算</li>
  338.                 <li>|</li>
  339.                 <li>全球速卖通</li>
  340.                 <li>|</li>
  341.                 <li>阿里巴巴国际交易市场</li>
  342.                 <li>|</li>
  343.                 <li>1688│</li>
  344.                 <li>|</li>
  345.                 <li>阿里妈妈</li>
  346.                 <li>|</li>
  347.                 <li>飞猪</li>
  348.                 <li>|</li>
  349.                 <li>阿里云计算</li>
  350.                 <li>|</li>
  351.                 <li>AiOS</li>
  352.                 <li>|</li>
  353.                 <li>阿里通信</li>
  354.                 <li>|</li>
  355.                 <li>高德</li>
  356.                 <li>|</li>
  357.                 <li>UC</li>
  358.             </ul>
  359.             <ul class="two-2">
  360.                 <li>友盟</li>
  361.                 <li>|</li>
  362.                 <li>虾米|</li>
  363.                 <li>|</li>
  364.                 <li>钉钉</li>
  365.                 <li>|</li>
  366.                 <li>支付宝</li>
  367.                 <li>|</li>
  368.                 <li>达摩院</li>
  369.             </ul>
  370.         </div>
  371.  
  372.     </div>
  373.  
  374. </body>
  375.  
  376. </html>

css代码 

  1. * {
  2.     padding: 0;
  3.     margin: 0;
  4.     text-decoration: none;
  5.     list-style: none;
  6. }
  7.  
  8. body {
  9.     background-color: rgb(246, 246, 246);
  10. }
  11.  
  12. html,
  13. body {
  14.     padding: 0;
  15.     margin: 0;
  16.     width: 100%;
  17.     height: 100%;
  18.     position: absolute;
  19.     left: 0;
  20.     top: 0;
  21.     overflow: hidden;
  22.     overflow-y: auto;
  23. }
  24.  
  25. /* 头部导航 */
  26. header {
  27.     width: 10rem;
  28.     display: flex;
  29.     justify-content: space-between;
  30. }
  31.  
  32. .left {
  33.     display: flex;
  34.     width: 2.521rem;
  35.     justify-content: space-between;
  36.  
  37. }
  38.  
  39. #qing {
  40.     color: rgb(242, 67, 26);
  41. }
  42.  
  43. .right {
  44.     display: flex;
  45.     width: 4.2017rem;
  46.     justify-content: space-between;
  47. }
  48.  
  49. .left>li>a {
  50.     font-size: .1008rem;
  51.     color: black;
  52. }
  53.  
  54. .right>li>a {
  55.     font-size: .1008rem;
  56.     color: black;
  57. }
  58.  
  59. /* 导航 */
  60.  
  61. /* logo */
  62.  
  63. .r-img {
  64.     margin-left: .2521rem;
  65.     margin-right: .4202rem;
  66.     margin-top: .1681rem;
  67. }
  68.  
  69. /* 搜索框 */
  70. .input {
  71.     margin-top: .1681rem;
  72. }
  73.  
  74. .r-img>img {
  75.     width: 1.0588rem;
  76.     height: .4538rem;
  77.  
  78. }
  79.  
  80. .case {
  81.     width: 5.7983rem;
  82.     height: .3109rem;
  83.     border-radius: .1555rem;
  84.     border: 2px solid rgb(253, 63, 49);
  85.     background-color: white;
  86.     position: relative;
  87. }
  88.  
  89. .ipt {
  90.     width: 4.7395rem;
  91.     height: .2185rem;
  92.     outline: none;
  93.     border: none;
  94.     position: absolute;
  95.     top: 1px;
  96.     left: .084rem;
  97.     font-size: .1008rem;
  98.  
  99. }
  100.  
  101.  
  102. .btn {
  103.     width: .6134rem;
  104.     height: .2857rem;
  105.     outline: none;
  106.     border: none;
  107.     border-radius: .1429rem;
  108.     background-color: rgb(254, 79, 107);
  109.     color: white;
  110.     float: right;
  111.     margin-top: .0168rem;
  112.     font-size: .1092rem;
  113.  
  114. }
  115.  
  116. /* 搜索框下方导航 */
  117. .nav {
  118.     width: 10rem;
  119.     height: 1rem;
  120.     display: flex;
  121. }
  122.  
  123. .list {
  124.     display: flex;
  125.     width: 3.3613rem;
  126.     justify-content: space-between;
  127.     font-size: .1008rem;
  128.  
  129. }
  130.  
  131. .list>li>a {
  132.     color: rgb(110, 117, 121);
  133. }
  134.  
  135. #ju {
  136.     color: rgb(254, 79, 107);
  137. }
  138.  
  139.  
  140.  
  141.  
  142. /* 主体 */
  143.  
  144. .main {
  145.     width: 10rem;
  146.     height: 2.3529rem;
  147.     /* background-color: aquamarine; */
  148.     display: flex;
  149. }
  150.  
  151. /* 侧边栏 */
  152. .sidebar {
  153.     width: 2.3529rem;
  154.     float: left;
  155. }
  156.  
  157. .sidebar>li {
  158.     height: .5882rem;
  159.     display: flex;
  160.     text-align: center;
  161. }
  162.  
  163. .r-right>a {
  164.     font-size: .1008rem;
  165.     margin-right: .084rem;
  166.     color: rgb(110, 107, 107);
  167. }
  168.  
  169. #smiler {
  170.     color: rgb(255, 63, 154);
  171. }
  172.  
  173. .l-left {
  174.     font-size: .1008rem;
  175. }
  176.  
  177. .r-right {
  178.     display: flex;
  179.     flex-wrap: wrap;
  180.     width: 1.9748rem;
  181. }
  182.  
  183. .image {
  184.     width: 5.1261rem;
  185.     height: 2.3529rem;
  186. }
  187.  
  188. .image>img {
  189.     width: 5.1261rem;
  190.     height: 2.3529rem;
  191. }
  192.  
  193.  
  194. .ren {
  195.     width: .3782rem;
  196.     height: .1513rem;
  197. }
  198.  
  199.  
  200.  
  201. /* 中间图片 */
  202.  
  203. .swiper {
  204.     --swiper-theme-color: white;
  205.     /* 设置Swiper风格 */
  206.     --swiper-navigation-color: #eff2f0;
  207.     /* 单独设置按钮颜色 */
  208.     --swiper-navigation-size: .0833rem;
  209.     /* 设置按钮大小 */
  210.     width: 5.1261rem;
  211.     height: 2.3529rem;
  212.     background-color: cyan;
  213.     float: left;
  214.  
  215.  
  216. }
  217.  
  218. /* 图片大小 */
  219. #web {
  220.     width: 5.1261rem;
  221.     height: 2.3529rem;
  222. }
  223.  
  224.  
  225. /* 主体右侧 */
  226. .slide {
  227.     width: 2.0084rem;
  228.     height: 2.3529rem;
  229.  
  230. }
  231.  
  232. .wod {
  233.     margin-left: .084rem;
  234.     float: left;
  235. }
  236.  
  237. /* 猜你喜欢 */
  238. .cai {
  239.     width: 10rem;
  240.     height: .3529rem;
  241.     font-size: .1513rem;
  242. }
  243.  
  244. /* 商品 */
  245. table {
  246.     width: 10rem;
  247.     border: 1px solid rgb(242, 242, 242);
  248.     border-collapse: collapse;
  249. }
  250.  
  251. table tr,
  252. td {
  253.     width: 1.8655rem;
  254.     height: 2.8235rem;
  255.     background-color: white;
  256.     border: 1px solid rgb(242, 242, 242);
  257. }
  258.  
  259. .imgt {
  260.     width: 1.7563rem;
  261.     height: 1.7647rem;
  262. }
  263.  
  264. p {
  265.     font-size: .1008rem;
  266.     color: rgb(110, 117, 121);
  267.     margin-top: .042rem;
  268.     margin-left: .084rem;
  269. }
  270.  
  271. span {
  272.     font-size: .1176rem;
  273. }
  274.  
  275. .tian {
  276.     font-size: .1008rem;
  277.     background-color: rgb(255, 0, 53);
  278.     color: white;
  279. }
  280.  
  281. .month {
  282.     color: rgb(254, 57, 100);
  283.     width: .5042rem;
  284.     height: .1429rem;
  285.     background-color: rgb(254, 238, 244);
  286. }
  287.  
  288. .num {
  289.     font-size: .1513rem;
  290.     color: rgb(255, 0, 53);
  291. }
  292.  
  293. .taidi {
  294.     font-size: .1176rem;
  295.     color: black;
  296. }
  297.  
  298. .number {
  299.     display: inline-block;
  300.     font-size: .1176rem;
  301.     color: white;
  302.     width: .437rem;
  303.     height: .2185rem;
  304.     background-color: rgb(255, 0, 54);
  305.     margin-right: .0168rem;
  306.     text-align: center;
  307.     margin-left: .3361rem;
  308.  
  309. }
  310.  
  311. .linqu {
  312.     width: .3529rem;
  313.     height: .2185rem;
  314.     background-color: rgb(255, 0, 54);
  315.     display: inline-block;
  316.     font-size: .1176rem;
  317.     color: white;
  318.     text-align: center;
  319.  
  320. }
  321.  
  322. /* 底部 */
  323. .footer {
  324.     width: 10rem;
  325.     margin-top: .1681rem;
  326. }
  327.  
  328. .two {
  329.     width: 8.2353rem;
  330.     height: .7261rem;
  331.     display: flex;
  332.     flex-direction: column;
  333.     justify-content: space-between;
  334.     margin-left: .5882rem;
  335.  
  336.  
  337.  
  338. }
  339.  
  340. .two-1>Li {
  341.     font-size: .1008rem;
  342.  
  343. }
  344.  
  345. .two-1 {
  346.     display: flex;
  347.  
  348.     justify-content: space-between;
  349.     flex-wrap: wrap;
  350.  
  351. }
  352.  
  353. .two-2 {
  354.     display: flex;
  355.  
  356. }
  357.  
  358. .two-2>li {
  359.     font-size: .1008rem;
  360.     margin-right: .084rem;
  361. }
  362.  
  363. .two>li {
  364.     font-size: 12px;
  365.     margin-right: .084rem;
  366. }
  367.  
  368. .two-3 {
  369.     display: flex;
  370.     justify-content: space-between;
  371.  
  372. }
  373.  
  374. .two-3>Li {
  375.     font-size: .1008rem;
  376.  
  377. }
  378.  
  379. .icon {
  380.     width: 1em;
  381.     height: 1em;
  382.     vertical-align: -0.15em;
  383.     fill: currentColor;
  384.     overflow: hidden;
  385.     font-size: .125rem;
  386. }

效果图 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/空白诗007/article/detail/996716
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号