search

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

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

Stonegarlic
Stonegarlic原创
2022年11月13日 18:27:43409浏览

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

实际效果

上一条：JS中变量常量与函数的声明与使用过程，为什么不推荐用var下一条：使用Grid / Flex , 编写淘宝网PC端首页布局
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多