简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > html+ css grid布局 淘宝静态首页排版案例
Blogger Information
Blog 37
fans 0
comment 1
visits 28114
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
html+ css grid布局 淘宝静态首页排版案例
kong
Original
330 people have browsed it

淘宝静态首页排版

  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.     }

效果图

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！