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

博客列表 >使用Grid / Flex , 编写淘宝网PC端首页布局

使用Grid / Flex , 编写淘宝网PC端首页布局

P粉751989631
P粉751989631原创
2022年11月03日 22:41:39354浏览

使用Grid / Flex , 编写淘宝网PC端首页布局

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>淘宝PC端布局框架</title>
  8.     <link rel="stylesheet" href="css/csspc.css" />
  9.   </head>
  10.   <body>
  11.     <div class="wrap">
  12.       <!-- （1）头部 -->
  13.       <header>
  14.         <!-- 1.顶部导航 -->
  15.         <div class="top">
  16.           <div class="content"></div>
  17.         </div>
  19.         <!-- 2.快速入口 -->
  20.         <div class="entry">
  21.           <div class="content">
  22.             <div class="item logo"></div>
  23.             <div class="item"></div>
  24.             <div class="item"></div>
  25.             <div class="item"></div>
  26.             <div class="item"></div>
  27.             <div class="item"></div>
  28.           </div>
  29.         </div>
  30.       </header>
  32.       <!-- (2) 主体 -->
  33.       <main>
  34.         <!-- 1. 搜索框 -->
  35.         <div class="search">
  36.           <div class="item logo"></div>
  37.           <div class="item input"></div>
  38.           <div class="item ewm"></div>
  39.         </div>
  41.         <!-- 2. 导航区 -->
  42.         <div class="navs">
  43.           <!-- 1. 左侧分类 -->
  44.           <div class="cate"></div>
  45.           <!-- 2. 在侧轮播图与用户信息 -->
  46.           <div class="user">
  47.             <!-- 1. 顶部导航 -->
  48.             <div class="user-top"></div>
  49.             <!-- 左侧轮播图 -->
  50.             <div class="slider"></div>
  51.             <!-- 右侧用户信息 -->
  52.             <div class="user-info"></div>
  53.           </div>
  54.         </div>
  56.         <!-- 3. 标题区 -->
  57.         <div class="title">
  58.           <h2>猜你喜欢</h2>
  59.           <div class="tag">个性推荐</div>
  60.         </div>
  63.         <!-- 4. 商品列表 -->
  64.         <div class="list">
  65.           <div class="item">
  66.             <a href=""><img src="" alt="" /></a>
  67.             <div class="detail">
  68.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  69.               <div class="price">159</div>
  70.             </div>
  71.           </div>
  72.           <div class="item">
  73.             <a href=""><img src="" alt="" /></a>
  74.             <div class="detail">
  75.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  76.               <div class="price">159</div>
  77.             </div>
  78.           </div>
  79.           <div class="item">
  80.             <a href=""><img src="" alt="" /></a>
  81.             <div class="detail">
  82.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  83.               <div class="price">159</div>
  84.             </div>
  85.           </div>
  86.           <div class="item">
  87.             <a href=""><img src="" alt="" /></a>
  88.             <div class="detail">
  89.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  90.               <div class="price">159</div>
  91.             </div>
  92.           </div>
  93.           <div class="item">
  94.             <a href=""><img src="" alt="" /></a>
  95.             <div class="detail">
  96.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  97.               <div class="price">159</div>
  98.             </div>
  99.           </div>
  100.           <div class="item">
  101.             <a href=""><img src="" alt="" /></a>
  102.             <div class="detail">
  103.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  104.               <div class="price">159</div>
  105.             </div>
  106.           </div>
  107.           <div class="item">
  108.             <a href=""><img src="" alt="" /></a>
  109.             <div class="detail">
  110.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  111.               <div class="price">159</div>
  112.             </div>
  113.           </div>
  114.           <div class="item">
  115.             <a href=""><img src="" alt="" /></a>
  116.             <div class="detail">
  117.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  118.               <div class="price">159</div>
  119.             </div>
  120.           </div>
  121.           <div class="item">
  122.             <a href=""><img src="" alt="" /></a>
  123.             <div class="detail">
  124.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  125.               <div class="price">159</div>
  126.             </div>
  127.           </div>
  128.           <div class="item">
  129.             <a href=""><img src="" alt="" /></a>
  130.             <div class="detail">
  131.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  132.               <div class="price">159</div>
  133.             </div>
  134.           </div>
  135.           <div class="item">
  136.             <a href=""><img src="" alt="" /></a>
  137.             <div class="detail">
  138.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  139.               <div class="price">159</div>
  140.             </div>
  141.           </div>
  142.           <div class="item">
  143.             <a href=""><img src="" alt="" /></a>
  144.             <div class="detail">
  145.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  146.               <div class="price">159</div>
  147.             </div>
  148.           </div>
  149.           <div class="item">
  150.             <a href=""><img src="" alt="" /></a>
  151.             <div class="detail">
  152.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  153.               <div class="price">159</div>
  154.             </div>
  155.           </div>
  156.           <div class="item">
  157.             <a href=""><img src="" alt="" /></a>
  158.             <div class="detail">
  159.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  160.               <div class="price">159</div>
  161.             </div>
  162.           </div>
  163.           <div class="item">
  164.             <a href=""><img src="images/items/item-11.webp" alt="" /></a>
  165.             <div class="detail">
  166.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  167.               <div class="price">159</div>
  168.             </div>
  169.           </div>
  170.           <div class="item">
  171.             <a href=""><img src="" alt="" /></a>
  172.             <div class="detail">
  173.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  174.               <div class="price">159</div>
  175.             </div>
  176.           </div>
  177.           <div class="item">
  178.             <a href=""><img src="" alt="" /></a>
  179.             <div class="detail">
  180.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  181.               <div class="price">159</div>
  182.             </div>
  183.           </div>
  184.      </main>
  185.     </div>
  186.   </body>
  187. </html>

