仿淘宝移动端布局练习

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
参考课件中的练习目录,仿写页脚与主体1 . main主体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>mobile-taobao</title>
  8.     <!-- <link rel="stylesheet" href="inc/header.css" />
  9.     <link rel="stylesheet" href="font_icon/iconfont.css" />
  10.     <link rel="stylesheet" href="inc/reset.css" />
  11.     <link rel="stylesheet" href="inc/main.css" />
  12.     <link rel="stylesheet" href="inc/footer.css" /> -->
  13.     <link rel="stylesheet" href="inc/modal.css" />
  14.   </head>
  15.   <body>
  16.     <!-- 页眉 -->
  17.     <header>
  18.       <!-- 1.logo -->
  19.       <a href="###" class="logo"><img src="images/taobao.png" alt="" /></a>
  20.       <!-- 2.search -->
  21.       <a href="###">
  22.         <span>寻找宝贝店铺</span>
  23.         <span>搜索</span>
  24.       </a>
  25.       <!-- 3.签到 -->
  26.       <a href="###" class="iconfont icon-qiandao-xuanzhong"></a>
  27.     </header>
  28.     <!-- 主体 -->
  29.     <main>
  30.       <ul class="navs">
  31.         <li>
  32.           <a href="###"><img src="/images/navs/tmxb.webp" alt="" /></a>
  33.           <a href="###"><span>天猫新品</span></a>
  34.         </li>
  35.         <li>
  36.           <a href="###"><img src="/images/navs/jrbk.webp" alt="" /></a>
  37.           <a href="###"><span>今日爆款</span></a>
  38.         </li>
  39.         <li>
  40.           <a href="###"><img src="/images/navs/tmgj.webp" alt="" /></a>
  41.           <a href="###"><span>天猫国际</span></a>
  42.         </li>
  43.         <li>
  44.           <a href="###"><img src="/images/navs/fzlx.webp" alt="" /></a>
  45.           <a href="###"><span>飞猪旅行</span></a>
  46.         </li>
  47.         <li>
  48.           <a href="###"><img src="/images/navs/tmcx.webp" alt="" /></a>
  49.           <a href="###"><span>天猫超市</span></a>
  50.         </li>
  51.         <li>
  52.           <a href="###"><img src="/images/navs/tbch.webp" alt="" /></a>
  53.           <a href="###"><span>天猫吃货</span></a>
  54.         </li>
  55.         <li>
  56.           <a href="###"><img src="/images/navs/sqk.webp" alt="" /></a>
  57.           <a href="###"><span>省钱卡</span></a>
  58.         </li>
  59.         <li>
  60.           <a href="###"><img src="/images/navs/ltjb.webp" alt="" /></a>
  61.           <a href="###"><span>领淘金币</span></a>
  62.         </li>
  63.         <li>
  64.           <a href="###"><img src="/images/navs/alpm.webp" alt="" /></a>
  65.           <a href="###"><span>阿里拍卖</span></a>
  66.         </li>
  67.         <li>
  68.           <a href="###"><img src="/images/navs/fl.webp" alt="" /></a>
  69.           <a href="###"><span>分类</span></a>
  70.         </li>
  71.       </ul>
  72.       <ul class="entry">
  73.         <li class="item">
  74.           <div class="titil">
  75.             <h3>聚划算</h3>
  76.             <span style="background-color: #fe5000">品牌折扣</span>
  77.           </div>
  78.           <a href="###"><img src="images/items/item-1.webp" alt="" /></a>
  79.           <a href="###"><img src="images/items/item-2.webp" alt="" /></a>
  80.         </li>
  81.         <li class="item">
  82.           <div class="titil">
  83.             <h3>淘特价</h3>
  84.             <span style="background-color: #fe5000">1元秒杀</span>
  85.           </div>
  86.           <a href="###"><img src="images/items/item-3.webp" alt="" /></a>
  87.           <a href="###"><img src="images/items/item-4.webp" alt="" /></a>
  88.         </li>
  89.         <li class="item">
  90.           <div class="titil">
  91.             <h3>有好货</h3>
  92.             <span style="background-color: #0090ea">好口碑</span>
  93.           </div>
  94.           <a href="###"><img src="images/items/item-5.webp" alt="" /></a>
  95.           <a href="###"><img src="images/items/item-6.webp" alt="" /></a>
  96.         </li>
  97.         <li class="item">
  98.           <div class="titil">
  99.             <h3>每日好店</h3>
  100.             <span style="background-color: #ff9711">头条</span>
  101.           </div>
  102.           <a href="###"><img src="images/items/item-7.webp" alt="" /> </a>
  103.           <a href="###"><img src="images/items/item-8.webp" alt="" /></a>
  104.         </li>
  105.       </ul>
  106.       <!-- 商品列表 -->
  107.       <ul class="list">
  108.         <!-- <li class="items">
  109.           <a href="###"><img src="images/items/item-9.webp" alt="" /></a>
  110.           <div class="desc">
  111.             <a href="###">商品描述商品描述商品描述商品描述</a>
  113.             <div class="price">
  114.               <span class="iconfont icon-renminbi_o">18.5</span>
  115.               <span>123人已购买</span>
  116.             </div>
  117.           </div>
  118.         </li> -->
  119.         <li class="items">
  120.           <a href="###"><img src="images/items/item-9.webp" alt="" /></a>
  121.           <div class="desc">
  122.             <a href="###">商品描述商品描述商品描述商品描述</a>
  124.             <div class="price">
  125.               <span class="iconfont icon-renminbi_o">18.5</span>
  126.               <span>123人已购买</span>
  127.             </div>
  128.           </div>
  129.         </li>
  130.         <li class="items">
  131.           <a href="###"><img src="images/items/item-10.webp" alt="" /></a>
  132.           <div class="desc">
  133.             <a href="###">商品描述商品描述商品描述商品描述</a>
  135.             <div class="price">
  136.               <span class="iconfont icon-renminbi_o">18.5</span>
  137.               <span>123人已购买</span>
  138.             </div>
  139.           </div>
  140.         </li>
  141.         <li class="items">
  142.           <a href="###"><img src="images/items/item-11.webp" alt="" /></a>
  143.           <div class="desc">
  144.             <a href="###">商品描述商品描述商品描述商品描述</a>
  146.             <div class="price">
  147.               <span class="iconfont icon-renminbi_o">18.5</span>
  148.               <span>123人已购买</span>
  149.             </div>
  150.           </div>
  151.         </li>
  152.         <li class="items">
  153.           <a href="###"><img src="images/items/item-12.webp" alt="" /></a>
  154.           <div class="desc">
  155.             <a href="###">商品描述商品描述商品描述商品描述</a>
  157.             <div class="price">
  158.               <span class="iconfont icon-renminbi_o">18.5</span>
  159.               <span>123人已购买</span>
  160.             </div>
  161.           </div>
  162.         </li>
  163.         <li class="items">
  164.           <a href="###"><img src="images/items/item-13.webp" alt="" /></a>
  165.           <div class="desc">
  166.             <a href="###">商品描述商品描述商品描述商品描述</a>
  168.             <div class="price">
  169.               <span class="iconfont icon-renminbi_o">18.5</span>
  170.               <span>123人已购买</span>
  171.             </div>
  172.           </div>
  173.         </li>
  174.         <li class="items">
  175.           <a href="###"><img src="images/items/item-14.webp" alt="" /></a>
  176.           <div class="desc">
  177.             <a href="###">商品描述商品描述商品描述商品描述</a>
  179.             <div class="price">
  180.               <span class="iconfont icon-renminbi_o">18.5</span>
  181.               <span>123人已购买</span>
  182.             </div>
  183.           </div>
  184.         </li>
  185.         <li class="items">
  186.           <a href="###"><img src="images/items/item-15.webp" alt="" /></a>
  187.           <div class="desc">
  188.             <a href="###">商品描述商品描述商品描述商品描述</a>
  190.             <div class="price">
  191.               <span class="iconfont icon-renminbi_o">18.5</span>
  192.               <span>123人已购买</span>
  193.             </div>
  194.           </div>
  195.         </li>
  196.         <li class="items">
  197.           <a href="###"><img src="images/items/item-16.webp" alt="" /></a>
  198.           <div class="desc">
  199.             <a href="###">商品描述商品描述商品描述商品描述</a>
  201.             <div class="price">
  202.               <span class="iconfont icon-renminbi_o">18.5</span>
  203.               <span>123人已购买</span>
  204.             </div>
  205.           </div>
  206.         </li>
  207.         <li class="items">
  208.           <a href="###"><img src="images/items/item-17.webp" alt="" /></a>
  209.           <div class="desc">
  210.             <a href="###">商品描述商品描述商品描述商品描述</a>
  212.             <div class="price">
  213.               <span class="iconfont icon-renminbi_o">18.5</span>
  214.               <span>123人已购买</span>
  215.             </div>
  216.           </div>
  217.         </li>
  218.         <li class="items">
  219.           <a href="###"><img src="images/items/item-18.webp" alt="" /></a>
  220.           <div class="desc">
  221.             <a href="###">商品描述商品描述商品描述商品描述</a>
  223.             <div class="price">
  224.               <span class="iconfont icon-renminbi_o">18.5</span>
  225.               <span>123人已购买</span>
  226.             </div>
  227.           </div>
  228.         </li>
  229.         <li class="items">
  230.           <a href="###"><img src="images/items/item-19.webp" alt="" /></a>
  231.           <div class="desc">
  232.             <a href="###">商品描述商品描述商品描述商品描述</a>
  234.             <div class="price">
  235.               <span class="iconfont icon-renminbi_o">18.5</span>
  236.               <span>123人已购买</span>
  237.             </div>
  238.           </div>
  239.         </li>
  240.         <li class="items">
  241.           <a href="###"><img src="images/items/item-20.webp" alt="" /></a>
  242.           <div class="desc">
  243.             <a href="###">商品描述商品描述商品描述商品描述</a>
  245.             <div class="price">
  246.               <span class="iconfont icon-renminbi_o">18.5</span>
  247.               <span>123人已购买</span>
  248.             </div>
  249.           </div>
  250.         </li>
  251.         <li class="items">
  252.           <a href="###"><img src="images/items/item-21.webp" alt="" /></a>
  253.           <div class="desc">
  254.             <a href="###">商品描述商品描述商品描述商品描述</a>
  256.             <div class="price">
  257.               <span class="iconfont icon-renminbi_o">18.5</span>
  258.               <span>123人已购买</span>
  259.             </div>
  260.           </div>
  261.         </li>
  262.         <li class="items">
  263.           <a href="###"><img src="images/items/item-22.webp" alt="" /></a>
  264.           <div class="desc">
  265.             <a href="###">商品描述商品描述商品描述商品描述</a>
  267.             <div class="price">
  268.               <span class="iconfont icon-renminbi_o">18.5</span>
  269.               <span>123人已购买</span>
  270.             </div>
  271.           </div>
  272.         </li>
  273.       </ul>
  274.     </main>
  275.     <!-- 页脚 -->
  276.     <footer>
  277.       <a href="###" class="iconfont icon-taobao"></a>
  278.       <a href="###">
  279.         <span class="iconfont icon-gouwuche"></span>
  280.         <span>购物车</span>
  281.       </a>
  282.       <a href="###">
  283.         <span class="iconfont icon-wode"></span>
  284.         <span>我的淘宝</span>
  285.       </a>
  286.     </footer>
  287.   </body>
  288. </html>
