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

博客列表 >【CSS】 PC端布局-实战淘宝

【CSS】 PC端布局-实战淘宝

可乐随笔
可乐随笔原创
2022年11月27日 20:21:06334浏览

PC端布局-实战淘宝

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.     <link rel="stylesheet" href="css/pcmain.css" />
  8.     <title>PC端布局-实战淘宝</title>
  9.   </head>
  10.   <body>
  11.     <div class="wrap">
  12.       <header>
  13.         <!-- 头部 -->
  14.         <!-- 1.顶部导航 -->
  15.         <div class="top">
  16.           <div class="content"></div>
  17.         </div>
  18.         <!-- 2.快速入口 -->
  19.         <div class="entry">
  20.           <div class="content">
  21.             <div class="item logo"></div>
  22.             <div class="item"></div>
  23.             <div class="item"></div>
  24.             <div class="item"></div>
  25.             <div class="item"></div>
  26.             <div class="item"></div>
  27.           </div>
  28.         </div>
  29.       </header>
  31.       <!-- 主体 -->
  32.       <main>
  33.         <!-- 1.搜索框 -->
  34.         <div class="search">
  35.             <div class="item logo"></div>
  36.             <div class="item input"></div>
  37.             <div class="item ewm"></div>
  38.         </div>
  39.         <!-- 2.导航区 -->
  40.         <!-- 左侧分类 -->
  41.         <div class="navs">
  42.             <div class="cate">
  44.             </div>
  45.             <!-- 右侧轮播图和用户信息 -->
  46.             <div class="user">
  47.                 <!-- 顶部导航 -->
  48.                 <div class="user-top">
  49.                     .
  50.                 </div>
  51.                 <!-- 左侧轮播图 -->
  52.                 <div class="slider"></div>
  53.                 <!-- 右侧用户信息 -->
  54.                 <div class="user-info"></div>
  55.             </div>
  56.         </div>
  58.         <div class="title">
  59.             <h2>猜你喜欢</h2>
  60.             <div class="tag">个性推荐</div>
  61.         </div>
  63.         <div class="list">
  64.             <div class="item">
  65.                 <a href=""><img src="images/items/item-20.webp" alt=""></a>
  66.                 <div class="detail">
  67.                     <div class="desc">商品描述</div>
  68.                     <div class="price">105</div>
  69.                 </div>
  70.             </div>
  71.             <div class="item">
  72.                 <a href=""><img src="images/items/item-20.webp" alt=""></a>
  73.                 <div class="detail">
  74.                     <div class="desc">商品描述</div>
  75.                     <div class="price">105</div>
  76.                 </div>
  77.             </div>
  78.             <div class="item">
  79.                 <a href=""><img src="images/items/item-20.webp" alt=""></a>
  80.                 <div class="detail">
  81.                     <div class="desc">商品描述</div>
  82.                     <div class="price">105</div>
  83.                 </div>
  84.             </div>
  85.             <div class="item">
  86.                 <a href=""><img src="images/items/item-20.webp" alt=""></a>
  87.                 <div class="detail">
  88.                     <div class="desc">商品描述</div>
  89.                     <div class="price">105</div>
  90.                 </div>
  91.             </div>
  92.             <div class="item">
  93.                 <a href=""><img src="images/items/item-20.webp" alt=""></a>
  94.                 <div class="detail">
  95.                     <div class="desc">商品描述</div>
  96.                     <div class="price">105</div>
  97.                 </div>
  98.             </div>
  99.             <div class="item">
  100.                 <a href=""><img src="images/items/item-20.webp" alt=""></a>
  101.                 <div class="detail">
  102.                     <div class="desc">商品描述</div>
  103.                     <div class="price">105</div>
  104.                 </div>
  105.             </div>
  106.             <div class="item">
  107.                 <a href=""><img src="images/items/item-20.webp" alt=""></a>
  108.                 <div class="detail">
  109.                     <div class="desc">商品描述</div>
  110.                     <div class="price">105</div>
  111.                 </div>
  112.             </div>
  113.             <div class="item">
  114.                 <a href=""><img src="images/items/item-20.webp" alt=""></a>
  115.                 <div class="detail">
  116.                     <div class="desc">商品描述</div>
  117.                     <div class="price">105</div>
  118.                 </div>
  119.             </div>
  120.             <div class="item">
  121.                 <a href=""><img src="images/items/item-20.webp" alt=""></a>
  122.                 <div class="detail">
  123.                     <div class="desc">商品描述</div>
  124.                     <div class="price">105</div>
  125.                 </div>
  126.             </div>
  128.         </div>
  129.       </main>
  130.     </div>
  131.   </body>
  132. </html>

