Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 仿写淘宝移动端首页
Blogger Information
Blog 35
fans 0
comment 0
visits 17004
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
762 people have browsed it

一、成果展示

二、代码

为了代码展示方便，就不做工程化了，一个HTML文件和一个CSS方便直观查看。

HTML代码

  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.     <title></title>
  8.     <link rel="stylesheet" href="test.css">
  9.     <link rel="stylesheet" href="0718/font_icon/iconfont.css">
  10. </head>
  11. <body>
  12.     <!-- 1. 页眉 -->
  13.     <header>
  14.         <!-- logo -->
  15.         <a href="" class="logo"><img src="0718/images/taobao.png" alt="">
  17.         </a>
  18.         <!-- 搜索框 -->
  19.         <a href="" class="search">
  20.             <span>寻找宝贝店铺</span>
  21.             <span>搜索</span>
  22.         </a>
  23.         <!-- 签到 -->
  24.         <a href="" class="iconfont icon-qiandao-xuanzhong"></a>
  26.     </header>
  28.     <!-- 2. 主题 -->
  29.     <main>
  30.         <!-- 顶部导航 -->
  31.         <ul class="navs">
  32.             <li class="item">
  33.                 <a href=""><img src="0718/images/navs/tmxb.webp" alt=""></a>
  34.                 <a href="">天猫精品</a>
  35.             </li>
  36.             <li class="item">
  37.                 <a href=""><img src="0718/images/navs/jrbk.webp" alt="" /></a>
  38.                 <a href="">今日爆款</a>
  39.             </li>
  40.             <li class="item">
  41.                 <a href=""><img src="0718/images/navs/tmgj.webp" alt="" /></a>
  42.                 <a href="">天猫国际</a>
  43.             </li>
  44.             <li class="item">
  45.                 <a href=""><img src="0718/images/navs/fzlx.webp" alt="" /></a>
  46.                 <a href="">飞猪旅行</a>
  47.             </li>
  48.             <li class="item">
  49.                 <a href=""><img src="0718/images/navs/tmcx.webp" alt="" /></a>
  50.                 <a href="">天猫超市</a>
  51.             </li>
  52.             <li class="item">
  53.                 <a href=""><img src="0718/images/navs/tbch.webp" alt="" /></a>
  54.                 <a href="">淘宝吃货</a>
  55.             </li>
  56.             <li class="item">
  57.                 <a href=""><img src="0718/images/navs/sqk.webp" alt="" /></a>
  58.                 <a href="">省钱卡</a>
  59.             </li>
  60.             <li class="item">
  61.                 <a href=""><img src="0718/images/navs/ltjb.webp" alt="" /></a>
  62.                 <a href="">领淘金币</a>
  63.             </li>
  64.             <li class="item">
  65.                 <a href=""><img src="0718/images/navs/alpm.webp" alt="" /></a>
  66.                 <a href="">阿里拍卖</a>
  67.             </li>
  68.             <li class="item">
  69.                 <a href=""><img src="0718/images/navs/fl.webp" alt="" /></a>
  70.                 <a href="">分类</a>
  71.             </li>
  72.         </ul>
  73.         <!-- 快速入口 -->
  74.         <ul class="entry">
  75.             <li class="item">
  76.                 <div class="title">
  77.                     <h3>聚划算</h3>
  78.                     <span>品牌折扣</span>
  79.                 </div>
  80.                 <a href=""><img src="0718/images/items/item-1.webp" alt=""></a>
  81.                 <a href=""><img src="0718/images/items/item-2.webp" alt=""></a>
  82.             </li>
  83.             <li class="item">
  84.                 <div class="title">
  85.                   <h3>天天特卖</h3>
  86.                   <span>1元秒杀</span>
  87.                 </div>
  88.                 <a href=""><img src="0718/images/items/item-3.webp" alt="" /></a>
  89.                 <a href=""><img src="0718/images/items/item-4.webp" alt="" /></a>
  90.             </li>
  91.             <li class="item">
  92.                 <div class="title">
  93.                   <h3>有好货</h3>
  94.                   <span style="background-color: deepskyblue">好口碑</span>
  95.                 </div>
  96.                 <a href=""><img src="0718/images/items/item-5.webp" alt="" /></a>
  97.                 <a href=""><img src="0718/images/items/item-6.webp" alt="" /></a>
  98.             </li>
  99.             <li class="item">
  100.                 <div class="title">
  101.                   <h3>每日好店</h3>
  102.                   <span style="background-color: orange">特色</span>
  103.                 </div>
  104.                 <a href=""><img src="0718/images/items/item-7.webp" alt="" /></a>
  105.                 <a href=""><img src="0718/images/items/item-8.webp" alt="" /></a>
  106.             </li>            
  107.         </ul>
  108.         <!-- 商品列表 -->
  109.         <ul class="list">
  110.             <li class="item">
  111.                 <a href=""><img src="0718/images/items/item-9.webp" alt="" /></a>
  112.                 <div class="desc">
  113.                   <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  114.                   <div class="price">
  115.                     <span class="iconfont icon-renminbi_o">288</span>
  116.                     <span>123人已购买</span>
  117.                   </div>
  118.                 </div>
  119.             </li>
  120.             <li class="item">
  121.                 <a href=""><img src="0718/images/items/item-10.webp" alt="" /></a>
  122.                 <div class="desc">
  123.                   <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  124.                   <div class="price">
  125.                     <span class="iconfont icon-renminbi_o">288</span>
  126.                     <span>123人已购买</span>
  127.                   </div>
  128.                 </div>
  129.             </li>
  130.             <li class="item">
  131.                 <a href=""><img src="0718/images/items/item-11.webp" alt="" /></a>
  132.                 <div class="desc">
  133.                   <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  134.                   <div class="price">
  135.                     <span class="iconfont icon-renminbi_o">288</span>
  136.                     <span>123人已购买</span>
  137.                   </div>
  138.                 </div>
  139.             </li>
  140.             <li class="item">
  141.                 <a href=""><img src="0718/images/items/item-12.webp" alt="" /></a>
  142.                 <div class="desc">
  143.                   <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  144.                   <div class="price">
  145.                     <span class="iconfont icon-renminbi_o">288</span>
  146.                     <span>123人已购买</span>
  147.                   </div>
  148.                 </div>
  149.             </li>
  151.             <li class="item">
  152.                 <a href=""><img src="0718/images/items/item-13.webp" alt="" /></a>
  153.                 <div class="desc">
  154.                   <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  155.                   <div class="price">
  156.                     <span class="iconfont icon-renminbi_o">288</span>
  157.                     <span>123人已购买</span>
  158.                   </div>
  159.                 </div>
  160.             </li>
  161.             <li class="item">
  162.                 <a href=""><img src="0718/images/items/item-14.webp" alt="" /></a>
  163.                 <div class="desc">
  164.                   <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  165.                   <div class="price">
  166.                     <span class="iconfont icon-renminbi_o">288</span>
  167.                     <span>123人已购买</span>
  168.                   </div>
  169.                 </div>
  170.             </li>
  172.             <li class="item">
  173.                 <a href=""><img src="0718/images/items/item-15.webp" alt="" /></a>
  174.                 <div class="desc">
  175.                   <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  176.                   <div class="price">
  177.                     <span class="iconfont icon-renminbi_o">288</span>
  178.                     <span>123人已购买</span>
  179.                   </div>
  180.                 </div>
  181.             </li>
  182.             <li class="item">
  183.                 <a href=""><img src="0718/images/items/item-16.webp" alt="" /></a>
  184.                 <div class="desc">
  185.                   <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  186.                   <div class="price">
  187.                     <span class="iconfont icon-renminbi_o">288</span>
  188.                     <span>123人已购买</span>
  189.                   </div>
  190.                 </div>
  191.             </li>
  193.             <li class="item">
  194.                 <a href=""><img src="0718/images/items/item-17.webp" alt="" /></a>
  195.                 <div class="desc">
  196.                   <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  197.                   <div class="price">
  198.                     <span class="iconfont icon-renminbi_o">288</span>
  199.                     <span>123人已购买</span>
  200.                   </div>
  201.                 </div>
  202.             </li>
  203.             <li class="item">
  204.                 <a href=""><img src="0718/images/items/item-18.webp" alt="" /></a>
  205.                 <div class="desc">
  206.                   <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  207.                   <div class="price">
  208.                     <span class="iconfont icon-renminbi_o">288</span>
  209.                     <span>123人已购买</span>
  210.                   </div>
  211.                 </div>
  212.             </li>
  214.             <li class="item">
  215.                 <a href=""><img src="0718/images/items/item-19.webp" alt="" /></a>
  216.                 <div class="desc">
  217.                   <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  218.                   <div class="price">
  219.                     <span class="iconfont icon-renminbi_o">288</span>
  220.                     <span>123人已购买</span>
  221.                   </div>
  222.                 </div>
  223.             </li>
  224.             <li class="item">
  225.                 <a href=""><img src="0718/images/items/item-20.webp" alt="" /></a>
  226.                 <div class="desc">
  227.                   <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  228.                   <div class="price">
  229.                     <span class="iconfont icon-renminbi_o">288</span>
  230.                     <span>123人已购买</span>
  231.                   </div>
  232.                 </div>
  233.             </li>
  235.             <li class="item">
  236.                 <a href=""><img src="0718/images/items/item-21.webp" alt="" /></a>
  237.                 <div class="desc">
  238.                   <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  239.                   <div class="price">
  240.                     <span class="iconfont icon-renminbi_o">288</span>
  241.                     <span>123人已购买</span>
  242.                   </div>
  243.                 </div>
  244.             </li>
  245.             <li class="item">
  246.                 <a href=""><img src="0718/images/items/item-22.webp" alt="" /></a>
  247.                 <div class="desc">
  248.                   <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  249.                   <div class="price">
  250.                     <span class="iconfont icon-renminbi_o">288</span>
  251.                     <span>123人已购买</span>
  252.                   </div>
  253.                 </div>
  254.             </li>
  255.         </ul>
  256.     </main>
  258.     <!-- 3. 页脚 -->
  259.     <footer>
  260.         <a href="" class="iconfont icon-taobao"></a>
  261.         <a href="" class="iconfont icon-gouwuche">
  262.             <span>购物车</span>
  263.         </a>
  264.         <a href="" class="iconfont icon-wode">
  265.             <span>我的淘宝</span>
  266.         </a>
  267.     </footer>
  269. </body>
  270. </html>