2.main css
  1. .navs {
  2.   background: #fff;
  3.   margin: 0.1rem;
  4.   padding-bottom: 0.1rem;
  5.   display: grid;
  6.   grid-template-columns: repeat(5, 1fr);
  7.   gap: 0.05rem;
  8.   border-radius: 0.2rem;
  9. }
  10. .navs > li {
  11.   display: flex;
  12.   flex-flow: column nowrap;
  13.   place-items: center;
  14.   background: #fff;
  15.   border-radius: 0.2rem;
  16. }
  17. main > .entry {
  18.   display: grid;
  19.   grid-template-columns: repeat(2, 1fr);
  20.   margin: 0.1rem;
  21.   border-radius: 0.2rem;
  22. }
  24. main > .entry .item {
  25.   display: grid;
  26.   background: #fff;
  27.   padding: 0.1rem;
  28.   grid-template-columns: repeat(2, 1fr);
  29. }
  30. main > .entry .item .titil {
  31.   grid-column: span 2;
  32.   display: flex;
  33.   margin-left: 0.15rem;
  34. }
  35. main > .entry .item:first-child {
  36.   border-right: 0.01rem solid #f4f4f4;
  37.   border-bottom: 0.01rem solid #f4f4f4;
  38.   border-top-left-radius: 0.2rem;
  39. }
  40. main > .entry .item:nth-child(2) {
  41.   border-top-right-radius: 0.2rem;
  42.   border-bottom: 0.01rem solid #f4f4f4;
  43. }
  44. main > .entry .item:nth-child(3) {
  45.   border-right: 0.01rem solid #f4f4f4;
  46.   border-bottom-left-radius: 0.2rem;
  47. }
  48. main > .entry .item:last-child {
  49.   border-bottom-right-radius: 0.2rem;
  50. }
  51. main > .entry .item img {
  52.   border-radius: 0.2rem;
  53. }
  54. main > .entry .item .titil span {
  55.   color: #fff;
  56.   font-size: xx-small;
  57.   text-align: center;
  58.   padding: 0.05rem 0.03rem;
  59.   /* background-color: #fe5003; */
  60.   border-radius: 0.05rem;
  61. }
  62. /* 商品列表 */
  64. main .list {
  65.   display: grid;
  66.   grid-template-columns: repeat(2, 1fr);
  67.   margin: 0.1rem;
  68.   gap: 0.05rem;
  69.   border-radius: 0.2rem;
  70. }
  71. main .list .items {
  72.   background-color: #fff;
  73.   border-radius: 0.2rem;
  74. }
  75. main .list a img {
  76.   border-top-left-radius: 0.2rem;
  77.   border-top-right-radius: 0.2rem;
  78. }
  80. main .list .items a:first-child + * {
  81.   margin: 0.1rem;
  82. }
  83. main .list .desc {
  84.   /* padding: 0 0.05rem; */
  85.   border-bottom-left-radius: 0.2rem;
  86.   /* background-color: aqua; */
  87. }
  88. main .list .desc .price .iconfont {
  89.   color: #ff5000;
  90.   font-size: large;
  91. }
  93. main .list .desc .price span:last-child {
  94.   color: #999;
  95.   font-size: x-small;
  96. }