CSS代码：

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  7. body {
  8.   min-height: 2000px;
  9. }
  11. /* 头部，导航 */
  12. .wrap header .top {
  13.   width: 100vw;
  14.   height: 36px;
  15.   background-color: yellow;
  16. }
  18. .wrop header .top .content {
  19.   width: 1190px;
  20.   height: inherit;
  21.   background-color: wheat;
  22.   margin: auto;
  23. }
  25. /* 头部：快速入口 */
  26. .wrap header .entry {
  27.   width: 100px;
  28.   padding: 15px;
  29. }
  31. .wrap header .entry .content {
  32.   max-width: 1190px;
  33.   min-width: 940px;
  34.   height: inherit;
  35.   background-color: cyan;
  36.   margin: auto;
  38.   display: grid;
  39.   grid-template-columns: 80px repeat(5, 1fr);
  40.   grid-auto-rows: 80px;
  41.   gap: 16px;
  42.   padding: 10px;
  43. }
  45. .wrap header .entry .content .item {
  46.   background-color: lightcyan;
  47.   border-radius: 15px;
  48. }
  50. /* 主体 */
  51. .wrap main {
  52.   max-width: 1190px;
  53.   min-width: 940px;
  55.   min-height: 1000px;
  57.   margin: 20px auto;
  59.   padding: 20px;
  61.   background-color: lightgreen;
  62. }
  64. /* 搜索框 */
  65. .wrap main .search {
  66.   height: 88px;
  67.   display: grid;
  68.   grid-template-columns: 190px 1fr 90px;
  69.   gap: 10px;
  71.   /* 粘性定位 */
  72.   position: sticky;
  73.   top: 0;
  74. }
  76. .wrap main .search .item {
  77.   background-color: lightcoral;
  78. }
  80. /* 主体导航区 */
  82. main .navs {
  83.   height: 423px;
  84.   margin: 20px 0;
  85.   display: grid;
  86.   grid-template-columns: 270px 1fr;
  87.   gap: 10px;
  88. }
  89. main .navs > * {
  90.   background-color: lightskyblue;
  91. }
  93. main .navs > .user {
  94.   display: grid;
  95.   /* 2行2列 */
  96.   grid-template-columns: 564px 1fr;
  97.   grid-template-rows: 42px 1fr;
  98.   gap: 10px;
  99. }
  101. main .navs > .user > * {
  102.   background-color: lightcyan;
  103. }
  104. main .navs > .user .user-top {
  105.   grid-column: span 2;
  106. }
  108. /* 主体标题区 */
  110. main .title {
  111.   background-color: lightcyan;
  112.   display: flex;
  113.   place-items: center;
  114. }
  116. main .title .tag {
  117.   background: linear-gradient(to left, orangered, orange);
  118.   color: white;
  119.   border-radius: 5px;
  120.   padding: 0 5px;
  121.   margin-left: 6px;
  122.   cursor: default;
  123. }
  124. /* 主体: 商品列表 */
  126. main .list {
  127.   margin: 20px 0;
  129.   display: grid;
  130.   grid-template-columns: repeat(3, 1fr);
  131.   grid-auto-rows: 172px;
  132.   gap: 10px;
  133. }
  134. main .list > .item {
  135.   background-color: lightcyan;
  136.   border-radius: 6px;
  138.   display: grid;
  139.   grid-template-columns: 150px 1fr;
  140.   gap: 10px;
  141.   padding: 10px;
  142. }
  144. main .list > .item > * {
  145.   background-color: wheat;
  146.   border-radius: 6px;
  147. }
  149. main .list > .item img {
  150.   width: 100%;
  151.   border-radius: 6px;
  152. }
  154. main .list .item .detail {
  155.   display: grid;
  156.   grid-template-rows: 1fr 25px;
  158.   padding: 10px;
  159.   place-content: space-between;
  160. }
  162. main .list .item .detail > * {
  163.   background-color: aqua;
  164. }
  166. /* 媒体查询  */
  167. @media (max-width: 940px) {
  168.   .wrap header .entry .content {
  169.     grid-template-columns: 80px repeat(4, 1fr);
  170.   }

运行结果
运行结果

上一条：对象和数组的解构赋值下一条：多种数组类型的访问方式和switch演示
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议