search

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

仿写淘宝移动端首页

三九三伏
三九三伏原创
2022年07月20日 09:43:57758浏览

一、成果展示

二、代码

为了代码展示方便，就不做工程化了，一个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. }
上一条：CRM开源系统源码|客户管理系统PHP源码下一条：仿京东商城首页
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多