Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 使用Grid / Flex , 编写淘宝网PC端首页布局
Blogger Information
Blog 26
fans 0
comment 1
visits 10541
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
使用Grid / Flex , 编写淘宝网PC端首页布局
P粉751989631
Original
360 people have browsed it

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

运行结果
运行结果

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