search

博客列表 >仿淘宝移动端首页商品列表

仿淘宝移动端首页商品列表

李玉峰
李玉峰原创
2022年04月02日 18:28:04338浏览

HTML代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.     <title>仿淘宝首页</title>
  8.     <link rel="stylesheet" href="font_icon/iconfont.css" />
  9.     <link rel="stylesheet" href="css/reset.css" />
  10.     <link rel="stylesheet" href="css/header.css" />
  11.     <link rel="stylesheet" href="css/footer.css" />
  12.     <link rel="stylesheet" href="css/main.css" />
  13.   </head>
  14.   <body style="height: 1500px">
  15.     <!-- 头部 -->
  16.     <header>
  17.       <!-- 顶部 -->
  18.       <div class="top">
  19.         <div class="logo iconfont icon-shejiaotubiao-08"></div>
  20.         <div class="search">
  21.           <div class="keys">
  22.             <span class="iconfont icon-fangdajing"></span>
  23.             <span>寻找宝贝店铺</span>
  24.           </div>
  25.         </div>
  26.       </div>
  27.       <!-- 轮播图 -->
  28.       <div class="slider">
  29.         <a href=""><img src="images/banner/banner1.jpg" alt="" /></a>
  30.       </div>
  31.       <!-- 导航 -->
  32.       <ul class="nav">
  33.         <li class="item">
  34.           <a href=""><img src="images/nav/nav1.png" /></a>
  35.           <a href="">天猫新品</a>
  36.         </li>
  37.         <li class="item">
  38.           <a href=""><img src="images/nav/nav2.png" /></a>
  39.           <a href="">天猫新品</a>
  40.         </li>
  41.         <li class="item">
  42.           <a href=""><img src="images/nav/nav3.png" /></a>
  43.           <a href="">天猫新品</a>
  44.         </li>
  45.         <li class="item">
  46.           <a href=""><img src="images/nav/nav4.png" /></a>
  47.           <a href="">天猫新品</a>
  48.         </li>
  49.         <li class="item">
  50.           <a href=""><img src="images/nav/nav5.png" /></a>
  51.           <a href="">天猫新品</a>
  52.         </li>
  53.         <li class="item">
  54.           <a href=""><img src="images/nav/nav6.png" /></a>
  55.           <a href="">天猫新品</a>
  56.         </li>
  57.         <li class="item">
  58.           <a href=""><img src="images/nav/nav7.png" /></a>
  59.           <a href="">天猫新品</a>
  60.         </li>
  61.         <li class="item">
  62.           <a href=""><img src="images/nav/nav2.png" /></a>
  63.           <a href="">天猫新品</a>
  64.         </li>
  65.         <li class="item">
  66.           <a href=""><img src="images/nav/nav3.png" /></a>
  67.           <a href="">天猫新品</a>
  68.         </li>
  69.         <li class="item">
  70.           <a href=""><img src="images/nav/nav4.png" /></a>
  71.           <a href="">天猫新品</a>
  72.         </li>
  73.       </ul>
  74.     </header>
  75.     <!-- 主体 -->
  76.     <main>
  77.       <!-- 聚划算 -->
  78.       <div class="top">
  79.         <div class="item jhs">
  80.           <div class="box">
  81.             <h3 class="title">聚划算</h3>
  82.             <div class="desc">
  83.               <h4>品牌折扣</h4>
  84.               <img src="images/items/item1.png" alt="" />
  85.             </div>
  86.           </div>
  87.           <div class="box">
  88.             <h3 class="title">&nbsp;</h3>
  89.             <div class="desc">
  90.               <h4>划算好货</h4>
  91.               <img src="images/items/item2.png" alt="" />
  92.             </div>
  93.           </div>
  94.           <div class="box">
  95.             <h3 class="title">淘抢购</h3>
  96.             <div class="desc">
  97.               <h4>限时半价</h4>
  98.               <img src="images/items/item3.png" alt="" />
  99.             </div>
  100.           </div>
  101.           <div class="box">
  102.             <h3 class="title">天天特卖</h3>
  103.             <div class="desc">
  104.               <h4>9.9包邮</h4>
  105.               <img src="images/items/item4.png" alt="" />
  106.             </div>
  107.           </div>
  108.         </div>
  109.         <div class="item right">
  110.           <div class="box">
  111.             <h3 class="title">
  112.               淘宝直播
  113.               <span class="tag" style="background-color: red">LIVE</span>
  114.             </h3>
  115.             <div class="detail">
  116.               <div class="left">
  117.                 <span class="title">好物传送门</span>
  118.                 <img src="images/items/item5.png" alt="" />
  119.               </div>
  120.               <div class="right">
  121.                 <img src="images/items/item6.png" alt="" />
  122.               </div>
  123.             </div>
  124.           </div>
  125.           <div class="box">
  126.             <h3 class="title">
  127.               有好货
  128.               <span class="tag" style="background-color: blue">品牌好物</span>
  129.             </h3>
  130.             <div class="detail">
  131.               <div class="left">
  132.                 <span class="title">全民口碑推荐</span>
  133.                 <img src="images/items/item7.png" alt="" />
  134.               </div>
  135.               <div class="right">
  136.                 <img src="images/items/item8.webp" alt="" />
  137.               </div>
  138.             </div>
  139.           </div>
  140.         </div>
  141.         <div class="item right">
  142.           <div class="box">
  143.             <h3 class="title">
  144.               每日好店
  145.               <span class="tag" style="background-color: orange">精选</span>
  146.             </h3>
  147.             <div class="detail">
  148.               <div class="left">
  149.                 <span class="title">挖深藏的店</span>
  150.                 <img src="images/items/item5.png" alt="" />
  151.               </div>
  152.               <div class="right">
  153.                 <img src="images/items/item6.png" alt="" />
  154.               </div>
  155.             </div>
  156.           </div>
  157.         </div>
  158.         <div class="item right">
  159.           <div class="box">
  160.             <h3 class="title">
  161.               哇哦视频
  162.               <span class="tag" style="background-color: orange">亲测</span>
  163.             </h3>
  164.             <div class="detail">
  165.               <div class="left">
  166.                 <span class="title">粉丝都爱看</span>
  167.                 <img src="images/items/item11.png" alt="" />
  168.               </div>
  169.               <div class="right">
  170.                 <img src="images/items/item12.png" alt="" />
  171.               </div>
  172.             </div>
  173.           </div>
  174.         </div>
  175.         <!-- 淘宝头条 -->
  176.         <div class="item footer">
  177.           <div class="title">淘宝头条</div>
  178.           <div class="content">
  179.             <span class="type">评测</span>
  180.             <span>专治镜头尴尬。。。。</span>
  181.           </div>
  182.         </div>
  183.       </div>
  184.       <!-- 商品列表 -->
  185.       <div class="list">
  186.         <div class="title">
  187.           <img
  188.             src="https://img.alicdn.com/tfs/TB1V2eQrKSSBuNjy0FlXXbBpVXa-966-114.png"
  189.           />
  190.         </div>
  191.         <ul class="unit">
  192.           <li class="item">
  193.             <div class="img">
  194.               <img
  195.                 src="//gw.alicdn.com/bao/uploaded/i2/1029692622/O1CN01QhCTWy1VEvEKiClVv_!!1029692622.jpg_320x320q90.jpg_.webp"
  196.                 alt=""
  197.               />
  198.             </div>
  199.             <div class="detail">
  200.               <div class="desc">商品描述商品描述<br />商品描述商品描述midk</div>
  201.               <div class="price">
  202.                 <span class="iconfont icon-rmb">89</span
  203.                 ><span class="num">45人已购买</span>
  204.               </div>
  205.             </div>
  206.           </li>
  207.           <li class="item">
  208.             <div class="img">
  209.               <img
  210.                 src="//gw.alicdn.com/bao/uploaded/i2/1029692622/O1CN01QhCTWy1VEvEKiClVv_!!1029692622.jpg_320x320q90.jpg_.webp"
  211.                 alt=""
  212.               />
  213.             </div>
  214.             <div class="detail">
  215.               <div class="desc">商品描述商品描述<br />商品描述商品描述midk</div>
  216.               <div class="price">
  217.                 <span class="iconfont icon-rmb">89</span
  218.                 ><span class="num">45人已购买</span>
  219.               </div>
  220.             </div>
  221.           </li>
  222.           <li class="item">
  223.             <div class="img">
  224.               <img
  225.                 src="//gw.alicdn.com/bao/uploaded/i2/1029692622/O1CN01QhCTWy1VEvEKiClVv_!!1029692622.jpg_320x320q90.jpg_.webp"
  226.                 alt=""
  227.               />
  228.             </div>
  229.             <div class="detail">
  230.               <div class="desc">商品描述商品描述<br />商品描述商品描述midk</div>
  231.               <div class="price">
  232.                 <span class="iconfont icon-rmb">89</span
  233.                 ><span class="num">45人已购买</span>
  234.               </div>
  235.             </div>
  236.           </li>
  237.           <li class="item">
  238.             <div class="img">
  239.               <img
  240.                 src="//gw.alicdn.com/bao/uploaded/i2/1029692622/O1CN01QhCTWy1VEvEKiClVv_!!1029692622.jpg_320x320q90.jpg_.webp"
  241.                 alt=""
  242.               />
  243.             </div>
  244.             <div class="detail">
  245.               <div class="desc">商品描述商品描述<br />商品描述商品描述midk</div>
  246.               <div class="price">
  247.                 <span class="iconfont icon-rmb">89</span
  248.                 ><span class="num">45人已购买</span>
  249.               </div>
  250.             </div>
  251.           </li>
  252.           <li class="item">
  253.             <div class="img">
  254.               <img
  255.                 src="//gw.alicdn.com/bao/uploaded/i2/1029692622/O1CN01QhCTWy1VEvEKiClVv_!!1029692622.jpg_320x320q90.jpg_.webp"
  256.                 alt=""
  257.               />
  258.             </div>
  259.             <div class="detail">
  260.               <div class="desc">商品描述商品描述<br />商品描述商品描述midk</div>
  261.               <div class="price">
  262.                 <span class="iconfont icon-rmb">89</span
  263.                 ><span class="num">45人已购买</span>
  264.               </div>
  265.             </div>
  266.           </li>
  267.           <li class="item">
  268.             <div class="img">
  269.               <img
  270.                 src="//gw.alicdn.com/bao/uploaded/i2/1029692622/O1CN01QhCTWy1VEvEKiClVv_!!1029692622.jpg_320x320q90.jpg_.webp"
  271.                 alt=""
  272.               />
  273.             </div>
  274.             <div class="detail">
  275.               <div class="desc">商品描述商品描述<br />商品描述商品描述midk</div>
  276.               <div class="price">
  277.                 <span class="iconfont icon-rmb">89</span
  278.                 ><span class="num">45人已购买</span>
  279.               </div>
  280.             </div>
  281.           </li>
  282.         </ul>
  283.       </div>
  284.     </main>
  285.     <!-- 底部 -->
  286.     <footer>
  287.       <div class="item active">
  288.         <a href="" class="iconfont icon-shejiaotubiao-44"></a>
  289.       </div>
  290.       <div class="item">
  291.         <a href="" class="iconfont icon-gouwuche"></a>
  292.         <a href="">购物车</a>
  293.       </div>
  294.       <div class="item">
  295.         <a href="" class="iconfont icon-wodetaobao"></a>
  296.         <a href="">我的淘宝</a>
  297.       </div>
  298.     </footer>
  299.   </body>
  300. </html>

