search

博客列表 >1031 使用 grid / flex 快速搭建出淘宝网PC端首页框架

1031 使用 grid / flex 快速搭建出淘宝网PC端首页框架

放手去爱
放手去爱原创
2022年11月04日 14:06:02339浏览
  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>淘宝PC端布局框架</title>
  8.     <link rel="stylesheet" href="css/pc.css" />
  9.     <style>* {
  10.       margin: 0;
  11.       padding: 0;
  12.       box-sizing: border-box;
  13.     }
  15.     body {
  16.       min-height: 2000px;
  17.     }
  19.     /* 头部: 导航 */
  20.     .wrap header .top {
  21.       width: 100vw;
  22.       height: 36px;
  23.       background-color: yellow;
  24.     }
  25.     .wrap header .top .content {
  26.       width: 1190px;
  27.       height: inherit;
  28.       background-color: wheat;
  29.       margin: auto;
  30.     }
  32.     /* 头部: 快速入口 */
  33.     .wrap header .entry {
  34.       height: 100px;
  35.       padding: 15px;
  36.       /* background-color: #ccc; */
  37.     }
  38.     .wrap header .entry .content {
  39.       max-width: 1190px;
  40.       min-width: 940px;
  41.       height: inherit;
  42.       background-color: cyan;
  43.       margin: auto;
  45.       display: grid;
  46.       grid-template-columns: 80px repeat(5, 1fr);
  47.       grid-auto-rows: 80px;
  48.       gap: 10px;
  49.       padding: 10px;
  50.     }
  52.     .wrap header .entry .content .item {
  53.       background-color: lightcyan;
  54.       border-radius: 15px;
  55.     }
  57.     /* -------------------------------- */
  59.     /* 主体 */
  60.     .wrap main {
  61.       max-width: 1190px;
  62.       min-width: 940px;
  64.       min-height: 1000px;
  66.       margin: 20px auto;
  68.       padding: 20px;
  70.       background-color: lightgreen;
  71.     }
  73.     /* 搜索框 */
  74.     .wrap main .search {
  75.       height: 88px;
  76.       display: grid;
  77.       grid-template-columns: 190px 1fr 90px;
  78.       gap: 10px;
  80.       /* 粘性定位 */
  81.       position: sticky;
  82.       top: 0;
  83.     }
  85.     .wrap main .search .item {
  86.       background-color: lightpink;
  87.     }
  89.     /* 主体导航区 */
  91.     main .navs {
  92.       height: 423px;
  93.       margin: 20px 0;
  94.       display: grid;
  95.       grid-template-columns: 270px 1fr;
  96.       gap: 10px;
  97.     }
  98.     main .navs > * {
  99.       background-color: lightskyblue;
  100.     }
  102.     main .navs > .user {
  103.       display: grid;
  104.       /* 2行2列 */
  105.       grid-template-columns: 564px 1fr;
  106.       grid-template-rows: 42px 1fr;
  107.       gap: 10px;
  108.     }
  110.     main .navs > .user > * {
  111.       background-color: lightcyan;
  112.     }
  113.     main .navs > .user .user-top {
  114.       grid-column: span 2;
  115.     }
  117.     /* 主体标题区 */
  119.     main .title {
  120.       background-color: lightcyan;
  121.       display: flex;
  122.       place-items: center;
  123.     }
  125.     main .title .tag {
  126.       background: linear-gradient(to left, orangered, orange);
  127.       color: white;
  128.       border-radius: 5px;
  129.       padding: 0 5px;
  130.       margin-left: 6px;
  131.       cursor: default;
  132.     }
  134.     /* 主体: 商品列表 */
  136.     main .list {
  137.       margin: 20px 0;
  139.       display: grid;
  140.       grid-template-columns: repeat(3, 1fr);
  141.       grid-auto-rows: 172px;
  142.       gap: 10px;
  143.     }
  144.     main .list > .item {
  145.       background-color: lightcyan;
  146.       border-radius: 6px;
  148.       display: grid;
  149.       grid-template-columns: 150px 1fr;
  150.       gap: 10px;
  151.       padding: 10px;
  152.     }
  154.     main .list > .item > * {
  155.       background-color: wheat;
  156.       border-radius: 6px;
  157.     }
  159.     main .list > .item img {
  160.       width: 100%;
  161.       border-radius: 6px;
  162.     }
  164.     main .list .item .detail {
  165.       display: grid;
  166.       grid-template-rows: 1fr 25px;
  168.       padding: 10px;
  169.       place-content: space-between;
  170.     }
  172.     main .list .item .detail > * {
  173.       background-color: aqua;
  174.     }
  176.     /* 媒体查询  */
  177.     @media (max-width: 940px) {
  178.       .wrap header .entry .content {
  179.         grid-template-columns: 80px repeat(4, 1fr);
  180.       }
  182.       main .list {
  183.         grid-template-columns: repeat(2, 1fr);
  184.       }
  186.       main .navs {
  187.         grid-template-columns: 1fr;
  188.       }
  190.       main .navs .cate {
  191.         display: none;
  192.       }
  193.     }
  194.     </style>
  195.   </head>
  196.   <body>
  197.     <div class="wrap">
  198.       <!-- (1) 头部 -->
  199.       <header>
  200.         <!-- 1. 顶部导航 -->
  201.         <div class="top">
  202.           <div class="content"></div>
  203.         </div>
  204.         <!-- 2. 快速入口 -->
  205.         <div class="entry">
  206.           <div class="content">
  207.             <div class="item logo"></div>
  208.             <div class="item"></div>
  209.             <div class="item"></div>
  210.             <div class="item"></div>
  211.             <div class="item"></div>
  212.             <div class="item"></div>
  213.           </div>
  214.         </div>
  215.       </header>
  217.       <!-- (2) 主体 -->
  218.       <main>
  219.         <!-- 1. 搜索框 -->
  220.         <div class="search">
  221.           <div class="item logo"></div>
  222.           <div class="item input"></div>
  223.           <div class="item ewm"></div>
  224.         </div>
  226.         <!-- 2. 导航区 -->
  227.         <div class="navs">
  228.           <!-- 1. 左侧分类 -->
  229.           <div class="cate"></div>
  230.           <!-- 2. 在侧轮播图与用户信息 -->
  231.           <div class="user">
  232.             <!-- 1. 顶部导航 -->
  233.             <div class="user-top"></div>
  234.             <!-- 左侧轮播图 -->
  235.             <div class="slider"></div>
  236.             <!-- 右侧用户信息 -->
  237.             <div class="user-info"></div>
  238.           </div>
  239.         </div>
  241.         <!-- 3. 标题区 -->
  242.         <div class="title">
  243.           <h2>猜你喜欢</h2>
  244.           <div class="tag">个性推荐</div>
  245.         </div>
  247.         <!-- 4. 商品列表 -->
  248.         <div class="list">
  249.           <div class="item">
  250.             <a href=""><img src="" alt="" /></a>
  251.             <div class="detail">
  252.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  253.               <div class="price">159</div>
  254.             </div>
  255.           </div>
  256.           <div class="item">
  257.             <a href=""><img src="" alt="" /></a>
  258.             <div class="detail">
  259.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  260.               <div class="price">159</div>
  261.             </div>
  262.           </div>
  263.           <div class="item">
  264.             <a href=""><img src="" alt="" /></a>
  265.             <div class="detail">
  266.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  267.               <div class="price">159</div>
  268.             </div>
  269.           </div>
  270.           <div class="item">
  271.             <a href=""><img src="" alt="" /></a>
  272.             <div class="detail">
  273.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  274.               <div class="price">159</div>
  275.             </div>
  276.           </div>
  277.           <div class="item">
  278.             <a href=""><img src="" alt="" /></a>
  279.             <div class="detail">
  280.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  281.               <div class="price">159</div>
  282.             </div>
  283.           </div>
  284.           <div class="item">
  285.             <a href=""><img src="" alt="" /></a>
  286.             <div class="detail">
  287.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  288.               <div class="price">159</div>
  289.             </div>
  290.           </div>
  291.           <div class="item">
  292.             <a href=""><img src="" alt="" /></a>
  293.             <div class="detail">
  294.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  295.               <div class="price">159</div>
  296.             </div>
  297.           </div>
  298.           <div class="item">
  299.             <a href=""><img src="" alt="" /></a>
  300.             <div class="detail">
  301.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  302.               <div class="price">159</div>
  303.             </div>
  304.           </div>
  305.           <div class="item">
  306.             <a href=""><img src="" alt="" /></a>
  307.             <div class="detail">
  308.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  309.               <div class="price">159</div>
  310.             </div>
  311.           </div>
  312.           <div class="item">
  313.             <a href=""><img src="" alt="" /></a>
  314.             <div class="detail">
  315.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  316.               <div class="price">159</div>
  317.             </div>
  318.           </div>
  319.           <div class="item">
  320.             <a href=""><img src="" alt="" /></a>
  321.             <div class="detail">
  322.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  323.               <div class="price">159</div>
  324.             </div>
  325.           </div>
  326.           <div class="item">
  327.             <a href=""><img src="" alt="" /></a>
  328.             <div class="detail">
  329.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  330.               <div class="price">159</div>
  331.             </div>
  332.           </div>
  333.           <div class="item">
  334.             <a href=""><img src="" alt="" /></a>
  335.             <div class="detail">
  336.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  337.               <div class="price">159</div>
  338.             </div>
  339.           </div>
  340.           <div class="item">
  341.             <a href=""><img src="" alt="" /></a>
  342.             <div class="detail">
  343.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  344.               <div class="price">159</div>
  345.             </div>
  346.           </div>
  347.           <div class="item">
  348.             <a href=""><img src="images/items/item-11.webp" alt="" /></a>
  349.             <div class="detail">
  350.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  351.               <div class="price">159</div>
  352.             </div>
  353.           </div>
  354.           <div class="item">
  355.             <a href=""><img src="" alt="" /></a>
  356.             <div class="detail">
  357.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  358.               <div class="price">159</div>
  359.             </div>
  360.           </div>
  361.           <div class="item">
  362.             <a href=""><img src="" alt="" /></a>
  363.             <div class="detail">
  364.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  365.               <div class="price">159</div>
  366.             </div>
  367.           </div>
  368.         </div>
  369.       </main>
  370.     </div>
  371.   </body>
  372. </html>

上一条：1101实例演示JS中变量常量与函数的声明与使用过程下一条：数组的解构赋值和访问属性
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多