Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 仿淘宝移动端首页商品列表
Blogger Information
Blog 33
fans 0
comment 0
visits 18747
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
仿淘宝移动端首页商品列表
李玉峰
Original
339 people have browsed it

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. }
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post