search

博客列表 >淘宝页面模仿

淘宝页面模仿

P粉036614676
P粉036614676原创
2022年07月20日 11:19:11495浏览

预览

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <!-- 只用grid-template-columns，会自动到下面 -->
  5.     <!-- 文字的padding和盒子的padding -->
  6.     <!-- 只用grid-template-columns，会自动到下面 -->
  7.     <!-- 文字的padding和盒子的padding -->
  8.     <meta charset="UTF-8">
  9.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  10.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  11.     <title>移动端首页-1-整体</title>
  12.     <link rel="stylesheet" href="./css/reset.css">
  13.     <link rel="stylesheet" href="./font_ iconfont/iconfont.css">
  14.     <link rel="stylesheet" href="./css/public.css">
  15.     <link rel="stylesheet" href="./css/main.css">
  16.     <style>
  17.           *{
  18.     padding: 0;
  19.     margin: 0;
  20.     box-sizing: border-box;
  21. }
  22. a{
  23.     text-decoration: none;
  24. }
  25. li{
  26.     list-style: none;
  27. }
  28. body{
  29.     /* 吸色器 */
  30.     font-size: 0.13rem;
  31.     padding: 0 0.15rem;
  32.     margin: auto;
  33.     background-color: #f4f4f4;
  34.     color: #333333;
  35. }
  36. html{
  37.     font-size: calc(100vw / 3.75);
  38. }
  39. @media (max-width:320px) {
  40.     html{
  41.         font-size: 85px;
  42.     }
  43. }
  44. @media (min-width:640px) {
  45.     html{
  46.         font-size: 170px;
  47.     }
  48. }
  50. header,footer{
  51.     position: fixed;
  52.     height: 50px;
  53.     left: 0;
  54.     right: 0;
  55.     background-color: #f4f4f4;
  56.     display: grid;
  57.     place-items: center;
  58.     z-index: 100;
  59. }
  60. header{
  61.     top: 0;
  62.     grid-template-columns: 60px 1fr 30px;
  63.     gap: 10px;
  65. }
  66. footer{
  67.     bottom: 0;
  68.     grid-template-columns: repeat(3,1fr);
  70. }
  71. /* 头部 */
  72. header a{
  73.     width: 100%;
  74. }
  75. header a img{
  76.     width: 100%;
  77.     padding-left: 0.1rem;
  78. }
  79. .icon-qianbao{
  80.     font-size: 0.2rem;
  81.     color: rgb(255, 80, 0);
  82.     padding-right: 0.1rem;
  83. }
  84. .top-middle{
  85.     display: flex;
  86.     width: 100%;
  87.     place-content: space-between;
  88.     place-items: center;
  89.     border: 2px solid rgb(255, 80, 0);
  90.     padding: 2px 0;
  91.     border-radius: 20px;
  92.     color: rgb(93, 85, 85);
  93. }
  94. .top-middle span:nth-of-type(2){
  95.     padding: 0.03rem 0.08rem;
  96.     background: linear-gradient(to left, #ff5000, #ffa000);
  97.     color: white;
  98.     border-radius: 0.2rem;
  99.     margin-right: 0.02rem;
  100. }
  101. /* 尾部 */
  102. footer a{
  103.     display: flex;
  104.     flex-direction: column;
  105.     place-items: center;
  106.     color:rgb(255, 80, 0);
  107.  }
  108.  footer a:nth-of-type(1){
  109.     font-size: 0.4rem;
  110.  }
  111.  footer a span:nth-of-type(1){
  112.     font-size: larger;
  113.  }
  115.  main{
  116.     background-color: #fff;
  117.     min-height: 1500px;
  118.     position: relative;
  119.     top: 50px;
  120. }
  121. main .navs{
  122.     display: grid;
  123.     width: 100%;
  124.     grid-template-columns: repeat(5,1fr);
  125.     place-content: center;
  126.     gap: 0 0.1rem;
  127. }
  128. main .navs li{
  129.     display: grid;
  130.     place-items: center;
  131. }
  132. img{
  133.     width: 100%;
  134. }
  135. main .middle{
  136.     display: grid;
  137.     grid-template-columns: repeat(2,1fr);
  138.     width: 100%;
  139.     place-content: center;
  140.     gap: 0.1rem;
  141.  }
  142.  main .middle li{
  143.     display: grid;
  144.     grid-template-columns: repeat(2,1fr);
  145.     grid-template-rows: 0.2rem 0.8rem;
  146.  }
  147.  main .middle li div{
  148.     grid-area: 1 / 1 /span 1 /span 2;
  149.     display: flex;
  150.  }
  151.  main .middle li div span{
  152.     padding: 0.01rem;
  153.     background-color: rgb(255, 80, 0);
  154.     border-radius: 0.08rem;
  155.  }
  157.  .list{
  158.     display: grid;
  159.     grid-template-columns: repeat(2,1fr);
  160.     place-content: center;
  161.     margin-top: 0.2rem;
  162.     gap: 0.1rem 0.1rem;
  163.     padding-bottom: 50px;
  164.  }
  165. a{
  166.     color: rgb(67, 66, 66);
  167. }
  168. main .list .item img {
  169.     border-radius: 0.1rem 0.1rem 0 0;
  170.   }
  171. .price{
  172.     display: flex;
  173.     width: 1.5rem;
  174.     place-content: space-between;
  175. }
  176. .price span{
  177.     font-size: smaller;
  178. }
  179.     </style>
  180. </head>
  181. <body>
  182.      <header>
  183.         <a href=""><img src="./images/taobao.png" alt=""></a>
  184.         <a href="" class="top-middle">
  185.             <span>寻找宝贝店铺</span>
  186.             <span>搜索</span>
  187.         </a>
  188.         <a class="iconfont icon-qianbao"></a>
  189.      </header>
  191.      <main>
  192.          <ul class="navs">
  193.             <li>
  194.                 <a href=""><img src="./images/navs/tmxb.webp" alt=""></a>
  195.                 <a href="">天猫新品</a>
  196.             </li>
  197.             <li>
  198.                 <a href=""><img src="./images/navs/jrbk.webp" alt=""></a>
  199.                 <a href="">今日爆款</a>
  200.             </li>
  201.             <li><a href="">
  202.                 <img src="./images/navs/tmgj.webp" alt=""></a>
  203.                 <a href="">天猫国际</a>
  204.             </li>
  205.             <li>
  206.                 <a href=""><img src="./images/navs/fzlx.webp" alt=""></a>
  207.                 <a href="">飞猪旅行</a>
  208.             </li>
  209.             <li>
  210.                 <a href=""><img src="./images/navs/tmcx.webp" alt=""></a>
  211.                 <a href="">天猫超市</a>
  212.             </li>
  213.             <li>
  214.                 <a href=""><img src="./images/navs/tbch.webp" alt=""></a>
  215.                 <a href="">淘宝吃货</a>
  216.             </li>
  217.             <li>
  218.                 <a href=""><img src="./images/navs/sqk.webp" alt=""></a>
  219.                 <a href="">省钱卡</a>
  220.             </li>
  221.             <li><a href="">
  222.                 <img src="./images/navs/ltjb.webp" alt=""></a>
  223.                 <a href="">领淘金币</a>
  224.             </li>
  225.             <li>
  226.                 <a href=""><img src="./images/navs/alpm.webp" alt=""></a>
  227.                 <a href="">阿里拍卖</a>
  228.             </li>
  229.             <li>
  230.                 <a href=""><img src="./images/navs/fl.webp" alt=""></a>
  231.                 <a href="">分类</a>
  232.             </li>
  233.          </ul>
  235.          <ul class="middle">
  236.             <li>
  237.                 <div>
  238.                     <h3>聚划算</h3>
  239.                     <span>品牌折扣</span>
  240.                 </div>
  241.                 <a href=""><img src="./images/items/item-1.webp"></a>
  242.                 <a href=""><img src="./images/items/item-2.webp" alt=""></a>
  243.             </li>
  244.             <li>
  245.                 <div>
  246.                     <h3>天天特价</h3>
  247.                     <span>一元秒杀</span>
  248.                 </div>
  249.                 <a href=""><img src="./images/items/item-3.webp" alt=""></a>
  250.                 <a href=""><img src="./images/items/item-4.webp" alt=""></a>
  251.             </li>
  252.             <li>
  253.                 <div>
  254.                     <h3>有好货</h3>
  255.                     <span>好口碑</span>
  256.                 </div>
  257.                 <a href=""><img src="./images/items/item-5.webp" alt=""></a>
  258.                 <a href=""><img src="./images/items/item-6.webp" alt=""></a>
  259.             </li>
  260.             <li>
  261.                 <div>
  262.                     <h3>每日好店</h3>
  263.                     <span>特色</span>
  264.                 </div>
  265.                 <a href=""><img src="./images/items/item-7.webp" alt=""></a>
  266.                 <a href=""><img src="./images/items/item-8.webp" alt=""></a>
  267.             </li>
  268.          </ul>
  270.          <ul class="list">
  271.             <li class="item">
  272.               <a href=""><img src="images/items/item-9.webp" alt="" /></a>
  273.               <div class="desc">
  274.                 <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  275.                 <div class="price">
  276.                   <span class="iconfont icon-qianbao">288</span>
  277.                   <span>123人已购买</span>
  278.                 </div>
  279.               </div>
  280.             </li>
  281.             <li class="item">
  282.               <a href=""><img src="images/items/item-10.webp" alt="" /></a>
  283.               <div class="desc">
  284.                 <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  285.                 <div class="price">
  286.                   <span class="iconfont icon-qianbao">288</span>
  287.                   <span>123人已购买</span>
  288.                 </div>
  289.               </div>
  290.             </li>
  291.             <li class="item">
  292.               <a href=""><img src="images/items/item-11.webp" alt="" /></a>
  293.               <div class="desc">
  294.                 <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  295.                 <div class="price">
  296.                   <span class="iconfont icon-qianbao">288</span>
  297.                   <span>123人已购买</span>
  298.                 </div>
  299.               </div>
  300.             </li>
  301.             <li class="item">
  302.               <a href=""><img src="images/items/item-12.webp" alt="" /></a>
  303.               <div class="desc">
  304.                 <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  305.                 <div class="price">
  306.                   <span class="iconfont icon-qianbao">288</span>
  307.                   <span>123人已购买</span>
  308.                 </div>
  309.               </div>
  310.             </li>
  312.             <li class="item">
  313.               <a href=""><img src="images/items/item-13.webp" alt="" /></a>
  314.               <div class="desc">
  315.                 <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  316.                 <div class="price">
  317.                   <span class="iconfont icon-qianbao">288</span>
  318.                   <span>123人已购买</span>
  319.                 </div>
  320.               </div>
  321.             </li>
  322.             <li class="item">
  323.               <a href=""><img src="images/items/item-14.webp" alt="" /></a>
  324.               <div class="desc">
  325.                 <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  326.                 <div class="price">
  327.                   <span class="iconfont icon-qianbao">288</span>
  328.                   <span>123人已购买</span>
  329.                 </div>
  330.               </div>
  331.             </li>
  333.             <li class="item">
  334.               <a href=""><img src="images/items/item-15.webp" alt="" /></a>
  335.               <div class="desc">
  336.                 <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  337.                 <div class="price">
  338.                   <span class="iconfont icon-qianbao">288</span>
  339.                   <span>123人已购买</span>
  340.                 </div>
  341.               </div>
  342.             </li>
  343.             <li class="item">
  344.               <a href=""><img src="images/items/item-16.webp" alt="" /></a>
  345.               <div class="desc">
  346.                 <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  347.                 <div class="price">
  348.                   <span class="iconfont icon-qianbao">288</span>
  349.                   <span>123人已购买</span>
  350.                 </div>
  351.               </div>
  352.             </li>
  354.             <li class="item">
  355.               <a href=""><img src="images/items/item-17.webp" alt="" /></a>
  356.               <div class="desc">
  357.                 <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  358.                 <div class="price">
  359.                   <span class="iconfont icon-qianbao">288</span>
  360.                   <span>123人已购买</span>
  361.                 </div>
  362.               </div>
  363.             </li>
  364.             <li class="item">
  365.               <a href=""><img src="images/items/item-18.webp" alt="" /></a>
  366.               <div class="desc">
  367.                 <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  368.                 <div class="price">
  369.                   <span class="iconfont icon-qianbao">288</span>
  370.                   <span>123人已购买</span>
  371.                 </div>
  372.               </div>
  373.             </li>
  375.             <li class="item">
  376.               <a href=""><img src="images/items/item-19.webp" alt="" /></a>
  377.               <div class="desc">
  378.                 <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  379.                 <div class="price">
  380.                   <span class="iconfont icon-qianbao">288</span>
  381.                   <span>123人已购买</span>
  382.                 </div>
  383.               </div>
  384.             </li>
  385.             <li class="item">
  386.               <a href=""><img src="images/items/item-20.webp" alt="" /></a>
  387.               <div class="desc">
  388.                 <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  389.                 <div class="price">
  390.                   <span class="iconfont icon-qianbao">288</span>
  391.                   <span>123人已购买</span>
  392.                 </div>
  393.               </div>
  394.             </li>
  396.             <li class="item">
  397.               <a href=""><img src="images/items/item-21.webp" alt="" /></a>
  398.               <div class="desc">
  399.                 <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  400.                 <div class="price">
  401.                   <span class="iconfont icon-qianbao">288</span>
  402.                   <span>123人已购买</span>
  403.                 </div>
  404.               </div>
  405.             </li>
  406.             <li class="item">
  407.               <a href=""><img src="images/items/item-22.webp" alt="" /></a>
  408.               <div class="desc">
  409.                 <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  410.                 <div class="price">
  411.                   <span class="iconfont icon-qianbao">288</span>
  412.                   <span>123人已购买</span>
  413.                 </div>
  414.               </div>
  415.             </li>
  416.           </ul>
  417.      </main>
  419.      <footer>
  420.         <a href="" class="iconfont icon-shejiaotubiao-44"></a>
  422.         <a href="">
  423.             <span class="iconfont icon-gouwuche"></span>
  424.             <span>购物车</span>
  425.         </a>
  427.         <a href="">
  428.             <span class="iconfont icon-wode"></span>
  429.             <span>我的淘宝</span>
  430.         </a>
  431.      </footer>
  432. </body>
  433. </html>
上一条：递归神经网络（RNN）下一条：前沿高端技术之递归神经网络（RNN）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多