ASCII码 ASCII码

仿淘宝移动端首页

发布于：2022-05-13 10:14:56  栏目：技术文档

淘宝移动端首页

1.官方实图

2 .效果图

3.代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.    <link rel="stylesheet" href="2.css">
  8.    <link rel="stylesheet" href="//at.alicdn.com/t/font_3375711_ufjbbl3qkv.css">
  9.     <title>Document</title>
  10. </head>
  11. <body >
  12.     <header>
  13.         <!-- 顶部 -->
  14.         <div class="top">
  15.             <div class="logo iconfont icon-taobao"></div>
  16.             <div class="search">
  17.                 <div class="bb">
  18.                 <span class="xun">寻找宝贝店铺 </span>
  19.                 <div class="ss"><span >搜索</span></div>
  20.             </div>
  21.             </div>
  22.             <div class="qdao"><img src="../5.8/img/O1CN01ftum4629SHP6bCqTm_!!6000000008066-2-tps-99-99.png" alt=""></div>
  23.         </div>
  25.         <ul class="nav">
  26.             <li class="item"><a href=""><img src="../5.8/img/1.png" alt=""></a>天猫新品</li>
  27.             <li class="item"> <a href=""><img src="../5.8/img/2.png" alt=""></a>天猫新品</li>
  28.             <li class="item"> <a href=""><img src="../5.8/img/3.png" alt=""></a>天猫新品</li>
  29.             <li class="item"> <a href=""><img src="../5.8/img/4.png" alt=""></a>天猫新品</li>
  30.             <li class="item"> <a href=""><img src="../5.8/img/5.png" alt=""></a>天猫新品</li>
  31.             <li class="item"> <a href=""><img src="../5.8/img/6.png" alt=""></a>天猫新品</li>
  32.             <li class="item"> <a href=""><img src="../5.8/img/7.png" alt=""></a>天猫新品</li>
  33.             <li class="item"> <a href=""><img src="../5.8/img/8.png" alt=""></a>天猫新品</li>
  34.             <li class="item"> <a href=""><img src="../5.8/img/9.png" alt=""></a>天猫新品</li>
  35.             <li class="item"> <a href=""><img src="../5.8/img/10.png" alt=""></a>天猫新品</li>
  36.         </ul>
  38.         </header>
  39.         <main style="height: 1600px">
  40. <div class="navs" onclick="">
  41.     <div class="box">
  42.         <div class="title" >
  43.             <h3 class="jhs">聚划算</h3>
  44.             <span class="tag">品牌折扣</span>
  45.         </div>
  46.         <div class="dsec">
  47.         <div class="left"><img src="./img/11.webp" alt=""></div>
  48.         <div class="right"> <img src="./img/12.webp" alt=""></div>
  49.     </div>
  50.     </div>
  51.     <div class="box">
  52.         <div class="title">
  53.             <h3 class="jhs">天天特卖</h3>
  54.             <span class="tag">1元秒杀</span>
  55.         </div>
  56.         <div class="dsec">
  57.         <div class="left"><img src="./img/13.webp" alt=""></div>
  58.         <div class="right"><img src="./img/14.webp" alt=""></div>
  59.     </div>
  60.     </div>
  61.     <div class="box">
  62.         <div class="title">
  63.             <h3 class="jhs">有好货</h3>
  64.             <span class="tag" style="background-color: rgb(63,142,227)">好口碑</span>
  65.         </div>
  66.         <div class="dsec">
  67.         <div class="left"><img src="./img/15.webp" alt=""></div>
  68.         <div class="right"><img src="./img/16.webp" alt=""></div>
  69.     </div>
  70.     </div>
  71.     <div class="box">
  72.         <div class="title">
  73.             <h3 class="jhs">每日好店</h3>
  74.             <span class="tag" style="background-color: rgb(241,156,60)">特色</span>
  75.         </div>
  76.         <div class="dsec">
  77.         <div class="left"><img src="./img/17.webp" alt=""></div>
  78.         <div class="right"><img src="./img/18.webp" alt=""></div>
  79.     </div>
  80.     </div>
  81. </div>
  82. <div class="bot">
  83.     <div class="tp"><img src="./img/19.webp" alt=""></div>
  84.     <div class="box">
  85.         <img src="./img/20.webp" alt="">
  86.       <div class="tt"><span >鸣笛加厚不锈钢电水壶家用烧水壶大容量电热水壶茶壶燃气电磁炉用</span></div>
  87.         <div class="jg"><span class="qian" style="color:rgb(238,113,64)">￥&nbsp;20</span><span class="rs">900+人已购买</span></div>
  88.     </div>
  89.     <div class="box">
  90.         <img src="./img/21.webp" alt="">
  91.       <div class="tt"><span >厨房洗菜篮子不锈钢沥水篮洗菜盆网篮圆形水果篮果盘淘米篮洗米筛</span></div>
  92.         <div class="jg"><span class="qian" style="color:rgb(238,113,64)">￥&nbsp;11.2</span><span class="rs">48人已购买</span></div>
  93.     </div>
  94.     <div class="box">
  95.         <img src="./img/22.webp" alt="">
  96.       <div class="tt"><span >100支埃及棉纯棉贡缎四件套1.8m 米长绒棉全棉春秋田园风美式简约</span></div>
  97.         <div class="jg"><span class="qian" style="color:rgb(238,113,64)">￥&nbsp;286</span><span class="rs">17人已购买</span></div>
  98.     </div>
  99.     <div class="box">
  100.         <img src="./img/23.webp" alt="">
  101.       <div class="tt"><span >日本进口盘御浓烧青海波盘子碟子日式和风餐具碗釉下彩陶瓷面碗</span></div>
  102.         <div class="jg"><span class="qian" style="color:rgb(238,113,64)">￥&nbsp;24.5</span><span class="rs">100+人已购买</span></div>
  103.     </div>
  104.     <div class="box">
  105.         <img src="./img/24.webp" alt="">
  106.       <div class="tt"><span >日本进口盘御浓烧青海波盘子碟子日式和风餐具碗釉下彩陶瓷面碗</span></div>
  107.         <div class="jg"><span class="qian" style="color:rgb(238,113,64)">￥&nbsp;16.5</span><span class="rs">100+人已购买</span></div>
  108.     </div>
  109. </div>
  110.         </main>
  111.         <div class="bt">
  112.    <button class="anniu">打开淘宝</button>
  113. </div>
  114.     <footer>
  115.         <div class="item a">
  116.             <a href="" class="iconfont icon-shejiaotubiao-44"></a>
  117.         </div>
  118.         <div class="item">
  119.             <a href="" class="iconfont icon-gouwuche"></a>
  120.             <a href="">购物车</a>
  121.         </div>
  122.         <div class="item">
  123.             <a href="" class="iconfont icon-wodetaobao "></a>
  124.             <a href="">我的淘宝</a>
  125.         </div>
  126.     </footer>
  127. </body>
  128. </html>

