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

  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/index.css" />
  9.     <link rel="stylesheet" href="static/font-icon/iconfont.css" />
  10.   </head>
  11.   <body>
  12.     <!-- 页眉 -->
  13.     <header>
  14.       <!-- logo -->
  15.       <a href="" class="logo"><img src="static/images/taobao.png" alt="" /> </a>
  16.       <a href="" class="search">
  17.         <span>寻找宝贝店铺</span>
  18.         <span>搜索</span>
  19.       </a>
  20.       <a href="" class="iconfont icon-qiandao1"></a>
  21.     </header>
  22.     <!-- 内容 -->
  23.     <main class="content">
  24.       <div class="nav">
  25.         <a href="">
  26.           <img src="static/images/navs/tmxb.webp" alt="" />
  27.           <span>天猫新品</span>
  28.         </a>
  29.         <a href="">
  30.           <img src="static/images/navs/jrbk.webp" alt="" />
  31.           <span>今日爆款</span>
  32.         </a>
  33.         <a href="">
  34.           <img src="static/images/navs/tmgj.webp" alt="" />
  35.           <span>天猫国际</span>
  36.         </a>
  37.         <a href="">
  38.           <img src="static/images/navs/fzlx.webp" alt="" />
  39.           <span>飞猪旅行</span>
  40.         </a>
  41.         <a href="">
  42.           <img src="static/images/navs/tmcx.webp" alt="" />
  43.           <span>天猫超市</span>
  44.         </a>
  45.         <a href="">
  46.           <img src="static/images/navs/tbch.webp" alt="" />
  47.           <span>淘宝吃货</span>
  48.         </a>
  49.         <a href="">
  50.           <img src="static/images/navs/sqk.webp" alt="" />
  51.           <span>省钱卡</span>
  52.         </a>
  53.         <a href="">
  54.           <img src="static/images/navs/ltjb.webp" alt="" />
  55.           <span>领淘金币</span>
  56.         </a>
  57.         <a href="">
  58.           <img src="static/images/navs/alpm.webp" alt="" />
  59.           <span>阿里拍卖</span>
  60.         </a>
  61.         <a href="">
  62.           <img src="static/images/navs/fl.webp" alt="" />
  63.           <span>分类</span>
  64.         </a>
  65.       </div>
  66.       <div class="item">
  67.         <a href="">
  68.           <div>
  69.             <span>聚划算</span>
  70.             <span>品牌折扣</span>
  71.           </div>
  72.           <img src="static/images/items/item-1.webp" class="images" alt="" />
  73.           <img src="static/images/items/item-2.webp" alt="" />
  74.         </a>
  75.         <a href="">
  76.           <div>
  77.             <span>天天特卖</span>
  78.             <span>1元秒杀</span>
  79.           </div>
  80.           <img src="static/images/items/item-3.webp" alt="" />
  81.           <img src="static/images/items/item-4.webp" alt="" />
  82.         </a>
  83.         <a href="">
  84.           <div>
  85.             <span>有好货</span>
  86.             <span>好口碑</span>
  87.           </div>
  88.           <img src="static/images/items/item-5.webp" alt="" />
  89.           <img src="static/images/items/item-6.webp" alt="" />
  90.         </a>
  91.         <a href="">
  92.           <div>
  93.             <span>每日好店</span>
  94.             <span>特色</span>
  95.           </div>
  96.           <img src="static/images/items/item-7.webp" alt="" />
  97.           <img src="static/images/items/item-8.webp" alt="" />
  98.         </a>
  99.       </div>
  100.       <div class="product">
  101.         <ul>
  102.           <li>
  103.             <img src="static/images/items/item-9.webp" alt="" />
  104.             <div>
  105.               <h4>这是产品名</h4>
  106.               <div>
  107.                 <span class="iconfont icon-renminbi">288</span>
  108.                 <span>99人已购买</span>
  109.               </div>
  110.             </div>
  111.           </li>
  112.           <li>
  113.             <img src="static/images/items/item-10.webp" alt="" />
  114.             <div>
  115.               <h4>这是产品名</h4>
  116.               <div>
  117.                 <span class="iconfont icon-renminbi">288</span>
  118.                 <span>99人已购买</span>
  119.               </div>
  120.             </div>
  121.           </li>
  122.           <li>
  123.             <img src="static/images/items/item-11.webp" alt="" />
  124.             <div>
  125.               <h4>这是产品名</h4>
  126.               <div>
  127.                 <span class="iconfont icon-renminbi">288</span>
  128.                 <span>99人已购买</span>
  129.               </div>
  130.             </div>
  131.           </li>
  132.           <li>
  133.             <img src="static/images/items/item-12.webp" alt="" />
  134.             <div>
  135.               <h4>这是产品名</h4>
  136.               <div>
  137.                 <span class="iconfont icon-renminbi">288</span>
  138.                 <span>99人已购买</span>
  139.               </div>
  140.             </div>
  141.           </li>
  142.           <li>
  143.             <img src="static/images/items/item-13.webp" alt="" />
  144.             <div>
  145.               <h4>这是产品名</h4>
  146.               <div>
  147.                 <span class="iconfont icon-renminbi">288</span>
  148.                 <span>99人已购买</span>
  149.               </div>
  150.             </div>
  151.           </li>
  152.           <li>
  153.             <img src="static/images/items/item-14.webp" alt="" />
  154.             <div>
  155.               <h4>这是产品名</h4>
  156.               <div>
  157.                 <span class="iconfont icon-renminbi">288</span>
  158.                 <span>99人已购买</span>
  159.               </div>
  160.             </div>
  161.           </li>
  162.           <li>
  163.             <img src="static/images/items/item-15.webp" alt="" />
  164.             <div>
  165.               <h4>这是产品名</h4>
  166.               <div>
  167.                 <span class="iconfont icon-renminbi">288</span>
  168.                 <span>99人已购买</span>
  169.               </div>
  170.             </div>
  171.           </li>
  172.           <li>
  173.             <img src="static/images/items/item-16.webp" alt="" />
  174.             <div>
  175.               <h4>这是产品名</h4>
  176.               <div>
  177.                 <span class="iconfont icon-renminbi">288</span>
  178.                 <span>99人已购买</span>
  179.               </div>
  180.             </div>
  181.           </li>
  182.           <li>
  183.             <img src="static/images/items/item-17.webp" alt="" />
  184.             <div>
  185.               <h4>这是产品名</h4>
  186.               <div>
  187.                 <span class="iconfont icon-renminbi">288</span>
  188.                 <span>99人已购买</span>
  189.               </div>
  190.             </div>
  191.           </li>
  192.           <li>
  193.             <img src="static/images/items/item-18.webp" alt="" />
  194.             <div>
  195.               <h4>这是产品名</h4>
  196.               <div>
  197.                 <span class="iconfont icon-renminbi">288</span>
  198.                 <span>99人已购买</span>
  199.               </div>
  200.             </div>
  201.           </li>
  202.         </ul>
  203.       </div>
  204.     </main>
  205.     <!-- 页脚 -->
  206.     <footer>
  207.       <a href="" class="iconfont icon-taobao"></a>
  208.       <a href="">
  209.         <span class="iconfont icon-gouwuche"></span>
  210.         <span>购物车</span>
  211.       </a>
  212.       <a href="">
  213.         <span class="iconfont icon-wode"></span>
  214.         <span>我的淘宝</span>
  215.       </a>
  216.     </footer>
  217.   </body>
  218. </html>
  1. /* 初始化 */
  2. * {
  3.   margin: 0;
  4.   padding: 0;
  5.   box-sizing: border-box;
  6. }
  7. a {
  8.   text-decoration: none;
  9.   color: #555;
  10. }
  11. li {
  12.   list-style: none;
  13. }
  14. html {
  15.   font-size: calc(100vw / 3.75);
  16. }
  17. @media (max-width: 320px) {
  18.   html {
  19.     font-size: 85px;
  20.   }
  21. }
  22. @media (min-width: 640px) {
  23.   html {
  24.     font-size: 170px;
  25.   }
  26. }
  28. body {
  29.   font-size: 0.13rem;
  30.   color: #333;
  31.   margin: auto;
  32.   background-color: #f4f4f4;
  33.   padding: 0 0.15rem;
  34.   overflow-y: auto;
  35. }
  36. body img {
  37.   width: 100%;
  38. }
  39. /* 页眉css */
  40. header {
  41.   background-color: #f4f4f4;
  42.   height: 0.5rem;
  43.   position: fixed;
  44.   top: 0;
  45.   left: 0;
  46.   right: 0;
  47.   z-index: 100;
  48.   display: grid;
  49.   grid-template-columns: 0.58rem 1fr 0.33rem;
  50.   grid-auto-rows: 0.5rem;
  51.   place-items: center;
  52.   gap: 0.1rem;
  53. }
  54. header .logo {
  55.   padding-left: 0.1rem;
  56. }
  57. header .search {
  58.   width: 100%;
  59.   height: 0.4rem;
  60.   border: 1px solid #d50;
  61.   border-radius: 0.3rem;
  62.   background-color: white;
  63.   display: flex;
  64.   place-content: space-between;
  65.   place-items: center;
  66. }
  67. header .search span:first-of-type {
  68.   padding-left: 0.1rem;
  69.   font-size: large;
  70. }
  71. header .search span:last-of-type {
  72.   /* width: 0.8rem;
  73.   height: 0.33rem;
  74.   border: 1px solid red;
  75.   border-radius: 0.3rem;
  76.   place-self: center; */
  77.   background: linear-gradient(to left, #ff5000, #ffa000);
  78.   color: white;
  79.   font-size: large;
  80.   padding: 0.05rem 0.15rem;
  81.   margin-right: 0.01rem;
  82.   border-radius: 0.3rem;
  83. }
  84. header .iconfont {
  85.   color: #d50;
  86.   font-size: 0.3rem;
  87.   margin-right: 0.1rem;
  88. }
  89. main {
  90.   /* min-height: 2000px; */
  91.   overflow: hidden;
  92.   position: relative;
  93.   top: 0.6rem;
  94. }
  95. /* 页脚css */
  96. footer {
  97.   height: 0.5rem;
  98.   position: fixed;
  99.   bottom: 0;
  100.   left: 0;
  101.   right: 0;
  102.   z-index: 100;
  103.   display: grid;
  104.   grid-template-columns: repeat(3, 1fr);
  105.   place-content: space-around;
  106.   place-items: center;
  107.   background-color: white;
  108. }
  109. footer a {
  110.   display: grid;
  111.   place-items: center;
  112. }
  113. footer a:first-of-type {
  114.   font-size: 0.5rem;
  115.   color: #ff5000;
  116. }
  118. /* 顶布导行css */
  119. main .nav {
  120.   background-color: white;
  121.   border-radius: 0.2rem;
  122.   padding: 0.08rem;
  123.   display: grid;
  124.   grid-template-columns: repeat(5, 1fr);
  125. }
  126. main .nav a {
  127.   display: grid;
  128.   place-items: center;
  129. }
  130. /* 中部菜单 */
  131. main .item {
  132.   background-color: white;
  133.   border-radius: 0.2rem;
  134.   display: grid;
  135.   grid-template-columns: repeat(2, 1fr);
  136.   padding: 0.1rem;
  137.   margin-top: 0.08rem;
  138. }
  139. main .item a {
  140.   display: grid;
  141.   grid-template-columns: repeat(2, 1fr);
  142.   place-items: center;
  143.   padding: 0.08rem;
  144. }
  145. main .item a:nth-of-type(-n + 2) {
  146.   border-bottom: 1px solid rgb(232, 228, 228);
  147. }
  148. main .item a:nth-of-type(odd) {
  149.   border-right: 1px solid rgb(232, 228, 228);
  150. }
  152. main .item a div {
  153.   grid-column: 1 / span 2;
  154.   place-self: end start;
  155. }
  156. main .item a div span:nth-of-type(1) {
  157.   color: black;
  158.   font-size: medium;
  159.   font-weight: bold;
  160.   padding-left: 0.08rem;
  161. }
  162. main .item a div span:last-of-type {
  163.   background-color: #ff5000;
  164.   color: white;
  165.   font-size: smaller;
  166. }
  167. main .item a:nth-of-type(2) div span:last-of-type {
  168.   background-color: rgb(255, 66, 0);
  169. }
  170. main .item a:nth-of-type(3) div span:last-of-type {
  171.   background-color: rgb(0, 144, 234);
  172. }
  173. main .item a:nth-of-type(4) div span:last-of-type {
  174.   background-color: rgb(255, 151, 17);
  175. }
  177. main .product {
  178.   margin-bottom: 0.6rem;
  179. }
  180. main .product ul {
  181.   margin-top: 0.08rem;
  182.   display: grid;
  183.   grid-template-columns: repeat(2, 1fr);
  184.   gap: 0.08rem;
  185. }
  186. main .product ul li img {
  187.   border-radius: 0.1rem 0.1rem 0 0;
  188. }
  189. main .product ul li div {
  190.   background-color: white;
  191.   border-radius: 0 0 0.1rem 0.1rem;
  193.   padding: 0.08rem;
  194. }
  195. main .product ul li div div span:first-of-type {
  196.   color: #ff5500;
  197.   font-size: 0.14rem;
  198. }
  199. main .product ul li div div span:last-of-type {
  200.   color: #999999;
  201.   font-size: 0.11rem;
  202. }
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