样式重置CSS

  1. /* 样式重置 */
  3. * {
  4.   margin: 0;
  5.   padding: 0;
  6.   box-sizing: border-box;
  7. }
  9. /* 链接 */
  11. a {
  12.   text-decoration: none;
  13.   color: #555;
  14. }
  16. /* 列表 */
  18. li {
  19.   list-style: none;
  20. }
  22. :root {
  23.   font-size: calc(100vw / 3.75);
  24. }
  26. body {
  27.   font-size: 0.12rem;
  28.   color: #333;
  29.   max-width: 750px;
  30.   min-width: 320px;
  31.   margin: auto;
  32.   background-color: #f4f4f4;
  33. }
  35. @media screen and (max-width: 320px) {
  36.   :root {
  37.     font-size: 85px;
  38.   }
  39. }
  41. @media screen and (min-width: 640px) {
  42.   :root {
  43.     font-size: 170px;
  44.   }
  45. }

中间css

  1. main {
  2.   /* 相对定位 */
  3.   position: relative;
  4.   top: calc(0.45rem + 1.25rem + 1.5rem);
  5.   padding: 0.1rem;
  6.   padding-bottom: 0.46rem;
  7. }
  8. main img {
  9.   width: 100%;
  10.   height: 100%;
  11. }
  12. main .top {
  13.   background-color: #fff;
  14.   border-radius: 0.1rem;
  15.   min-height: 3rem;
  16.   /* 3行2列布局 */
  17.   display: grid;
  18.   grid-template-columns: repeat(2, 1fr);
  19.   gap: 0.1rem;
  20.   padding: 0.1rem;
  21. }
  22. /* 左上角聚划算 */
  23. main .top .item.jhs {
  24.   display: grid;
  25.   grid-template-columns: repeat(2, 1fr);
  26.   gap: 0.1rem;
  27. }
  28. main .top .item.jhs .box {
  29.   display: grid;
  30.   gap: 0.1rem;
  31. }
  32. main .top .item.jhs .box .desc {
  33.   display: grid;
  34.   background-color: rgb(243, 235, 236);
  35.   border-radius: 0.1rem;
  36.   padding: 0.1rem;
  37. }
  38. /* 右侧上下两组 */
  39. main .top .item.right {
  40.   display: grid;
  41.   gap: 10px;
  42. }
  43. main .top .item.right .box {
  44.   display: grid;
  45. }
  46. main .top .item.right .box .title {
  47.   grid-column: span 2;
  48. }
  49. main .top .item.right .box .title .tag {
  50.   color: #fff;
  51.   /* 字体正常 */
  52.   font-size: normal;
  53.   padding: 1px;
  54.   border-radius: 0.05rem;
  55.   font-size: smaller;
  56. }
  57. main .top .item.right .box .detail {
  58.   display: grid;
  59.   grid-template-columns: repeat(2, 1fr);
  60. }
  61. main .top .item.right .box .detail .left {
  62.   display: grid;
  63. }
  64. /* 淘宝头条跨两列 */
  65. main .top .item:last-of-type {
  66.   grid-column: span 2;
  67.   /* background-color: yellow; */
  68. }
  69. main .top .item.footer {
  70.   display: grid;
  71.   grid-template-columns: 0.6rem 1fr;
  72.   padding: 00.11rem 0;
  73. }
  74. main .top .item.footer .type {
  75.   background-color: rgb(238, 202, 206);
  76.   color: darkorange;
  77.   padding: 2px 5px;
  78.   border-radius: 5px;
  79. }
  80. main .top .item.footer .title {
  81.   font-size: larger;
  82.   font-weight: bolder;
  83. }
  84. main .list {
  85.   display: grid;
  86.   place-content: center;
  87. }
  88. main .list .title {
  89.   display: grid;
  90.   place-content: center;
  91.   place-items: center;
  92.   margin-top: 0.2rem;
  93. }
  94. main .list .title img {
  95.   width: 85%;
  96.   height: 85%;
  97. }
  99. /* 产品列表 */
  100. main .list .unit {
  101.   display: grid;
  102.   grid-template-columns: repeat(2, 1fr);
  103.   gap: 0.2rem;
  104.   font-size: 0.11rem;
  105.   padding: 0.2rem 0rem;
  106. }
  107. main .list .unit img {
  108.   width: 100%;
  109.   height: 100%;
  110. }
  111. main .list .unit .item {
  112.   display: grid;
  113.   place-items: center;
  114.   background-color: #fff;
  115.   border-radius: 0.06rem;
  116. }
  117. main .list .unit .item .detail {
  118.   display: grid;
  119.   grid-template-rows: 0.4rem 0.2rem;
  120.   gap: 0.1rem;
  121.   margin-bottom: 0.1rem;
  122. }
  123. main .list .unit .item .detail .desc {
  124.   font-size: small;
  125.   margin: 0.1rem;
  126. }
  127. main .list .unit .item .detail .price {
  128.   font-size: smaller;
  129. }
  130. main .list .unit .item .detail .price .iconfont {
  131.   color: red;
  132. }
  133. main .list .unit .item .detail .price .num {
  134.   margin-left: 0.08rem;
  135. }
上一条：实例演示函数参数与返回值、演示模板字面量与模板函数下一条：企业外贸推广常见误区：亲身经验分享
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议