CSS代码

附上test.css代码，字体图标css代码不展示，请自行到阿里图标了解。

  1. /* 重置效果 */
  2. body *{
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6. }
  8. a{
  9.     text-decoration: none;
  10.     color: #999;
  11. }
  13. li{
  14.     list-style: none;
  15. }
  17. /* 移动端布局方案 rem+vw */
  18. html{
  19.     font-size: calc(100vw / 3.75);
  20. }
  22. body{
  23.     font-size: 0.13rem;
  24.     color: #333;
  25.     background-color: #f4f4f4;
  26.     /* 页面居中 */
  27.     margin: aoto;
  28.     /* 左右填充 */
  29.     padding: 0 0.15rem;
  30.     /* 滚动条自动隐藏 */
  31.     overflow-y: auto;
  32. }
  34. body img{
  35.     width:100%;
  36. }
  38. /* 媒体查询 */
  39. @media (max-width:320px) {
  40.     html{
  41.         font-size: 85px;
  42.     }
  43. }
  45. @media (min-width:670px) {
  46.     html{
  47.         font-size: 170px;
  48.     }
  49. }
  51. /* 页眉页脚定位 */
  52. header,footer{
  53.     height: 50px;
  54.     background-color: #f4f4f4;
  55.     position:fixed;
  56.     z-index: 100;
  57. }
  59. header{
  60.     top: 0;
  61.     left: 0;
  62.     right: 0;
  63. }
  65. footer{
  66.     bottom: 0;
  67.     left: 0;
  68.     right: 0;
  69. }
  71. /* 页眉布局 */
  72. header{
  73.     display: grid;
  74.     grid-template-columns: 0.58rem 1fr 0.33rem;
  75.     place-items: center;
  76.     gap: 0 0.1rem;
  77.     grid-auto-rows: .5rem;
  78. }
  80. header a.logo{
  81.     padding-left: .1rem;
  82. }
  84. header .search{
  85.     width: 100%;
  86.     border: 2px solid #ff0000;
  87.     height: 0.3rem;
  88.     border-radius: 0.3rem;
  89.     display: flex;
  90.     place-content: space-between;
  91.     place-items: center;
  92. }
  94. header .search span:nth-of-type(1){
  95.     padding-left: .1rem;
  96.     color: #999;
  97. }
  99. header .search span:nth-of-type(2){
  100.     /* background-color: #ff5000; */
  101.     background: linear-gradient(to left, #ff5000, #ffa000);
  102.     color: white;
  103.     padding: 0.03rem 0.15rem;
  104.     margin-right: 0.01rem;
  105.     border-radius: 0.3rem;
  106. }
  108. header>a.iconfont{
  109.     color: #ff5000;
  110.     font-size: larger;
  111. }
  113. footer{
  114.     border: 1px solid #ccc;
  115.     display: grid;
  116.     grid-template-columns: repeat(3,1fr);
  117.     /* grid-auto-rows: .5rem; */
  118.     place-content: space-around;
  119.     place-items: center;
  120.     font-size: smaller;
  121. }
  123. footer a{
  124.     display: grid;
  125.     place-items: center;
  126. }
  128. footer a:first-of-type{
  129.     color: #ff5000;
  130.     font-size: 0.35rem;
  131. }
  133. footer a span{
  134.     font-size: 0.08rem;
  135. }
  137. main{
  138.     min-height: 2000px;
  139.     overflow: hidden;
  141.     position: relative;
  142.     top:50px;
  144.     /* 让最后一行商品正常显示 */
  145.     padding-bottom: 0.6rem;
  146. }
  148. /* 主体区公共样式 */
  149. main .navs, main .entry, main .list >.item{
  150.     background-color: #fff;
  151.     border-radius: 0.1rem;
  152.     margin-top: 0.08rem;
  153. }
  155. /* 导航样式 */
  156. main .navs{
  157.     display: grid;
  158.     grid-template-columns: repeat(5,1fr);
  159.     gap: 0 0.1rem;
  160.     padding: 0.05rem;
  161. }
  163. main .navs .item{
  164.     display: grid;
  165.     place-items: center;
  166. }
  168. /* 快速入口样式 */
  169. main .entry{
  170.     display: grid;
  171.     grid-template-columns: repeat(2,1fr);
  172.     padding: 0.05rem;
  173. }
  175. main .entry .item{
  176.     display: grid;
  177.     grid-template-columns: repeat(2,1fr);
  178.     padding: 0.05rem;
  179. }
  181. main .entry .item .title{
  182.     grid-column: span 2;
  183.     display: flex;
  184.     place-items: center;
  185. }
  187. main .entry .item:nth-of-type(-n+2){
  188.     border-bottom: 1px solid #dedede;
  189. }
  191. main .entry .item .title span{
  192.     background-color: #ff5000;
  193.     color: #fff;
  194.     border-radius: 0.05rem;
  195.     font-size: smaller;
  196.     padding: 0 0.03rem;
  197.     margin-left: 0.05rem;
  198. }
  200. /* 商品列表样式 */
  201. main .list {
  202.     display: grid;
  203.     grid-template-columns: repeat(2,1fr);
  204.     gap: 0 0.1rem;
  205. }
  207. main .list .item img{
  208.     border-radius: 0.1rem 0.1rem 0 0;
  209. }
  211. main .list .item .desc{
  212.     padding: 0.1rem;
  213.     font-size: smaller;
  214. }
  216. main .list .item .price .iconfont{
  217.     color: #ff5000;
  218. }
  220. main .list .item .desc .price span:first-of-type{
  222. }
  224. main .list .item .desc .price span:last-of-type{
  225.     padding-left: 0.1rem;
  226.     color: #bbb;
  227. }
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