Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 仿写手淘首页页脚与主体
Blogger Information
Blog 17
fans 0
comment 0
visits 6203
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
410 people have browsed it

仿写手淘首页页脚与主体

1. 仿写页脚与主体

页面效果：

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

footer.css

  1. footer {
  2.   display: grid;
  3.   /* 1行3列 */
  4.   grid-template-columns: repeat(3, 1fr);
  5.   grid-auto-rows: 0.5rem;
  6.   place-items: center;
  7.   /* gap: 0.1rem; */
  8. }
  10. footer > a.iconfont {
  11.   color: #ff5000;
  12.   font-size: 0.4rem;
  13. }
  14. footer > a:first-child + * {
  15.   display: flex;
  16.   flex-flow: column nowrap;
  17.   place-content: center;
  18. }
  20. footer > a:first-child + * > span.iconfont {
  21.   font-size: 0.25rem;
  22.   place-self: center;
  23. }
  24. /* footer > a:first-child + * > span.iconfont + * {
  25.   font-size: 0.1rem;
  26. } */
  28. footer > a:last-child {
  29.   display: flex;
  30.   flex-flow: column nowrap;
  31.   place-content: center;
  32. }
  34. footer > a:last-child > span.iconfont {
  35.   font-size: 0.25rem;
  36.   place-self: center;
  37. }
  38. footer > a:last-child > span.iconfont + * {
  39.   font-size: 0.1rem;
  40. }
  41. header,
  42. footer {
  43.   background-color: #f4f4f4;
  44. }

public.css

  1. main > .navs {
  2.   display: grid;
  3.   grid-template-columns: repeat(5, 1fr);
  4.   grid-template-rows: repeat(2, 1fr);
  5.   place-content: center;
  6.   border-radius: 0.1rem;
  7.   background-color: white;
  8. }
  9. main > .navs > .item {
  10.   text-align: center;
  11. }
  12. ul.entry {
  13.   display: grid;
  14.   grid-template-columns: repeat(2, 1fr);
  15.   grid-template-rows: repeat(2, 1fr);
  16.   border-radius: 0.1rem;
  17.   overflow: hidden;
  18.   margin-top: 10px;
  19.   gap: 0.02rem;
  20. }
  22. ul.entry > .item {
  23.   display: flex;
  24.   background-color: white;
  25. }
  26. ul.entry > .item > a {
  27.   place-self: end;
  28. }
  29. ul.entry > .item > .title {
  30.   position: absolute;
  31.   display: flex;
  32.   flex-flow: row nowrap;
  33. }
  35. ul.entry > .item > .title > h3 {
  36.   font-size: 18px;
  37. }
  38. ul.entry > .item > .title > span {
  39.   font-size: 10px;
  40.   place-self: end;
  41.   background-color: #fe4200;
  42.   border-radius: 0.05rem;
  43.   padding: 0.02rem 0.05rem;
  44.   color: white;
  45. }
  46. ul.list {
  47.   display: grid;
  48.   grid-template-columns: repeat(2, 1fr);
  49.   grid-template-rows: repeat(11, 1fr);
  50.   margin-top: 10px;
  51.   gap: 0.05rem;
  52. }
  53. ul.list > li.item {
  54.   border-radius: 0.1rem;
  55.   overflow: hidden;
  56.   gap: 0.05rem;
  57. }
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