CSS

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5. }
  7. body {
  8.     min-height: 2000px;
  9. }
  11. .wrap header .top {
  12.     width: 100vw;
  13.     height: 36px;
  14.     background-color: yellow;
  15. }
  16. .wrap header .top .content {
  17.     width: 1190px;
  18.     height: inherit;
  19.     margin: auto;
  20.     background-color: wheat;
  21. }
  23. /* 头部快速入口 */
  24. .wrap header .entry {
  25.     height: 100px;
  26.     padding: 15px;
  27.     /* background-color: #ccc; */
  28. }
  29. .wrap header .entry .content {
  30.     max-width: 1190px;
  31.     min-width: 940px;
  32.     height: inherit;
  33.     background-color: aquamarine;
  34.     margin: auto;
  35.     display: grid;
  36.     grid-template-columns: 80px repeat(5,1fr);  
  37.     grid-auto-rows: 80px;
  38.     gap: 10px;
  39.     padding: 10px;
  40. }
  41. .wrap header .entry .content .item {
  42.   background-color: #fff;
  43.   border-radius: 15px;
  44. }
  46. /* 主体 */
  47. .wrap main {
  48.     max-width: 1190px;
  49.     min-width: 740px;
  50.     background-color: lightgreen;
  52.     min-height: 1000px;
  53.     margin: 20px auto;
  54.     padding: 20px;
  55. }
  57. /* 搜索框 */
  58. .wrap main .search {
  59.     height: 88px;
  60.     display: grid;
  61.     grid-template-columns: 190px 1fr 90px;
  62.     /* 1fr：自适应 */
  63.     gap: 10px;
  64.     /* 粘性定位 */
  65.     position: sticky;
  66.     top: 0;
  67. }
  68. .wrap main .search .item {
  69.     background-color: lightpink;
  70. }
  72. /* 主体导航区 */
  73. .wrap main .navs {
  74.     height: 423px;
  75.     margin: 20px 0;
  76.     display: grid;
  77.     grid-template-columns: 270px 1fr;
  78.     gap: 10px;
  79. }
  80. .wrap main .navs .cate {
  81.     background-color: lightskyblue;
  82. }
  83. .wrap main .user {
  84.     display: grid;
  85.     grid-template-columns: 564px 1fr;
  86.     grid-template-rows: 42px 1fr;
  87.     gap: 10px;
  88. }
  89. .wrap main .user > * {
  90.     background-color: aquamarine;
  91. }
  92. .wrap main .user .user-top {
  93.     grid-column: span 2;
  94. }
  96. /* 主体标题区 */
  97. .wrap main .title {
  98.     background-color: lightcyan;
  99.     display: flex;
  100.     place-items: center;
  101. }
  102. .wrap main .title .tag {
  103.     background: linear-gradient(to left,orangered,orange);
  104.     border-radius: 3px;
  105.     color: #fff;
  106.     margin-left: 6px;
  107.     padding: 0 5px;
  108.     cursor: default;
  109. }
  111. /* 主体：商品列表 */
  112. .wrap main .list {
  113.     margin: 20px 0;
  114.     display: grid;
  115.     grid-template-columns: repeat(3,1fr);
  116.     grid-auto-rows: 172px;
  117.     gap: 10px;
  118. }
  119. .wrap main .list .item {
  120.     background-color: lightcyan;
  121.     border-radius: 6px;
  123.     display: grid;
  124.     grid-template-columns: 150px 1fr;
  125.     gap: 10px;
  126.     padding: 10px;
  127. }
  129. .wrap main .list .item > * {
  130.     background-color: antiquewhite;
  131.     border-radius: 6px;;
  132. }
  134. .wrap main .list .item img {
  135.     width: 100%;
  136.     border-radius: 6px;
  137. }
  138. .wrap main .list .item .detail {
  139.     display: grid;
  140.     grid-template-rows: 1fr 25px;
  142.     padding: 10px;
  143.     /* 要加place-content:space-between 适应响应式*/
  144.     place-content: space-between;
  145. }
  148. /* 媒体查询:响应式布局 */
  149. @media (max-width: 940px){
  150.     .wrap header .entry .content {
  151.         grid-template-columns: 80px repeat(4,1fr);  
  152.     }
  153.     .wrap main .list {
  154.         grid-template-columns: repeat(2,1fr);
  155.     }
  156.     /* 屏幕宽度小于740PX时，隐藏菜单 */
  157.     .wrap main .navs .cate {
  158.         display: none;
  159.     }
  160.     /* 屏幕宽度小于740PX时，修改布局为一列 */
  161.     .wrap main .navs {
  162.         grid-template-columns: 1fr;
  163.     }
  165. }
上一条：实例演示列表渲染与条件渲染指令下一条：实例演示vue中常用的术语与使用方式
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多