css

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5. }
  7. a{
  8.     text-decoration: none;
  9. }
  11. li{
  12.     list-style: none;
  13. }
  15. :root{
  16.     font-size: calc(100vw / 3.75);
  17. }
  19. body{
  20.     font-size: 0.12rem;
  21.     max-width: 720px;
  22.     min-width: 320px;
  23.     margin: auto;
  24.     background-color: #f4f4f4;
  25. }
  26. @media screen and (max-width: 320px) {
  27.     :root {
  28.        font-size: 85px;
  29.    }
  30. }
  32. @media screen and (min-width: 640px) {
  33.     :root {
  34.        font-size: 170px;
  35.    }
  36. }
  38. header {
  39.     position: relative;
  40. }
  41. header .top{
  42.     width: 100vw;
  43.     height: 51px;
  44.     position: fixed;
  45.     left: 0;
  46.     right: 0;
  47.     top: 0;
  48.     background-color: #f4f4f4;
  49.     display: grid;
  50.     grid-template-columns: 50px 1fr 35px;
  51.     gap: 0 10px;
  52.     padding: 0.05rem;
  54. }
  55. header .top .search .bb{
  56. display: grid;
  57. grid-template-columns: repeat(2,1fr);
  58. grid-template-rows: 35px;
  59. }
  60. header .top .search .bb .xun{
  61.     place-self: center start;
  62.   font-size: 0.14rem;
  63.   color: rgb(102,102,102);
  64.   padding-left: 20px;
  65.   padding-bottom: 4px;
  66. }
  67. header .top .search .bb .ss{
  68.     place-self: center end;
  69.    display: grid;
  70.    grid-template-columns: 0.6rem;
  71.    grid-template-rows: 27px;
  72.  margin-bottom: 7px;
  73.  margin-top: 3px;
  74.  padding: 1px 0;
  75.     font-size: 0.14rem;
  76.     color: #fff;
  77.     border-radius: 0.16rem;
  78.     border: 0.01rem solid #fff;
  80.     background: linear-gradient(to right, #FF8D0E, #FF5000);
  81. }
  82. header .top .search .bb .ss span{
  83.     place-self: center;
  84. }
  85. header .top .search{
  86.     height: 35px;
  87.     border: 0.015rem solid #ff5000;
  88.     border-radius: 0.5rem;
  89. }
  90. header .top .qdao img{
  91.     width: 100%;
  92.     padding-top: .01rem;
  94. }
  96. header .top .logo{
  97. font-size: 20px;
  98.     color: rgb(245, 97, 28);
  99.     place-self: center;
  100.     margin-left: 0.05rem;
  102. }
  103. header .nav{
  104.     position:absolute;
  105.     top: 51px;
  106.     display: grid;
  107.     grid-template-columns: repeat(5,1fr);
  108.     grid-template-rows: repeat(2,1fr);
  109.     padding: 0 0.05rem 0.15rem 0.05rem;
  110.     background:#fff;
  111.     margin: 0 0.1rem;
  112.  border-radius: 0.1rem;
  113. }
  114. header .nav .item{
  115.    display: grid;
  116.    place-items: center;
  117. }
  118. header .nav img{
  119.     width: 100%;
  120. }
  121. main .navs {
  123.     display: grid;
  124.     grid-template-rows: repeat(2,1fr);
  125.     grid-template-columns: repeat(2,1fr);
  126.     background-color: #fff;
  128.     border-radius: 0.2rem ;
  129. }
  130. main .navs .box:first-of-type{
  131.     border-right: 0.1px solid rgb(221, 218, 218);
  132.     border-bottom: 0.1px solid rgb(221, 218, 218); 
  133. }
  134. main .navs .box:last-of-type{
  135.     border-left: 0.4px solid rgb(221, 218, 218);
  136.     border-top: 0.1px solid rgb(221, 218, 218);
  137. }
  138. main .navs .box .dsec .right img{
  139.     width: 83.2px;
  140.     height: 83.2px;
  141. }
  143. main .navs .box .dsec .left img{
  144.     width: 65.52px;
  145.     height:65.52px;
  146. }
  147. main .navs .box .title{
  148.     display: flex;
  149. }
  150. main .navs .box .title .jhs{
  151.     font-size: 0.15rem;
  152.     color: #111111;
  153.     padding-left: 0.06rem;
  154.     margin-left: 0.03rem;
  155. }
  156. main .navs .box .dsec{
  157.     display: grid;
  158.     grid-template-columns: repeat(2,1fr);
  159.     place-items: center;
  160. }
  161. main .navs .box .title  .tag{
  162.     color: rgb(255, 255, 255);
  163.     font-size: 11px;
  164.     background-color: rgb(255, 66, 0);
  165.     border-radius: 0.02rem;
  166.     padding: 0 0.03rem;
  167.     margin-left: 0.1rem;
  168.     line-height: 0.14rem;
  169.     height: 0.14rem;
  171. }
  173. main{
  174.     position: relative;
  175.     top: calc(0.51rem + 1.66rem);
  176.     padding: 0.1rem;
  177.     margin-top: 1px;
  178. }
  179. main img{
  180.     width: 100%;
  181.     height: 100%;
  182. }
  183. main .bot{
  184.     display: grid;
  185.     grid-template-columns: repeat(2,1fr);
  186.     grid-template-rows: repeat(3,1fr);
  187.     gap: 10px;
  188.     position: relative;
  189.   top: 0.1rem;
  190. }
  191. main .bot img{
  192.     border-radius: 0.1rem;
  193. }
  194. main .bot .box{
  195.     display: grid;
  196.     border-radius: 0.1rem;
  197.     background-color: #fff;
  198. }
  199. main .bot .box .tt{
  200.     padding: 10px 5px 10px 15px;
  201. }
  202. main .bot .box .jg{
  203.     padding-bottom: 10px;
  204. }
  205. main .bot .box .jg .rs{
  206.     color: #999999;
  207.     padding-left: 5px;
  208. }
  209. main .bot .box .jg .qian{
  210.     font-size: 14.56px;
  211.     line-height: 16.64px;
  212.     padding-left: 10px;
  214. }
  215. footer {
  216.     width: 100vw;
  217.     position: fixed;
  218.     left: 0;
  219.     right: 0;
  220.     bottom: 0;
  221.     background-color: #f4f4f4;
  222.     display: grid;
  223.     grid-template-columns: repeat(3,1fr);
  224.     place-items: center;
  225. }
  226. footer .item{
  227.     display: grid;
  228.     place-items: center;
  229. }
  230. footer .item .iconfont{
  231.     font-size: 0.3rem;
  233. }
  234. footer .item a{
  235. color: #5D656B;
  236. }
  237. footer .item.a .iconfont{
  238.     color: coral;
  239.     font-size: 0.5rem;
  240. }
  241. .bt{
  242.     display: grid;
  243.     place-items: center;
  245. }
  246. .bt .anniu{
  247.   width: 1.35938rem;
  248.     height: 0.421875rem;
  249.     box-shadow: rgb(18 18 18 / 25%) 0px 2px 5px;
  250.     background-color: rgb(255, 80, 0);
  251.     font-size: 0.164063rem;
  252.     color: rgb(255, 255, 255);
  253.     border-radius: 0.210938rem;
  254.     text-align: center;
  255.     line-height: 0.421875rem;
  256.     font-weight: bold;
  257.     align-items: center;
  258.     z-index: 1000000;
  259.     position: fixed;
  260.     left: 50%;
  261.     bottom: 0.703125rem;
  262.     font-family: Helvetica, sans-serif;
  263.     transform: translate(-50%);
  264.     text-decoration: none;
  265.     user-select: none;
  266.     border: none;
  268. }
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行