简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >仿淘宝移动端布局

仿淘宝移动端布局

汇享科技
汇享科技原创
2022年07月19日 16:59:04342浏览

演示截图

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="static/css/header.css" />
  9.     <link rel="stylesheet" href="static/css/navs.css" />
  10.     <link rel="stylesheet" href="static/css/nav.css" />
  11.     <link rel="stylesheet" href="static/css/main.css" />
  12.   </head>
  13.   <body>
  14.     <header>
  15.       <nav>
  16.         <div class="logo">
  17.           <span class="iconfont icon-taobaowang alogo"></span>
  18.         </div>
  19.         <div class="sousuo">
  20.           <input type="search" name="" id="" />
  21.           <span>搜索</span>
  22.         </div>
  23.         <div class="qiandao">
  24.           <span class="iconfont icon-qiandao qd"></span>
  25.         </div>
  26.       </nav>
  27.     </header>
  28.     <main>
  29.       <!-- 导航 -->
  30.       <div class="nav">
  31.         <a href="">
  32.           <img src="static/images/a.jpg" alt="" />
  33.           <p>天猫新品</p>
  34.         </a>
  35.         <a href="">
  36.           <img src="static/images/a.jpg" alt="" />
  37.           <p>天猫新品</p>
  38.         </a>
  39.         <a href="">
  40.           <img src="static/images/a.jpg" alt="" />
  41.           <p>天猫新品</p>
  42.         </a>
  43.         <a href="">
  44.           <img src="static/images/a.jpg" alt="" />
  45.           <p>天猫新品</p>
  46.         </a>
  48.         <a href="">
  49.           <img src="static/images/a.jpg" alt="" />
  50.           <p>天猫新品</p>
  51.         </a>
  52.         <a href="">
  53.           <img src="static/images/a.jpg" alt="" />
  54.           <p>天猫新品</p>
  55.         </a>
  56.         <a href="">
  57.           <img src="static/images/a.jpg" alt="" />
  58.           <p>天猫新品</p>
  59.         </a>
  60.         <a href="">
  61.           <img src="static/images/a.jpg" alt="" />
  62.           <p>天猫新品</p>
  63.         </a>
  64.         <a href="">
  65.           <img src="static/images/a.jpg" alt="" />
  66.           <p>天猫新品</p>
  67.         </a>
  68.         <a href="">
  69.           <img src="static/images/a.jpg" alt="" />
  70.           <p>天猫新品</p>
  71.         </a>
  72.       </div>
  73.       <!-- 快速入口 -->
  74.       <div class="ksrk">
  75.         <div class="a">
  76.           <div class="title">
  77.             <h3>聚划算</h3>
  78.             <span>品牌折扣</span>
  79.           </div>
  80.           <a href=""><img src="static/images/b.jpg" alt="" /></a>
  81.           <a href=""><img src="static/images/c.jpg" alt="" /></a>
  82.         </div>
  83.         <div class="a">
  84.           <div class="title">
  85.             <h3>聚划算</h3>
  86.             <span>品牌折扣</span>
  87.           </div>
  88.           <a href=""><img src="static/images/b.jpg" alt="" /></a>
  89.           <a href=""><img src="static/images/c.jpg" alt="" /></a>
  90.         </div>
  91.         <div class="a">
  92.           <div class="title">
  93.             <h3>聚划算</h3>
  94.             <span>品牌折扣</span>
  95.           </div>
  96.           <a href=""><img src="static/images/b.jpg" alt="" /></a>
  97.           <a href=""><img src="static/images/c.jpg" alt="" /></a>
  98.         </div>
  99.         <div class="a">
  100.           <div class="title">
  101.             <h3>聚划算</h3>
  102.             <span>品牌折扣</span>
  103.           </div>
  104.           <a href=""><img src="static/images/b.jpg" alt="" /></a>
  105.           <a href=""><img src="static/images/c.jpg" alt="" /></a>
  106.         </div>
  107.       </div>
  108.       <div class="list">
  109.         <div class="lista">
  110.           <a href=""><img src="static/images/d.jpg" alt="" /></a>
  111.           <div class="desc">
  112.             <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  113.             <div class="price">
  114.               <span class="iconfont icon-renminbi_o">￥288</span>
  115.               <span>123人已购买</span>
  116.             </div>
  117.           </div>
  118.         </div>
  119.         <div class="lista">
  120.           <a href=""><img src="static/images/d.jpg" alt="" /></a>
  121.           <div class="desc">
  122.             <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  123.             <div class="price">
  124.               <span class="iconfont icon-renminbi_o">￥288</span>
  125.               <span>123人已购买</span>
  126.             </div>
  127.           </div>
  128.         </div>
  129.         <div class="lista">
  130.           <a href=""><img src="static/images/d.jpg" alt="" /></a>
  131.           <div class="desc">
  132.             <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  133.             <div class="price">
  134.               <span class="iconfont icon-renminbi_o">￥288</span>
  135.               <span>123人已购买</span>
  136.             </div>
  137.           </div>
  138.         </div>
  139.         <div class="lista">
  140.           <a href=""><img src="static/images/d.jpg" alt="" /></a>
  141.           <div class="desc">
  142.             <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  143.             <div class="price">
  144.               <span class="iconfont icon-renminbi_o">￥288</span>
  145.               <span>123人已购买</span>
  146.             </div>
  147.           </div>
  148.         </div>
  149.         <div class="lista">
  150.           <a href=""><img src="static/images/d.jpg" alt="" /></a>
  151.           <div class="desc">
  152.             <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  153.             <div class="price">
  154.               <span class="iconfont icon-renminbi_o">￥288</span>
  155.               <span>123人已购买</span>
  156.             </div>
  157.           </div>
  158.         </div>
  159.         <div class="lista">
  160.           <a href=""><img src="static/images/d.jpg" alt="" /></a>
  161.           <div class="desc">
  162.             <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  163.             <div class="price">
  164.               <span class="iconfont icon-renminbi_o">￥288</span>
  165.               <span>123人已购买</span>
  166.             </div>
  167.           </div>
  168.         </div>
  169.         <div class="lista">
  170.           <a href=""><img src="static/images/d.jpg" alt="" /></a>
  171.           <div class="desc">
  172.             <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  173.             <div class="price">
  174.               <span class="iconfont icon-renminbi_o">￥288</span>
  175.               <span>123人已购买</span>
  176.             </div>
  177.           </div>
  178.         </div>
  179.         <div class="lista">
  180.           <a href=""><img src="static/images/d.jpg" alt="" /></a>
  181.           <div class="desc">
  182.             <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  183.             <div class="price">
  184.               <span class="iconfont icon-renminbi_o">￥288</span>
  185.               <span>123人已购买</span>
  186.             </div>
  187.           </div>
  188.         </div>
  189.         <div class="lista">
  190.           <a href=""><img src="static/images/d.jpg" alt="" /></a>
  191.           <div class="desc">
  192.             <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  193.             <div class="price">
  194.               <span class="iconfont icon-renminbi_o">￥288</span>
  195.               <span>123人已购买</span>
  196.             </div>
  197.           </div>
  198.         </div>
  199.         <div class="lista">
  200.           <a href=""><img src="static/images/d.jpg" alt="" /></a>
  201.           <div class="desc">
  202.             <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  203.             <div class="price">
  204.               <span class="iconfont icon-renminbi_o">￥288</span>
  205.               <span>123人已购买</span>
  206.             </div>
  207.           </div>
  208.         </div>
  209.         <div class="lista">
  210.           <a href=""><img src="static/images/d.jpg" alt="" /></a>
  211.           <div class="desc">
  212.             <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  213.             <div class="price">
  214.               <span class="iconfont icon-renminbi_o">￥288</span>
  215.               <span>123人已购买</span>
  216.             </div>
  217.           </div>
  218.         </div>
  219.         <div class="lista">
  220.           <a href=""><img src="static/images/d.jpg" alt="" /></a>
  221.           <div class="desc">
  222.             <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  223.             <div class="price">
  224.               <span class="iconfont icon-renminbi_o">￥288</span>
  225.               <span>123人已购买</span>
  226.             </div>
  227.           </div>
  228.         </div>
  229.       </div>
  230.     </main>
  231.     <footer>
  232.       <div class="d_nav">
  233.         <div class="a">
  234.           <span class="iconfont icon-shejiaotubiao-44 shouye"> </span>
  235.         </div>
  236.         <div class="b">
  237.           <span class="iconfont icon-gouwuchekong gwc"> </span>
  238.           <p>购物车</p>
  239.         </div>
  240.         <div class="c">
  241.           <span class="iconfont icon-wode-copy wode"> </span>
  242.           <p>我的淘宝</p>
  243.         </div>
  244.       </div>
  245.     </footer>
  246.   </body>
  247. </html>
  • header.css文件
  1. @import url(font_icon/iconfont.css);
  2. html {
  3.   font-size: calc(100vw / 3.75);
  4. }
  5. body {
  6.   font-size: 16px;
  7. }
  8. header {
  9.   position: fixed;
  10.   z-index: 99;
  11.   background-color: #f4f4f4;
  12. }
  13. header nav {
  14.   width: 3.57rem;
  15.   display: flex;
  16.   place-content: space-around;
  17.   place-items: center;
  18.   margin: auto;
  19. }
  20. header nav .logo .alogo {
  21.   margin-left: -0.1rem;
  22.   font-size: 0.35rem;
  23.   color: rgb(255, 102, 0);
  24. }
  25. header nav .sousuo {
  26.   position: relative;
  27. }
  28. header nav .sousuo input {
  29.   width: 2rem;
  30.   height: 0.35rem;
  31.   border-radius: 0.2rem;
  32.   border: 0.01rem solid rgb(255, 102, 0);
  33. }
  34. header nav .sousuo span {
  35.   position: absolute;
  36.   top: 0.025rem;
  37.   right: 0.04rem;
  38.   width: 0.64rem;
  39.   height: 0.3rem;
  40.   text-align: center;
  41.   border-radius: 0.2rem;
  42.   border: 00.01rem solid #fff;
  43.   color: #fff;
  44.   padding-top: 0.05rem;
  45.   font-weight: bold;
  46.   font-size: 0.14rem;
  47.   background: linear-gradient(to right, #ff8d0e, #ff5000);
  48. }
  49. header nav .qiandao .qd {
  50.   font-size: 0.3rem;
  51.   color: #ff5000;
  52. }
  • main.css文件
  1. main .ksrk {
  2.   width: 3.57rem;
  3.   height: 1.835rem;
  4.   display: grid;
  5.   grid-template-columns: repeat(2, 1.785rem);
  6.   grid-template-rows: repeat(2, 0.92rem);
  7.   position: relative;
  8.   margin: auto;
  9.   top: 0.1rem;
  10.   background-color: #fff;
  11.   border-radius: 0.2rem;
  12. }
  13. main .ksrk .a {
  14.   padding: 0.05rem;
  15.   display: grid;
  16.   grid-template-columns: repeat(2, 1fr);
  17. }
  18. main .ksrk .a:first-of-type {
  19.   border-bottom: 1px solid #ccc;
  20.   border-right: 1px solid #ccc;
  21. }
  22. main .ksrk .a:nth-of-type(2) {
  23.   border-bottom: 1px solid #ccc;
  24. }
  25. main .ksrk .a:nth-of-type(3) {
  26.   border-right: 1px solid #ccc;
  27. }
  28. main .ksrk .a .title {
  29.   display: flex;
  30.   grid-column: span 2;
  31. }
  32. main .ksrk .a a img {
  33.   width: 0.63rem;
  34. }
  35. main .ksrk .a .title h3 {
  36.   font-size: 0.15rem;
  37. }
  38. main .ksrk .a .title span {
  39.   padding: 0.01rem;
  40.   background-color: #f50;
  41.   font-size: 0.11rem;
  42.   color: #fff;
  43.   text-align: center;
  44.   border-radius: 0.04rem;
  45. }
  46. main .list {
  47.   place-content: center;
  48.   margin: 0.2rem 0.1rem;
  49.   display: grid;
  50.   grid-template-columns: repeat(2, 1fr);
  51.   gap: 0.1rem;
  52.   margin-bottom: 0.6rem;
  53. }
  54. main .list .lista {
  55.   background-color: #fff;
  56.   border-radius: 0.2rem;
  57.   border-radius: 0.1rem;
  58.   display: flex;
  59.   flex-flow: column;
  60. }
  61. main .list .lista a img {
  62.   border-radius: 10px 10px 0 0;
  63.   width: 1.725rem;
  64. }
  65. main .list .lista .desc a {
  66.   color: #555;
  67.   font-size: small;
  68. }
  70. main .list .lista .desc .price span:first-of-type {
  71.   color: #f50;
  72. }
  73. main .list .lista .desc .price span:last-of-type {
  74.   font-size: smaller;
  75.   color: #ccc;
  76. }
  • nav.css
  1. footer {
  2.   background-color: #fff;
  3.   position: fixed;
  4.   bottom: 0;
  5.   left: 0;
  6.   right: 0;
  7.   z-index: 99;
  8. }
  9. footer .d_nav {
  10.   display: grid;
  11.   grid-template-columns: repeat(3, 1fr);
  12.   place-items: center;
  13.   place-content: center;
  14.   width: 3.57rem;
  15.   margin: auto;
  16.   height: 0.46rem;
  17. }
  18. footer .d_nav .a .shouye {
  19.   font-size: 0.5rem;
  20.   color: rgb(255, 102, 0);
  21. }
  22. footer .d_nav .b,
  23. footer .d_nav .c {
  24.   display: flex;
  25.   flex-flow: column;
  26.   place-items: center;
  27. }
  28. footer .d_nav .b .gwc {
  29.   font-size: 0.25rem;
  30.   color: #5d656b;
  31. }
  32. footer .d_nav .c .wode {
  33.   font-size: 0.25rem;
  34.   color: #5d656b;
  35. }
  36. footer .d_nav .c p,
  37. footer .d_nav .b p {
  38.   margin: 0.05rem;
  39.   color: #666666;
  40.   font-size: 0.12rem;
  41. }
  • navs.css文件
  1. * {
  2.   padding: 0;
  3.   margin: 0;
  4.   box-sizing: border-box;
  5. }
  6. a {
  7.   text-decoration: none;
  8. }
  9. html {
  10.   font-size: calc(100vw / 3.75);
  11. }
  12. body {
  13.   font-size: 16px;
  14.   background-color: #f4f4f4;
  15. }
  16. header {
  17.   height: 0.5rem;
  18.   width: 100vw;
  19. }
  21. main {
  22.   width: 100vw;
  23.   position: relative;
  24.   top: 0.45rem;
  25.   padding-bottom: 0.2rem;
  26. }
  27. main .nav {
  28.   background-color: #fff;
  29.   height: 1.46rem;
  30.   width: 3.57rem;
  31.   display: grid;
  32.   grid-template-columns: repeat(5, 0.61rem);
  33.   grid-template-rows: repeat(2, 0.66rem);
  34.   gap: 0.1rem;
  35.   place-items: center;
  36.   place-content: space-between;
  37.   margin: auto;
  38.   border-radius: 0.12rem;
  39. }
  40. main .nav a {
  41.   margin-bottom: 0.1rem;
  42. }
  43. main .nav a img {
  44.   width: 100%;
  45. }
  46. main .nav a p {
  47.   font-size: 0.13rem;
  48.   height: 0.13rem;
  49.   color: #666666;
  50. }
  51. @media (max-width: 374px) {
  52.   html {
  53.     font-size: 87.5px;
  54.   }
  55. }
上一条：APICloud Studio3 WiFi真机同步和WiFi真机预览使用说明下一条：模仿苏X易购手机主页布局
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多