3. footer css
  1. footer {
  2.   background-color: #f4f4f4;
  3.   display: grid;
  4.   grid-template-columns: repeat(3, 1fr);
  5.   /* place-content: center; */
  6.   place-items: center;
  7.   border-top: 0.01rem solid #f4f4f4;
  8. }
  9. footer a:first-child {
  10.   font-size: 0.25rem;
  11.   color: #ff5000;
  12. }
  13. footer a:first-child + * {
  14.   display: grid;
  15.   place-items: center;
  16. }
  17. footer a:last-child {
  18.   display: grid;
  19.   place-items: center;
  20. }
  22. footer a .iconfont {
  23.   font-size: xx-large;
  24. }
  25. footer a span {
  26.   font-size: small;
  27.   padding: 0.01rem;
  28. }
4. header css
  1. header {
  2.   margin: 0 0.1rem;
  3.   display: grid;
  4.   grid-auto-flow: column;
  5.   grid-template-columns: 0.58rem 1fr 0.35rem;
  6.   background-color: #f4f4f4;
  7.   place-items: center;
  8.   gap: 0.1rem;
  9. }
  10. header > a:first-child {
  11.   margin-top: 0.04rem;
  12.   margin-left: 0.1rem;
  13. }
  14. header > a:first-child + * {
  15.   display: flex;
  16.   place-content: space-between;
  17.   border: 0.01rem solid #ff5000;
  18.   border-radius: 0.25rem;
  19.   height: 0.35rem;
  20.   width: 100%;
  21.   place-items: center;
  22. }
  23. header > a:first-child + * > span:first-child {
  24.   margin-left: 0.15rem;
  25. }
  26. header > a:first-child + * > span:last-child {
  27.   padding: 0.05rem 0.2rem;
  28.   margin-right: 0.01rem;
  29.   border-radius: 0.25rem;
  30.   /* 背景色渐变效果 */
  31.   background: linear-gradient(to left, #ff5000, #ff8d0e);
  32.   color: #fff;
  33. }
  34. header > a:last-child {
  35.   font-size: 0.2rem;
  36.   color: #ff9c34;
  37. }
4. reset css
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  6. html {
  7.   font-size: calc(100vw / 3.75);
  8. }
  9. body {
  10.   font-size: 0.16rem;
  11.   background: #f3f3f3;
  12. }
  13. /* 图片撑满父容器 */
  14. img {
  15.   width: 100%;
  16. }
  17. /* 媒体查询 */
  18. @media (max-width: 320px) {
  19.   html {
  20.     font-size: 0.85px;
  21.   }
  22. }
  24. @media (min-width: 640px) {
  25.   html {
  26.     font-size: 170px;
  27.   }
  28. }
  29. header,
  30. footer {
  31.   position: fixed;
  32.   height: 0.5rem;
  33. }
  34. header {
  35.   top: 0;
  36.   left: 0;
  37.   right: 0;
  38.   z-index: 9;
  39. }
  40. footer {
  41.   bottom: 0;
  42.   left: 0;
  43.   right: 0;
  44.   z-index: 9;
  45. }
  46. main {
  47.   position: relative;
  48.   top: 0.5rem;
  49.   min-height: 20rem;
  50.   bottom: 0.5rem;
  51. }
  52. a {
  53.   text-decoration: none;
  54.   color: #666;
  55. }
  56. li {
  57.   list-style: none;
  58. }
5.最终呈现的页面

【转自：美国高防站群服务器 http://www.558idc.com/mggfzq.html 复制请保留原URL】
更多阅读