简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 仿淘宝首页面
Blogger Information
Blog 46
fans 2
comment 0
visits 19463
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
仿淘宝首页面
P粉314265155
Original
308 people have browsed it

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="../0718/static/css/zuoyerest.css">
  9.     <link rel="stylesheet" href="../0718/static/css/zuoyepublic.css">
  10.     <link rel="stylesheet" href="../0718/0718/font_icon/iconfont.css">
  13. </head>
  14. <body>
  16.     <header>
  17.         <a href=""><img src="./0718/images/taobao.png" alt=""></a>
  18.          <a href="">
  19.             <span class="xunzhao">寻找宝贝店铺</span>
  20.             <span class="sousuo ">搜索</span>
  21.         </a>
  22.         <a href="" class="iconfont  icon-qiandao-xuanzhong"></a>
  23.     </header>
  25.      <main>
  26.         <!-- 顶部导航 -->
  27.         <ul  class="navs1">
  28.             <li class="item">
  29.                 <a href=""><img src="../0718/0718/images/navs/tmxb.webp" alt=""></a>
  30.                 <span>天猫新品</span>
  31.             </li>
  32.             <li class="item" >
  33.                 <a href=""><img src="../0718/0718/images/navs/jrbk.webp" alt=""></a>
  34.                 <span>今日爆款</span>
  35.             </li>
  36.             <li class="item">
  37.                 <a href=""><img src="../0718/0718/images/navs/tmgj.webp" alt=""></a>
  38.                 <span>天猫国际</span>
  39.             </li>
  40.             <li class="item">
  41.                 <a href=""><img src="../0718/0718/images/navs/fzlx.webp" alt=""></a>
  42.                 <span>飞猪旅行</span>
  43.             </li>
  44.             <li class="item">
  45.                 <a href=""><img src="../0718/0718/images/navs/tmcx.webp" alt=""></a>
  46.                 <span>天猫超市</span>
  47.             </li>
  48.             <li class="item">
  49.                 <a href=""><img src="../0718/0718/images/navs/tmcx.webp" alt=""></a>
  50.                 <span>淘宝吃货</span>
  51.             </li>
  52.             <li class="item">
  53.                 <a href=""><img src="../0718/0718/images/navs/sqk.webp" alt=""></a>
  54.                 <span>省钱卡</span>
  55.             </li>
  56.             <li class="item">
  57.                 <a href=""><img src="../0718/0718/images/navs/ltjb.webp" alt=""></a>
  58.                 <span>领淘金币</span>
  59.             </li>
  60.             <li class="item">
  61.                 <a href=""><img src="../0718/0718/images/navs/alpm.webp" alt=""></a>
  62.                 <span>阿里拍卖</span>
  63.             </li>
  64.             <li class="item">
  65.                 <a href=""><img src="../0718/0718/images/navs/fl.webp" alt=""></a>
  66.                 <span>分类</span>
  67.             </li>
  68.         </ul>
  71.    <!-- 快速入口 -->
  72.    <ul  class="entry">
  73.     <li class="item">
  74.       <div class="title">
  75.         <h3>聚划算</h3>
  76.         <span style="background-color: coral">品牌折扣</span>
  77.     </div>
  78.         <a href=""><img src="../0718/0718/images/items/item-1.webp" alt=""></a>
  79.         <a href=""><img src="../0718/0718/images/items/item-2.webp" alt=""></a>
  81.     </li>
  82.     <li class="item">
  83.     <div class="title">
  84.         <h3>天天特卖</h3>
  85.         <span style="background-color: coral">1元秒杀</span>
  86.       </div>
  87.         <a href=""><img src="../0718/0718/images/items/item-1.webp" alt=""></a>
  88.          <a href=""><img src="../0718/0718/images/items/item-2.webp" alt=""></a>
  89.     </li>
  90.     <li class="item">
  91.         <div class="title">
  92.             <h3>有好货</h3>
  93.             <span style="background-color: deepskyblue">好口碑</span>
  94.           </div>
  95.           <a href=""><img src="../0718/0718/images/items/item-1.webp" alt=""></a>
  96.           <a href=""><img src="../0718/0718/images/items/item-2.webp" alt=""></a>
  98.     </li>
  99.     <li class="item">
  100.         <div class="title">
  101.             <h3>每日好店</h3>
  102.             <span style="background-color: orange">特色</span>
  103.           </div>
  104.           <a href=""><img src="../0718/0718/images/items/item-1.webp" alt=""></a>
  105.           <a href=""><img src="../0718/0718/images/items/item-2.webp" alt=""></a>
  106. </ul>
  107. <!-- 商品列表 -->
  108. <ul class="list">
  109.     <li class="item">
  110.         <a href="" ><img src="../0718/0718/images/items/item-16.webp" 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 class="desc">
  119.         <a href="">
  120.             <span>  商品描述商品描述商品描述商品描述商品描述商品描述   </span>
  121.                 <div>
  122.                     <span>¥320</span>
  123.                     <span>51人购买</span>
  124.                 </div>
  125.                </a>
  126.             </div> -->
  127.     </li>
  128.     <li class="item">
  129.         <a href="" ><img src="../0718/0718/images/items/item-16.webp" alt=""></a>
  130.         <div class="desc">
  131.             <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  132.             <div class="price">
  133.               <span class="iconfont icon-renminbi_o">288</span>
  134.               <span>123人已购买</span>
  135.             </div>
  136.           </div>
  137.     </li>
  138.     <li class="item">
  139.         <a href=""><img src="../0718/0718/images/items/item-16.webp" alt=""></a>
  140.         <div class="desc">
  141.             <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  142.             <div class="price">
  143.               <span class="iconfont icon-renminbi_o">288</span>
  144.               <span>123人已购买</span>
  145.             </div>
  146.           </div>
  147.     </li>
  148.     <li class="item">
  149.         <a href=""><img src="../0718/0718/images/items/item-16.webp" alt=""></a>
  150.         <div class="desc">
  151.             <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  152.             <div class="price">
  153.               <span class="iconfont icon-renminbi_o">288</span>
  154.               <span>123人已购买</span>
  155.             </div>
  156.           </div>
  157.                </a>
  158.             </div>
  159.     </li>
  161. </ul>
  163.      </main>
  166.     <footer>
  167.         <a href="" class="iconfont icon-taobao"></a>
  168.         <a href="">
  169.        <span class="iconfont  icon-gouwuche"> </span>
  170.        <span>购物车</span>
  171.         </a>
  172.         <a href="">
  173.            <span class="  iconfont   icon-wode"  style="font-size: 0.25rem;"></span>
  174.             <span>我的淘宝</span>
  175.         </a>
  176.     </footer>
  179. </body>
  180. </html>

