Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 使用 grid / flex 快速搭建出淘宝网PC端首页框架
Blogger Information
Blog 16
fans 0
comment 0
visits 6777
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端首页框架
Stonegarlic
Original
410 people have browsed it

1031作业

  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. </head>
  10. <body>
  11.     <div class="wrap">
  12.         <!-- (1)头部 -->
  13.         <header> 
  14.             <!-- 1.顶部导航 -->
  15.             <div class="top">
  16.                 <div class="content">
  18.                         <span>中国大陆</span>
  19.                         <a href="">亲，请登录</a>
  20.                         <a href="">免费注册</a>
  21.                         <span>手机淘宝</span>
  22.                         <span>网页无障碍</span>
  25.                         <span>我的淘宝</span>
  26.                         <span>购物车</span>
  27.                         <span>收藏夹</span>
  28.                         <span>商品分类</span>
  29.                         <span>免费开店</span>
  30.                         <span>千牛卖家中心</span>
  31.                         <span>联系客服</span>
  33.                 </div>
  34.             </div>
  35.             <!-- 2.快速入口 -->
  36.             <div class="entry">
  37.                 <div class="content">
  38.                     <div class="item logo"></div>
  39.                     <div class="item"></div>
  40.                     <div class="item"></div>
  41.                     <div class="item"></div>
  42.                     <div class="item"></div>
  43.                     <div class="item last"></div>
  44.                 </div>
  45.             </div>
  46.         </header>
  47.         <!-- 主体 -->
  48.         <main>
  49.             <!-- (1)搜索框 -->
  50.             <div class="search">
  51.                 <div class="item logo"></div>
  52.                 <div class="item input"></div>
  53.                 <div class="item ewm"></div>
  54.             </div>
  55.             <!-- (2)导航区 -->
  56.             <div class="navs">
  57.                 <!-- 2.1 左侧分类 -->
  58.                 <div class="cate"></div>
  59.                 <!-- 2.2右侧轮播图与用户信息 -->
  60.                 <div class="user">
  61.                     <!-- 顶部导航 -->
  62.                     <div class="user-top"></div>
  63.                     <!-- 左侧轮播图 -->
  64.                     <div class="slider"></div>
  65.                     <!-- 右侧用户登录 -->
  66.                     <div class="user-info"></div>
  67.                 </div>
  68.             </div>
  69.             <!-- (3)标题区 -->
  70.             <div class="title">
  71.                 <h2>猜你喜欢</h2>
  72.                 <div class="tag">个性推荐</div>
  73.             </div>
  74.             <!-- (4)商品列表 -->
  75.             <div class="list">
  76.                 <div class="item">
  77.                     <a href=""><img src="https://gw.alicdn.com/bao/uploaded/i4/3984301190/O1CN01Cx5fwW1Kf45u0t6Cz_!!0-item_pic.jpg_300x300q90.jpg_.webp" alt=""></a>
  78.                     <div class="detail">
  79.                         <div class="desc">商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</div>
  80.                         <div class="price">105</div>
  81.                     </div>
  82.                 </div>
  83.                 <div class="item">
  84.                     <a href=""><img src="" alt=""></a>
  85.                     <div class="detail">
  86.                         <div class="desc">商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</div>
  87.                         <div class="price">105</div>
  88.                     </div>
  89.                 </div> <div class="item">
  90.                     <a href=""><img src="" alt=""></a>
  91.                     <div class="detail">
  92.                         <div class="desc">商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</div>
  93.                         <div class="price">105</div>
  94.                     </div>
  95.                 </div> <div class="item">
  96.                     <a href=""><img src="" alt=""></a>
  97.                     <div class="detail">
  98.                         <div class="desc">商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</div>
  99.                         <div class="price">105</div>
  100.                     </div>
  101.                 </div> <div class="item">
  102.                     <a href=""><img src="" alt=""></a>
  103.                     <div class="detail">
  104.                         <div class="desc">商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</div>
  105.                         <div class="price">105</div>
  106.                     </div>
  107.                 </div> <div class="item">
  108.                     <a href=""><img src="" alt=""></a>
  109.                     <div class="detail">
  110.                         <div class="desc">商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</div>
  111.                         <div class="price">105</div>
  112.                     </div>
  113.                 </div> <div class="item">
  114.                     <a href=""><img src="" alt=""></a>
  115.                     <div class="detail">
  116.                         <div class="desc">商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</div>
  117.                         <div class="price">105</div>
  118.                     </div>
  119.                 </div> <div class="item">
  120.                     <a href=""><img src="" alt=""></a>
  121.                     <div class="detail">
  122.                         <div class="desc">商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</div>
  123.                         <div class="price">105</div>
  124.                     </div>
  125.                 </div> <div class="item">
  126.                     <a href=""><img src="" alt=""></a>
  127.                     <div class="detail">
  128.                         <div class="desc">商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</div>
  129.                         <div class="price">105</div>
  130.                     </div>
  131.                 </div> <div class="item">
  132.                     <a href=""><img src="" alt=""></a>
  133.                     <div class="detail">
  134.                         <div class="desc">商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</div>
  135.                         <div class="price">105</div>
  136.                     </div>
  137.                 </div> <div class="item">
  138.                     <a href=""><img src="" alt=""></a>
  139.                     <div class="detail">
  140.                         <div class="desc">商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</div>
  141.                         <div class="price">105</div>
  142.                     </div>
  143.                 </div> <div class="item">
  144.                     <a href=""><img src="" alt=""></a>
  145.                     <div class="detail">
  146.                         <div class="desc">商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</div>
  147.                         <div class="price">105</div>
  148.                     </div>
  149.                 </div> <div class="item">
  150.                     <a href=""><img src="" alt=""></a>
  151.                     <div class="detail">
  152.                         <div class="desc">商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</div>
  153.                         <div class="price">105</div>
  154.                     </div>
  155.                 </div> <div class="item">
  156.                     <a href=""><img src="" alt=""></a>
  157.                     <div class="detail">
  158.                         <div class="desc">商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</div>
  159.                         <div class="price">105</div>
  160.                     </div>
  161.                 </div> <div class="item">
  162.                     <a href=""><img src="" alt=""></a>
  163.                     <div class="detail">
  164.                         <div class="desc">商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</div>
  165.                         <div class="price">105</div>
  166.                     </div>
  167.                 </div>
  168.             </div>
  169.         </main>
  170.     </div> 
  171. </body>
  172. </html>
  1. /* ? 样式重置 */
  2. * {
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6. }
  7. /* .wrap{
  8.     margin: auto;
  9. } */
  10. body{
  11.     /* ? 最小高度 */
  12.     min-height: 2000px;
  13.     /* background-color: rgb(246, 211, 123); */
  14. }
  16. /* 头部导航 */
  17. .wrap header > .top{
  18.     width: 100vw;
  19.     height: 35px;
  20.     background-color: #f5f5f5;
  21. }
  22. .wrap header > .top > .content{
  23.     width: 1190px;
  24.     /* 继承父级高度 */
  25.     height: inherit;
  26.     background-color: aquamarine;
  27.     /* 居中 */
  28.     margin: auto ;
  29.     display: grid;
  30.     grid-auto-flow: column;
  31.     place-content: center end;
  34. }
  36. .wrap header > .entry{
  37.     height: 100px;
  38.     /* background-color: blueviolet; */
  39.     /* padding: 15px; */
  40.     margin: 15px;
  41. }
  42. .wrap header .entry .content{
  43.     max-width: 1190px;
  44.     min-width: 940px;
  45.     height: inherit;
  46.     margin: auto;
  47.     background-color: cadetblue;
  48.     /* ?绘制6列网格 */
  49.     display: grid;
  50.     grid-template-columns: 80px repeat(5,1fr);
  51.      /* 网格定义高度 */
  52.      grid-auto-rows: 80px;
  53.     /* 加上网格间距 */
  54.     gap: 10px;
  55.     padding: 10px;
  58. }
  59. .wrap header .entry .content .item{
  60.     background-color: brown;
  61.     /* border: 1px solid; */
  62.     /* 边框圆角 */
  63.     border-radius: 15px;
  64. }
  66. /* -------------------------------------- */
  68. /* ? 主体 */
  69. .wrap main {
  70.     max-width: 1190px;
  71.     min-width: 940px;
  72.     min-height: 1000px;
  74.     background-color:cornflowerblue;
  75.     margin: 5px auto;
  76.     padding: 10px;
  77. }
  79. /* ? 搜索框 */
  80. .wrap main .search{
  81.     /* margin: 10px 10px; */
  82.     height: 88px;
  83.     display: grid;
  84.     grid-template-columns: 190px 1fr 90px;
  85.     gap: 10px;
  86.     position: sticky;
  87.     top: 0;
  88. }
  90. .wrap main .search .item{
  91.     background-color:rgb(101, 243, 6);
  92. }
  94. /* 主题导航区 */
  95. main .navs{
  96.     height: 423px;
  97.     margin: 10px auto;
  98.     display: grid;
  99.     grid-template-columns: 270px 1fr;
  100.     gap:10px
  101. }
  103. main .navs > .cate{
  104.     background-color: antiquewhite;
  105. }
  107. main .navs .user{
  108.     display: grid;
  109.     grid-template-columns: 564px 1fr;
  110.     grid-template-rows: 42px 1fr;
  111.     gap:10px;
  112. }
  114. main .navs .user > *{
  115.     background-color:aquamarine;
  116. }
  118. /* .user-top进行2列合并 */
  119. main .navs .user > .user-top{
  120.     grid-column: span 2;
  121. } 
  123. /* 主题标题区 */
  124. main .title{
  125.     background-color: aliceblue;
  126.     display: flex;
  127.     place-items: center;
  128. }
  130. /* 渐变色 */
  131. main .title .tag{
  132.     background: linear-gradient(to left,orangered,rgb(255, 106, 0));
  133.     color: white;
  134.     border-radius: 5px;
  135.     padding: 0 5px;
  136.     margin-left: 6px;
  137.     cursor: pointer;
  138. }
  140. /* 主体：商品列表 */
  141. main .list{
  142.     margin: 20px 0;
  144.     display: grid;
  145.     grid-template-columns: repeat(3,1fr);
  146.     /* grid-template-rows: repeat(3,172px); */
  147.     grid-auto-flow: 111px;
  148.     grid-auto-rows: 172px;
  149.     gap: 5px;
  150. }
  152. main .list .item{
  153.     background-color: antiquewhite;
  154.     border-radius: 5px;
  156.     display: grid;
  157.     grid-template-columns: 150px 1fr;
  158.     gap: 10px;
  159.     padding: 10px 10px;
  161. }
  163. main .list .item > *{
  164.     background-color:darkgrey;
  165.     border-radius: 5px;
  166. }
  168. main .list .item img{
  169.     width: 100%;
  170.     /* border-radius: 5px; */
  171. }
  173. main .list .item .detail{
  174.     display: grid;
  175.     grid-template-rows:1fr 25px;
  176.     padding: 10px;
  177.     /* 2端对齐 */
  178.     place-content: space-between;
  179. }
  183. /* 媒体查询 当宽度小于940px时显示4个 */
  184. @media (max-width:940px) {
  185.     .wrap header .entry .content{
  186.         grid-template-columns: 80px repeat(4,1fr);
  187.     }  
  188.     .wrap header .entry .content .item .last{
  189.         display: none;
  190.     }
  191.     main .list{
  192.         grid-template-columns: repeat(2,1fr);
  193.     }
  194.     main .navs{
  195.         grid-template-columns: 1fr;
  196.     }
  197.     main .navs > .cate{
  198.         display: none;
  199.     } 
  200. }

实际效果

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