search

博客列表 >淘宝pc端

淘宝pc端

PHui
PHui原创
2022年11月02日 17:07:12343浏览
  1. <div class="wrap">
  2.       <!-- (1) 头部 -->
  3.       <header>
  4.         <!-- 1. 顶部导航 -->
  5.         <div class="top">
  6.           <div class="content"></div>
  7.         </div>
  8.         <!-- 2. 快速入口 -->
  9.         <div class="entry">
  10.           <div class="content">
  11.             <div class="item logo"></div>
  12.             <div class="item"></div>
  13.             <div class="item"></div>
  14.             <div class="item"></div>
  15.             <div class="item"></div>
  16.             <div class="item"></div>
  17.           </div>
  18.         </div>
  19.       </header>
  21.       <!-- (2) 主体 -->
  22.       <main>
  23.         <!-- 1. 搜索框 -->
  24.         <div class="search">
  25.           <div class="item logo"></div>
  26.           <div class="item input"></div>
  27.           <div class="item ewm"></div>
  28.         </div>
  30.         <!-- 2. 导航区 -->
  31.         <div class="navs">
  32.           <!-- 1. 左侧分类 -->
  33.           <div class="cate"></div>
  34.           <!-- 2. 在侧轮播图与用户信息 -->
  35.           <div class="user">
  36.             <!-- 1. 顶部导航 -->
  37.             <div class="user-top"></div>
  38.             <!-- 左侧轮播图 -->
  39.             <div class="slider"></div>
  40.             <!-- 右侧用户信息 -->
  41.             <div class="user-info"></div>
  42.           </div>
  43.         </div>
  45.         <!-- 3. 标题区 -->
  46.         <div class="title">
  47.           <h2>猜你喜欢</h2>
  48.           <div class="tag">个性推荐</div>
  49.         </div>
  51.         <!-- 4. 商品列表 -->
  52.         <div class="list">
  53.           <div class="item">
  54.             <a href=""><img src="" alt="" /></a>
  55.             <div class="detail">
  56.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  57.               <div class="price">159</div>
  58.             </div>
  59.           </div>
  60.           <div class="item">
  61.             <a href=""><img src="" alt="" /></a>
  62.             <div class="detail">
  63.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  64.               <div class="price">159</div>
  65.             </div>
  66.           </div>
  67.           <div class="item">
  68.             <a href=""><img src="" alt="" /></a>
  69.             <div class="detail">
  70.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  71.               <div class="price">159</div>
  72.             </div>
  73.           </div>
  74.           <div class="item">
  75.             <a href=""><img src="" alt="" /></a>
  76.             <div class="detail">
  77.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  78.               <div class="price">159</div>
  79.             </div>
  80.           </div>
  81.           <div class="item">
  82.             <a href=""><img src="" alt="" /></a>
  83.             <div class="detail">
  84.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  85.               <div class="price">159</div>
  86.             </div>
  87.           </div>
  88.           <div class="item">
  89.             <a href=""><img src="" alt="" /></a>
  90.             <div class="detail">
  91.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  92.               <div class="price">159</div>
  93.             </div>
  94.           </div>
  95.           <div class="item">
  96.             <a href=""><img src="" alt="" /></a>
  97.             <div class="detail">
  98.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  99.               <div class="price">159</div>
  100.             </div>
  101.           </div>
  102.           <div class="item">
  103.             <a href=""><img src="" alt="" /></a>
  104.             <div class="detail">
  105.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  106.               <div class="price">159</div>
  107.             </div>
  108.           </div>
  109.           <div class="item">
  110.             <a href=""><img src="" alt="" /></a>
  111.             <div class="detail">
  112.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  113.               <div class="price">159</div>
  114.             </div>
  115.           </div>
  116.           <div class="item">
  117.             <a href=""><img src="" alt="" /></a>
  118.             <div class="detail">
  119.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  120.               <div class="price">159</div>
  121.             </div>
  122.           </div>
  123.           <div class="item">
  124.             <a href=""><img src="" alt="" /></a>
  125.             <div class="detail">
  126.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  127.               <div class="price">159</div>
  128.             </div>
  129.           </div>
  130.           <div class="item">
  131.             <a href=""><img src="" alt="" /></a>
  132.             <div class="detail">
  133.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  134.               <div class="price">159</div>
  135.             </div>
  136.           </div>
  137.           <div class="item">
  138.             <a href=""><img src="" alt="" /></a>
  139.             <div class="detail">
  140.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  141.               <div class="price">159</div>
  142.             </div>
  143.           </div>
  144.           <div class="item">
  145.             <a href=""><img src="" alt="" /></a>
  146.             <div class="detail">
  147.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  148.               <div class="price">159</div>
  149.             </div>
  150.           </div>
  151.           <div class="item">
  152.             <a href=""><img src="images/items/item-11.webp" alt="" /></a>
  153.             <div class="detail">
  154.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  155.               <div class="price">159</div>
  156.             </div>
  157.           </div>
  158.           <div class="item">
  159.             <a href=""><img src="" alt="" /></a>
  160.             <div class="detail">
  161.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  162.               <div class="price">159</div>
  163.             </div>
  164.           </div>
  165.           <div class="item">
  166.             <a href=""><img src="" alt="" /></a>
  167.             <div class="detail">
  168.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  169.               <div class="price">159</div>
  170.             </div>
  171.           </div>
  172.         </div>
  173.       </main>
  174.     </div>
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  7. body {
  8.   min-height: 3000px;
  9. }
  10. /* 头部：导航 */
  11. .wrap header .top {
  12.   width: 100%;
  13.   height: 36px;
  14.   background-color: pink;
  15. }
  16. .wrap header .top .content {
  17.   width: 1190px;
  18.   height: inherit;
  19.   margin: auto;
  20.   display: flex;
  21.   place-content: space-between;
  22.   background-color: blue;
  23. }
  24. .wrap header .top .content .left {
  25.   display: flex;
  26.   place-items: center;
  27. }
  28. .wrap header .top .content .left span,
  29. .wrap header .top .content .right span {
  30.   margin: 5px;
  31. }
  32. /* 头部：快速入口 */
  33. .wrap header .entry {
  34.   height: 100px;
  35.   width: 1190px;
  36.   padding: 15px;
  37.   background-color: #ff727c;
  38.   margin: 10px auto;
  39.   padding: 10px;
  40. }
  41. .wrap header .entry .content {
  42.   max-width: 1190px;
  43.   min-width: 950px;
  44.   height: inherit;
  45.   margin: auto;
  46.   display: grid;
  47.   grid-template-columns: 80px repeat(5, 1fr);
  48.   grid-auto-rows: 80px;
  49.   gap: 10px;
  50.   /* background-color: #fea775; */
  51.   /* padding: 10px; */
  52. }
  54. .wrap header .entry .content .item {
  55.   background-color: #bb727c;
  56.   border-radius: 15px;
  57.   height: 75px;
  58. }
  59. .wrap header .entry .content .item.logo img,
  60. .wrap header .entry .content .item.entry img {
  61.   width: 100%;
  62. }
  63. .wrap header .entry .content .item.entry {
  64.   color: white;
  65.   background-color: #fea775;
  66.   display: grid;
  67.   grid-template-columns: 1fr 70px;
  68.   padding: 5px;
  69. }
  70. /* 主体 */
  71. .wrap main {
  72.   max-width: 1190px;
  73.   min-width: 950px;
  74.   min-inline-size: 1000px;
  75.   margin: auto;
  76.   padding: 20px;
  77.   background-color: green;
  78. }
  79. /* 搜索框 */
  80. .wrap main .search {
  81.   height: 88px;
  82.   display: grid;
  83.   grid-template-columns: 190px 1fr 90px;
  84.   /* place-items: center; */
  85.   gap: 10px;
  86.   /* 粘性定位 */
  87.   position: sticky;
  88.   top: 0;
  89. }
  90. .wrap main .search .item {
  91.   background-color: #ffffff;
  92. }
  93. .wrap main .search .item .icon-taobaowang {
  94.   color: orange;
  95.   font-size: xx-large;
  96. }
  97. /* 导航区 */
  98. .wrap main .navs {
  99.   height: 423px;
  100.   margin: 20px 0;
  101.   display: grid;
  102.   grid-template-columns: 270px 1fr;
  103.   gap: 10px;
  104. }
  105. .wrap main .navs > * {
  106.   background-color: lightskyblue;
  107. }
  108. .wrap main .navs .cate {
  109.   display: grid;
  110.   grid-template-rows: repeat(9, 1fr);
  111.   gap: 10px;
  112. }
  113. .wrap main .navs .cate > * {
  114.   background-color: aliceblue;
  115. }
  116. /* 用户信息及轮播图 */
  117. .wrap main .navs .user {
  118.   display: grid;
  119.   grid-template-columns: 564px 1fr;
  120.   grid-template-rows: 42px 1fr;
  121.   gap: 10px;
  122. }
  123. .wrap main .navs .user > * {
  124.   background-color: aliceblue;
  125. }
  126. .wrap main .navs .user-top {
  127.   grid-column: span 2;
  128.   display: grid;
  129.   grid-template-columns: repeat(8, 1fr);
  130.   gap: 10px;
  131. }
  132. .wrap main .navs .user-top > * {
  133.   background-color: blue;
  134. }
  135. .wrap main .navs .user-info {
  136.   display: grid;
  137.   grid-template-rows: 106px 60px 1fr 40px;
  138.   gap: 10px;
  139. }
  140. .wrap main .navs .user-info > * {
  141.   background-color: lightblue;
  142. }
  143. .wrap main .navs .user-info .logo {
  144.   padding-top: 10px;
  145.   display: grid;
  146.   grid-template-rows: repeat(2, 1fr);
  147.   /* place-content: center center; */
  148.   place-items: center center;
  149. }
  150. .wrap main .navs .user-info .button {
  151.   display: grid;
  152.   grid-template-columns: repeat(3, 1fr);
  153.   place-items: center center;
  154. }
  155. .wrap main .navs .user-info .user-shop {
  156.   display: grid;
  157.   grid-template-columns: repeat(4, 1fr);
  158.   place-items: center center;
  159.   gap: 10px;
  160. }
  162. /* 标题区 */
  163. .wrap main .title {
  164.   background-color: #fff;
  165.   display: flex;
  166.   place-items: end;
  167. }
  168. .wrap main .title .tag {
  169.   background: linear-gradient(to left, orangered, orange);
  170.   color: #fff;
  171.   padding: 0 5px;
  172.   border-radius: 5px;
  173.   margin-left: 5px;
  174.   margin-bottom: 1px;
  175. }
  176. /* 商品列表 */
  177. .wrap main .list {
  178.   margin: 20px 0;
  179.   display: grid;
  180.   grid-template-columns: repeat(3, 1fr);
  181.   grid-auto-rows: 172px;
  182.   gap: 10px;
  183. }
  184. .wrap main .list .item {
  185.   background-color: rgb(244, 239, 239);
  186.   border-radius: 6px;
  187.   display: grid;
  188.   grid-template-columns: 150px 1fr;
  189.   padding: 10px;
  190.   gap: 10px;
  191. }
  192. .wrap main .list .item > * {
  193.   background-color: orange;
  194. }
  195. .wrap main .list .item img {
  196.   width: 100%;
  197.   border-radius: 6px;
  198. }
  199. .wrap main .list .item .detail {
  200.   display: grid;
  201.   grid-template-rows: 1fr 35px;
  202. }
  203. /* 媒体查询 */
  204. @media (max-width: 950px) {
  205.   .wrap header .entry .content {
  206.     grid-template-columns: 80px repeat(4, 1fr);
  207.   }
  208.   .wrap main .navs {
  209.     grid-template-columns: 1fr;
  210.   }
  211.   .wrap main .navs .cate {
  212.     display: none;
  213.   }
  214.   .wrap main .list {
  215.     grid-template-columns: repeat(2, 1fr);
  216.   }
  217. }

上一条：1101 作业下一条：JS变量常量函数演示
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多