简体中文（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月20日 10:25:45661浏览

  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. }
上一条：小程序和APP的优缺点比对下一条：什么样的业务适用小程序
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多