简体中文（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

博客列表 >仿淘宝首页面

仿淘宝首页面

P粉314265155
P粉314265155原创
2022年07月24日 11:57:52302浏览

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>

效果

上一条：参数类型(对象字面量,模板字面量)与函数的分类(闭包以及纯函数)下一条：class类的声明与数组和对象的解构方法
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多