rest.css

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5. }
  6. a {
  7.     text-decoration: none;
  8.     color: coral ;
  9. }
  11. li {
  12.     list-style: none;
  13. }
  15. html {
  16. font-size: calc(100vw / 3.75);
  18. }
  20. body img {
  21.     width: 100%;
  22. }
  24. body    {
  25. font-size: 0.14rem;
  26. color: #333;
  27. background-color: #f4f4f4;
  28. margin: auto;
  29. /* overflow: hidden; */
  30.      padding: 0 0.15rem; 
  31.      height: 2000px;
  34. }
  36. @media (max-width:320px) {
  37.     html     {
  38.         font-size:85px;
  39.     }
  40. }
  41. @media (min-width: 640px) {
  42.    html {
  43.     font-size: 170px;
  44.    }
  46. }

public.css

  2.     <style>
  3.     header ,footer {
  4.         height: 50px;
  5.         background-color: #f4f4f4;
  6.         position: fixed;
  7.     }
  8.     footer {
  9.         height: 50px;
  10.         background-color: #f4f4f4;
  11.         position: fixed;
  12.     }
  13.    header {
  14.     display: grid;
  15.     grid-template-columns: 0.5rem 1fr 0.33rem;
  16.      top: 0;
  17.      left: 0;
  18.      right: 0;
  19.      z-index: 100;
  20.      gap:0.1rem ;
  21.      place-items: center  ; 
  22.      /* place-content: center; */
  23.      grid-auto-rows: 0.5rem;
  24.    }
  25.    header a:first-of-type {
  26.     width: 0.5rem;
  27.     padding-left: 00.1rem;
  28.     padding-top: 0.06rem;
  29.    } 
  30.    header a:nth-of-type(2) {
  31.       border: 2px solid #ff5000;
  32.       border-radius: 30px;
  33.       /* width: auto; */
  34.       color: #555;
  35.       display: flex;
  36.       /* place-content: space-around; */
  37.       place-content: space-between;
  38.       place-items: center;
  39.       /* 分散对齐，必须将宽度按照百分比撑开，不然没有效果，因为你前面已经使用1fr ，剩余宽度已经自动给定了
  40.        在内容对齐分散一定要在容器内容进行
  41.       */
  42.       width: 100%;
  43.       height: 30px;
  45.    } 
  46. header .xunzhao {
  47.     /* background-color: aquamarine; */
  48.     padding-left:  10px;
  49. }
  50. header .sousuo {
  51.     /* background-color: aquamarine; */
  52.     padding-right:  10px;
  53.     background-color: #ff5f00;
  54.     border-radius: 0.15rem;
  55.     padding: 0.02rem 0.15rem;
  56.    margin-right: 00.02rem;
  57.     background: linear-gradient(to left ,  #ff5000 ,#ffa000);
  58. }
  59. header a:last-of-type {
  60.     /* background: #ff5000; */
  61.     /* 引入阿里字体 不能使用背景色 */
  62.     color: rgb(255, 0, 0);
  63.     /* width: 0.01rem; */
  64.     width: 100%;
  65.     /* font-size: 0.20rem; */
  66. }
  69.    footer {
  70.     bottom: 0;
  71.     left: 0;
  72.      right: 0;
  73.      height: 60px;
  74.      background: f4f4f4  ;
  75.      display: grid;
  76.      grid-template-columns: repeat(3 ,1fr);
  77.      place-items: center;
  78.      place-content: center;
  80.    }
  81.     footer  a:first-of-type {
  82.         /* background-color: #ff5000; */
  83.         color: #ff5000;
  84.         font-size: 0.35rem;
  85.     }
  87.     footer  a:last-of-type {
  88.         /* background-color: #ff5000; */
  89.         color: #555; 
  90.         /* font-size: 0.35rem; */
  91.         display: grid;
  92.         place-content: center;
  93.         place-items: center;
  94.     font-size: 0.16rem;
  95.     }
  98.     footer a:nth-of-type(2) {
  99.      /* background-color: #ff5000; */
  100.      color: #555; 
  101.         /* font-size: 0.35rem; */
  102.         display: grid;
  103.         place-content: center;
  104.         place-items: center;
  105.         font-size: 0.16rem;
  106.     }
  107.   footer  a   span:first-of-type {
  108.     color: red;
  109.     font-size: 0.30rem;
  110.   }
  113. main {
  114.     height: 2000px;
  115.     /* background-color: red; */
  116.     position: relative;
  117.     top: 50px;
  118.    margin-top: 0.08rem;
  119.   /* padding: 0  0 0.03rem 0; */
  120.    /* margin-bottom: 2rem; */
  121. }
  122. main ul:first-of-type{
  123.      display: grid;
  124.      grid-template-columns:repeat(5,1fr);
  125.      /* grid-template-rows: repeat(2,); */
  126.      place-items: center;
  127.      place-content: center;
  128.      background-color: white;
  129.       /* gap: 0 0.1rem; */
  130.       border-radius: 0.1rem;
  131.       margin-top: 0.08rem;
  132. }
  134. main .navs1 .item  {
  136.   display: grid;
  137.   /* 文字对齐 */
  138.   place-items: center;
  139.   /* background-color: aqua; */
  140.   /* gap: 0 1rem; */
  141. }
  142. main ul  li span {
  143.     /* background-color: #ff5f00; */
  144.     color: #666666;
  145.     /* font-size: 0.12rem; */
  146.        /* place-items: center;
  147.      place-content: center; */
  148.      /* place-self: center; */
  149.       /* gap: 0 0.1rem; */
  151.   /* padding: 0.1rem ; */
  152.   margin-top: 0.05rem;
  153.     /* gap: 0 0.1rem; */
  154.     }
  156.     main .entry {
  157.   display: grid;
  158.   grid-template-columns: repeat(2, 1fr);
  159.   padding: 0.1rem;
  160.   background-color: white;
  161.   border-radius: 0.1rem;
  162.       margin-top: 0.08rem;
  163.       /* padding: 0.1rem; */
  164. }
  165. main .entry .item {
  166.   display: grid;
  167.   grid-template-columns: repeat(2, 1fr);
  168.   padding: 0.1rem;
  169. }
  170. main .entry .item .title {
  171.   grid-column: span 2;
  172.   display: flex;
  173.   place-items: center;
  174. }
  175. /* 调整标签字体样式 */
  176. main .entry .item .title  span{
  177.     background-color: #ff5000;
  178.   color: white;
  179.   border-radius: 0.05rem;
  180.   font-size: smaller;
  181.    padding: 0 0.03rem; 
  182.    margin-left: 0.05rem; 
  183. }
  184. /* 增加下边框 */
  185. main .entry .item:nth-of-type(-n + 2) {
  186.   border-bottom: 1px solid #dedede;
  187. }
  190. main .list {
  191.     display: grid;
  192.     grid-template-columns: repeat(2,1fr);
  193.     /* background-color: white; */
  194.     /* border-radius: 0.1rem ; */
  195.     margin-top: 0.08rem;
  196.     gap: 0 0.1rem;
  197. }
  198. main .list .item img {
  199.   /* 图片的border-radius: 上 右 下 左; 顺时针 */
  200.   border-radius: 0.1rem 0.1rem 0 0;
  201. }
  202. /* 商品描述 */
  203. main  .list  .desc {
  204.   padding: 0.1rem;
  205.   font-size: smaller;
  208. }
  210. /* 价格  */
  211.  main .list .item .price .iconfont {
  212.   color: #f50;
  213.   font-size: smaller;
  214. }
  215. main .list .item .price span:last-of-type {
  216.   color: #bbb;
  217.   font-size: smaller;
  218. }
  222.     </style>

效果

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！