html+ css grid布局 淘宝静态首页排版案例

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
淘宝静态首页排版
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>淘宝移动端布局</title>
  9. </head>
  10. <body>
  11.     <header class="header">
  12.         <a href=""><img src="0210/images/taobao.png" alt=""></a>
  13.         <a href="" class="search">
  14.             <div class="link-wrapper">
  15.                 <span class="placeholder">寻找宝贝店铺</span>
  16.                 <span class="search-btn">搜索</span>
  17.             </div>
  18.         </a>
  19.         <a href=""><img class="signIn"
  20.                 src="https://gw.alicdn.com/imgextra/i4/O1CN01ftum4629SHP6bCqTm_!!6000000008066-2-tps-99-99.png"></a>
  21.     </header>
  22.     <main class="main">
  23.         <ul class="navs">
  24.             <li class="item">
  25.                 <a href=""><img src="0210/images/navs/tmxb.webp" alt="" /></a>
  26.                 <a href="">天猫新品</a>
  27.             </li>
  28.             <li class="item">
  29.                 <a href=""><img src="0210/images/navs/jrbk.webp" alt="" /></a>
  30.                 <a href="">今日爆款</a>
  31.             </li>
  32.             <li class="item">
  33.                 <a href=""><img src="0210/images/navs/tmgj.webp" alt="" /></a>
  34.                 <a href="">天猫国际</a>
  35.             </li>
  36.             <li class="item">
  37.                 <a href=""><img src="0210/images/navs/fzlx.webp" alt="" /></a>
  38.                 <a href="">飞猪旅行</a>
  39.             </li>
  40.             <li class="item">
  41.                 <a href=""><img src="0210/images/navs/tmcx.webp" alt="" /></a>
  42.                 <a href="">天猫超市</a>
  43.             </li>
  44.             <li class="item">
  45.                 <a href=""><img src="0210/images/navs/tbch.webp" alt="" /></a>
  46.                 <a href="">淘宝吃货</a>
  47.             </li>
  48.             <li class="item">
  49.                 <a href=""><img src="0210/images/navs/sqk.webp" alt="" /></a>
  50.                 <a href="">省钱卡</a>
  51.             </li>
  52.             <li class="item">
  53.                 <a href=""><img src="0210/images/navs/ltjb.webp" alt="" /></a>
  54.                 <a href="">领淘金币</a>
  55.             </li>
  56.             <li class="item">
  57.                 <a href=""><img src="0210/images/navs/alpm.webp" alt="" /></a>
  58.                 <a href="">阿里拍卖</a>
  59.             </li>
  60.             <li class="item">
  61.                 <a href=""><img src="0210/images/navs/fl.webp" alt="" /></a>
  62.                 <a href="">分类</a>
  63.             </li>
  64.         </ul>
  65.         <ul class="entry">
  66.             <li class="item">
  67.                 <div class="title">
  68.                     <h3>聚划算</h3>
  69.                     <span
  70.                         style="color: rgb(255, 255, 255); font-size: 11px; background-color: rgb(255, 66, 0);">品牌折扣</span>
  71.                 </div>
  72.                 <a href="">
  73.                     <img class="one" src="0210/images/items/item-1.webp" alt="" />
  74.                 </a>
  75.                 <a href=""><img src="0210/images/items/item-2.webp" alt="" class="tow" /></a>
  76.             </li>
  77.             <li class="item">
  78.                 <div class="title">
  79.                     <h3>天天特卖</h3>
  80.                     <span
  81.                         style="color: rgb(255, 255, 255); font-size: 12px; background-color: rgb(255, 66, 0);">1元秒杀</span>
  82.                 </div>
  83.                 <a href=""><img src="0210/images/items/item-3.webp" alt="" class="one" /></a>
  84.                 <a href=""><img src="0210/images/items/item-4.webp" alt="" class="tow" /></a>
  85.             </li>
  86.             <li class="item">
  87.                 <div class="title">
  88.                     <h3>有好货</h3>
  89.                     <span style="background-color: deepskyblue">好口碑</span>
  90.                 </div>
  91.                 <a href=""><img src="0210/images/items/item-5.webp" alt="" class="one" /></a>
  92.                 <a href=""><img src="0210/images/items/item-6.webp" alt="" class="tow" /></a>
  93.             </li>
  94.             <li class="item">
  95.                 <div class="title">
  96.                     <h3>每日好店</h3>
  97.                     <span style="background-color: orange">特色</span>
  98.                 </div>
  99.                 <a href=""><img src="0210/images/items/item-7.webp" alt="" class="one" /></a>
  100.                 <a href=""><img src="0210/images/items/item-8.webp" alt="" class="tow" /></a>
  101.             </li>
  102.         </ul>
  103.         <ul class="list">
  104.             <li class="item">
  105.                 <!-- 图片 -->
  106.                 <a href=""><img src="0210/images/items/item-9.webp" alt="" /></a>
  107.                 <!-- 描述 -->
  108.                 <div class="desc">
  109.                     <a href="">商品简介商品简介商品简介商品简介商品简介</a>
  110.                     <div class="price">
  111.                         <span class="iconfont icon-renminbi_o">￥ 14.9</span>
  112.                         <span>123人已购买</span>
  113.                     </div>
  114.                 </div>
  115.             </li>
  116.             <li class="item">
  117.                 <a href=""><img src="0210/images/items/item-10.webp" alt="" /></a>
  118.                 <div class="desc">
  119.                     <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  120.                     <div class="price">
  121.                         <span class="iconfont icon-renminbi_o">￥ 288</span>
  122.                         <span>123人已购买</span>
  123.                     </div>
  124.                 </div>
  125.             </li>
  126.             <li class="item">
  127.                 <a href=""><img src="0210/images/items/item-11.webp" alt="" /></a>
  128.                 <div class="desc">
  129.                     <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  130.                     <div class="price">
  131.                         <span class="iconfont icon-renminbi_o">￥ 288</span>
  132.                         <span>123人已购买</span>
  133.                     </div>
  134.                 </div>
  135.             </li>
  136.             <li class="item">
  137.                 <a href=""><img src="0210/images/items/item-12.webp" alt="" /></a>
  138.                 <div class="desc">
  139.                     <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  140.                     <div class="price">
  141.                         <span class="iconfont icon-renminbi_o">￥ 288</span>
  142.                         <span>123人已购买</span>
  143.                     </div>
  144.                 </div>
  145.             </li>
  147.             <li class="item">
  148.                 <a href=""><img src="0210/images/items/item-13.webp" alt="" /></a>
  149.                 <div class="desc">
  150.                     <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  151.                     <div class="price">
  152.                         <span class="iconfont icon-renminbi_o">￥ 288</span>
  153.                         <span>123人已购买</span>
  154.                     </div>
  155.                 </div>
  156.             </li>
  157.             <li class="item">
  158.                 <a href=""><img src="0210/images/items/item-14.webp" alt="" /></a>
  159.                 <div class="desc">
  160.                     <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  161.                     <div class="price">
  162.                         <span class="iconfont icon-renminbi_o">￥ 288</span>
  163.                         <span>123人已购买</span>
  164.                     </div>
  165.                 </div>
  166.             </li>
  168.             <li class="item">
  169.                 <a href=""><img src="0210/images/items/item-15.webp" alt="" /></a>
  170.                 <div class="desc">
  171.                     <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  172.                     <div class="price">
  173.                         <span class="iconfont icon-renminbi_o">￥ 288</span>
  174.                         <span>123人已购买</span>
  175.                     </div>
  176.                 </div>
  177.             </li>
  178.             <li class="item">
  179.                 <a href=""><img src="0210/images/items/item-16.webp" alt="" /></a>
  180.                 <div class="desc">
  181.                     <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  182.                     <div class="price">
  183.                         <span class="iconfont icon-renminbi_o">￥ 288</span>
  184.                         <span>123人已购买</span>
  185.                     </div>
  186.                 </div>
  187.             </li>
  189.             <li class="item">
  190.                 <a href=""><img src="0210/images/items/item-17.webp" alt="" /></a>
  191.                 <div class="desc">
  192.                     <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  193.                     <div class="price">
  194.                         <span class="iconfont icon-renminbi_o">￥ 288</span>
  195.                         <span>123人已购买</span>
  196.                     </div>
  197.                 </div>
  198.             </li>
  199.             <li class="item">
  200.                 <a href=""><img src="0210/images/items/item-18.webp" alt="" /></a>
  201.                 <div class="desc">
  202.                     <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  203.                     <div class="price">
  204.                         <span class="iconfont icon-renminbi_o">￥ 288</span>
  205.                         <span>123人已购买</span>
  206.                     </div>
  207.                 </div>
  208.             </li>
  210.             <li class="item">
  211.                 <a href=""><img src="0210/images/items/item-19.webp" alt="" /></a>
  212.                 <div class="desc">
  213.                     <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  214.                     <div class="price">
  215.                         <span class="iconfont icon-renminbi_o">￥ 288</span>
  216.                         <span>123人已购买</span>
  217.                     </div>
  218.                 </div>
  219.             </li>
  220.             <li class="item">
  221.                 <a href=""><img src="0210/images/items/item-20.webp" alt="" /></a>
  222.                 <div class="desc">
  223.                     <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  224.                     <div class="price">
  225.                         <span class="iconfont icon-renminbi_o">￥ 288</span>
  226.                         <span>123人已购买</span>
  227.                     </div>
  228.                 </div>
  229.             </li>
  231.             <li class="item">
  232.                 <a href=""><img src="0210/images/items/item-21.webp" alt="" /></a>
  233.                 <div class="desc">
  234.                     <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  235.                     <div class="price">
  236.                         <span class="iconfont icon-renminbi_o">￥ 288</span>
  237.                         <span>123人已购买</span>
  238.                     </div>
  239.                 </div>
  240.             </li>
  241.             <li class="item">
  242.                 <a href=""><img src="0210/images/items/item-22.webp" alt="" /></a>
  243.                 <div class="desc">
  244.                     <a href="">商品描述商品描述商品描述商品描述商品描述</a>
  245.                     <div class="price">
  246.                         <span class="iconfont icon-renminbi_o">￥ 288</span>
  247.                         <span>123人已购买</span>
  248.                     </div>
  249.                 </div>
  250.             </li>
  251.         </ul>
  252.     </main>
  253.     <footer class="footer">
  254.         <a href="">
  255.             <span class="iconfont icon-gouwuche"></span>
  256.             <span>首页</span>
  257.         </a>
  258.         <a href="">
  259.             <span class="iconfont icon-gouwuche"></span>
  260.             <span>购物车</span>
  261.         </a>
  262.         <a href="">
  263.             <span class="iconfont icon-wode"></span>
  264.             <span>我的淘宝</span>
  265.         </a>
  266.     </footer>
  267. </body>
  269. </html>
  1.     * {
  2.         padding: 0;
  3.         margin: 0;
  4.         box-sizing: border-box;
  5.     }
  7.     html {
  8.         font-size: calc(100vw / 3.75);
  9.     }
  11.     body {
  12.         font-size: .16rem;
  13.         background-color: #f4f4f4;
  14.         padding-bottom: .5rem;
  15.     }
  17.     a {
  18.         text-decoration: none;
  19.     }
  21.     ul {
  22.         list-style-type: none;
  23.     }
  25.     .header {
  26.         position: fixed;
  27.         width: 100%;
  28.         top: 0;
  29.         left: 0;
  30.         z-index: 9;
  31.         display: grid;
  32.         grid-template-columns: .6rem 1fr .34rem;
  33.         grid-auto-rows: .5rem;
  34.         background-color: #f4f4f4;
  35.         place-items: center stretch;
  36.         padding: 0 .10rem;
  37.     }
  39.     .header img {
  40.         max-width: 100%;
  41.         display: block;
  42.     }
  44.     .search {
  45.         padding: .02rem;
  46.         border: 1px solid #ff5000;
  47.         font-size: .14rem;
  48.         margin: 0 .15rem;
  49.         background-color: #fff;
  50.         border-radius: .5rem;
  51.     }
  53.     .link-wrapper {
  54.         display: flex;
  55.         place-content: space-between;
  56.         place-items: center;
  57.     }
  59.     .placeholder {
  60.         color: #666;
  61.         margin-left: .05rem;
  62.     }
  64.     .search-btn {
  65.         width: .64rem;
  66.         height: .32rem;
  67.         line-height: .32rem;
  68.         background: -webkit-linear-gradient(left, #FF8D0E, #FF5000);
  69.         background: linear-gradient(to right, #FF8D0E, #FF5000);
  70.         font-size: 0.14rem;
  71.         color: #fff;
  72.         text-align: center;
  73.         border-radius: 0.16rem;
  74.     }
  76.     .main {
  77.         margin-top: .6rem;
  78.     }
  80.     .navs {
  81.         display: grid;
  82.         grid-template-columns: repeat(5, 20%);
  83.         grid-template-rows: repeat(2, 1fr);
  84.         background-color: #fff;
  85.         margin: 0 .1rem;
  86.         font-size: .13rem;
  87.         text-align: center;
  88.         border-radius: .1rem;
  89.         padding-bottom: .12rem;
  90.         margin-bottom: .05rem;
  91.     }
  93.     .navs li>a img {
  94.         display: block;
  95.         max-width: 100%;
  96.     }
  98.     .navs li>a {
  99.         display: block;
  100.         color: #666;
  101.     }
  103.     .navs li>a:last-child {
  104.         margin-top: .05rem;
  105.     }
  107.     .entry {
  108.         border-radius: .1rem;
  109.         margin: 0 0.1rem;
  110.         display: grid;
  111.         grid-template-columns: repeat(2, 50%);
  112.         grid-template-rows: repeat(2, 0.92rem);
  113.         gap: .01rem;
  114.         overflow: hidden;
  115.     }
  117.     .entry>.item {
  118.         position: relative;
  119.         background-color: #fff;
  120.         padding: .05rem;
  121.     }
  123.     .entry>.item .title {
  124.         position: absolute;
  125.         font-size: .12rem;
  126.         left: .05rem;
  127.         top: .05rem;
  128.         display: flex;
  129.         place-items: center;
  130.     }
  132.     .entry>.item .title span {
  133.         color: #fff;
  134.         padding: 0 .02rem;
  135.         border-radius: 2px;
  136.         margin-left: .03rem;
  137.     }
  139.     .entry>.item {
  140.         display: flex;
  141.         height: .92rem;
  142.         place-items: flex-end;
  143.         place-content: space-between;
  144.     }
  146.     .entry>.item .one {
  147.         display: block;
  148.         width: .6rem;
  149.         height: .6rem;
  150.     }
  152.     .entry>.item .tow {
  153.         display: block;
  154.         width: .8rem;
  155.         height: .8rem;
  156.     }
  158.     .footer {
  159.         position: fixed;
  160.         bottom: 0;
  161.         width: 100%;
  162.         left: 0;
  163.         background-color: #fff;
  164.         display: grid;
  165.         grid-template-columns: repeat(3, 1fr);
  166.         grid-auto-rows: .46rem;
  167.         border-top: 1px solid #e7e7e7;
  168.         border-bottom: 1px solid #f8f8f8;
  169.         place-items: center;
  170.         font-size: .12rem;
  171.     }
  173.     .list{
  174.         display: grid;
  175.         grid-template-columns: repeat(2,1fr);
  176.         margin: .05rem 0.1rem;
  177.         gap: .08rem;
  178.     }
  180.     .list > li{
  181.         background-color: #fff;
  182.         border-radius: .08rem;
  183.         overflow: hidden;
  184.         font-size: .13rem;
  185.     }
  187.     .list > li img{
  188.         display: block;
  189.         max-width: 100%;
  190.     }
  192.     .desc{
  193.         padding: .1rem;
  194.     }
  196.     .desc a{
  197.         display: block;
  198.         line-height: 1.5;
  199.         color: #333;
  200.         height: .42rem;
  201.         overflow: hidden;
  202.     }
  204.     .price{
  205.         margin-top: .05rem;
  206.         color: #999999;
  207.     }
  209.     .price .iconfont{
  210.         font-size: .13rem;
  211.         color: #ff5500;
  212.     }
  214.     .footer span.iconfont {
  215.         display: block;
  216.         width: .2rem;
  217.         height: .2rem;
  218.         background-color: #e7e7e7;
  219.         margin: 0 auto;
  220.         margin-bottom: .02rem;
  221.     }
  223.     .footer a {
  224.         color: #666;
  225.     }
效果图

【感谢龙石为本站提供数据交换平台,http://www.longshidata.com/pages/exchange.html】
更多阅读