search

博客列表 >淘宝pc端

淘宝pc端

PHui
PHui原创
2022年11月02日 16:39:27322浏览
  1.  <div class="wrap">
  2.       <!-- (1) 头部 -->
  3.       <header>
  4.         <!-- 1. 顶部导航 -->
  5.         <div class="top">
  6.           <div class="content">
  7.             <div class="left">
  8.               <span>中国大陆</span><span>亲，请登录</span><span>免费注册</span
  9.               ><span>手机版淘宝</span><span>网页无障碍</span>
  10.             </div>
  11.             <div class="right">
  12.               <span>我的淘宝</span><span>购物车</span><span>收藏夹</span
  13.               ><span>商品分类</span><span>免费开店</span
  14.               ><span>千牛卖家中心</span><span>联系客服</span>
  15.             </div>
  16.           </div>
  17.         </div>
  18.         <!-- 2. 快速入口 -->
  19.         <div class="entry">
  20.           <div class="content">
  21.             <div class="item logo">
  22.               <img
  23.                 src="https://img.alicdn.com/imgextra/i4/O1CN01msQc331nBPJrr2JBP_!!6000000005051-2-tps-360-320.png"
  24.                 alt=""
  25.               />
  26.             </div>
  27.             <div class="item entry">
  28.               <h2>家装百科</h2>
  29.               <img
  30.                 src="https://img.alicdn.com/bao/uploaded/O1CN01qyrTwp1kzNewbTMsT_!!6000000004754-0-yinhe.jpg_80x80q90.jpg_.webp"
  31.                 alt=""
  32.               />
  33.             </div>
  34.             <div class="item entry">
  35.               <h2>家装百科</h2>
  36.               <img
  37.                 src="https://img.alicdn.com/bao/uploaded/O1CN01qyrTwp1kzNewbTMsT_!!6000000004754-0-yinhe.jpg_80x80q90.jpg_.webp"
  38.                 alt=""
  39.               />
  40.             </div>
  41.             <div class="item entry">
  42.               <h2>家装百科</h2>
  43.               <img
  44.                 src="https://img.alicdn.com/bao/uploaded/O1CN01qyrTwp1kzNewbTMsT_!!6000000004754-0-yinhe.jpg_80x80q90.jpg_.webp"
  45.                 alt=""
  46.               />
  47.             </div>
  48.             <div class="item entry">
  49.               <h2>家装百科</h2>
  50.               <img
  51.                 src="https://img.alicdn.com/bao/uploaded/O1CN01qyrTwp1kzNewbTMsT_!!6000000004754-0-yinhe.jpg_80x80q90.jpg_.webp"
  52.                 alt=""
  53.               />
  54.             </div>
  55.             <div class="item entry">
  56.               <h2>家装百科</h2>
  57.               <img
  58.                 src="https://img.alicdn.com/bao/uploaded/O1CN01qyrTwp1kzNewbTMsT_!!6000000004754-0-yinhe.jpg_80x80q90.jpg_.webp"
  59.                 alt=""
  60.               />
  61.             </div>
  62.           </div>
  63.         </div>
  64.       </header>
  66.       <!-- (2) 主体 -->
  67.       <main>
  68.         <!-- 1. 搜索框 -->
  69.         <div class="search">
  70.           <div class="item logo">
  71.             <div class="iconfont icon-taobaowang"></div>
  72.           </div>
  73.           <div class="item input"></div>
  74.           <div class="item ewm"></div>
  75.         </div>
  77.         <!-- 2. 导航区 -->
  78.         <div class="navs">
  79.           <!-- 1. 左侧分类 -->
  80.           <div class="cate">
  81.             <div class="item"></div>
  82.             <div class="item"></div>
  83.             <div class="item"></div>
  84.             <div class="item"></div>
  85.             <div class="item"></div>
  86.             <div class="item"></div>
  87.             <div class="item"></div>
  88.             <div class="item"></div>
  89.             <div class="item"></div>
  90.           </div>
  91.           <!-- 2. 在侧轮播图与用户信息 -->
  92.           <div class="user">
  93.             <!-- 1. 顶部导航 -->
  94.             <div class="user-top">
  95.               <span></span><span></span><span></span><span></span><span></span
  96.               ><span></span><span></span><span></span>
  97.             </div>
  98.             <!-- 左侧轮播图 -->
  99.             <div class="slider"></div>
  100.             <!-- 右侧用户信息 -->
  101.             <div class="user-info">
  102.               <div class="logo">
  103.                 <img
  104.                   src="//wwc.alicdn.com/avatar/getAvatar.do?userNick=&width=60&height=60&type=sns&_input_charset=UTF-8"
  105.                   alt=""
  106.                 /><span>hi,你好</span>
  107.               </div>
  108.               <div class="button">
  109.                 <div class="item"><span>登录</span></div>
  110.                 <div class="item"><span>注册</span></div>
  111.                 <div class="item"><span>开店</span></div>
  112.               </div>
  113.               <div class="user-shop">
  114.                 <div class="item"><span>宝贝收藏</span></div>
  115.                 <div class="item"><span>买过的店</span></div>
  116.                 <div class="item"><span>收藏的店</span></div>
  117.                 <div class="item"><span>我的足迹</span></div>
  118.               </div>
  119.               <div class="user-xx"></div>
  120.             </div>
  121.           </div>
  122.         </div>
  124.         <!-- 3. 标题区 -->
  125.         <div class="title">
  126.           <h2>猜你喜欢</h2>
  127.           <div class="tag">个性推荐</div>
  128.         </div>
  130.         <!-- 4. 商品列表 -->
  131.         <div class="list">
  132.           <div class="item">
  133.             <a href=""
  134.               ><img
  135.                 src="https://gw.alicdn.com/bao/uploaded/i4/3464966875/O1CN01hAYSqs20eniw9kTpg_!!0-item_pic.jpg_300x300q90.jpg_.webp"
  136.                 alt=""
  137.             /></a>
  138.             <div class="detail">
  139.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  140.               <div class="price">159</div>
  141.             </div>
  142.           </div>
  143.           <div class="item">
  144.             <a href=""
  145.               ><img
  146.                 src="https://gw.alicdn.com/bao/uploaded/i4/2969020084/O1CN01ZYDxSC1CUW3cOcReb_!!0-saturn_solar.jpg_300x300q90.jpg_.webp"
  147.                 alt=""
  148.             /></a>
  149.             <div class="detail">
  150.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  151.               <div class="price">159</div>
  152.             </div>
  153.           </div>
  154.           <div class="item">
  155.             <a href=""
  156.               ><img
  157.                 src="https://gw.alicdn.com/bao/uploaded/i4/2969020084/O1CN01ZYDxSC1CUW3cOcReb_!!0-saturn_solar.jpg_300x300q90.jpg_.webp"
  158.                 alt=""
  159.             /></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=""
  167.               ><img
  168.                 src="https://gw.alicdn.com/bao/uploaded/i4/2969020084/O1CN01ZYDxSC1CUW3cOcReb_!!0-saturn_solar.jpg_300x300q90.jpg_.webp"
  169.                 alt=""
  170.             /></a>
  171.             <div class="detail">
  172.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  173.               <div class="price">159</div>
  174.             </div>
  175.           </div>
  176.           <div class="item">
  177.             <a href=""
  178.               ><img
  179.                 src="https://gw.alicdn.com/bao/uploaded/i4/2969020084/O1CN01ZYDxSC1CUW3cOcReb_!!0-saturn_solar.jpg_300x300q90.jpg_.webp"
  180.                 alt=""
  181.             /></a>
  182.             <div class="detail">
  183.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  184.               <div class="price">159</div>
  185.             </div>
  186.           </div>
  187.           <div class="item">
  188.             <a href=""
  189.               ><img
  190.                 src="https://gw.alicdn.com/bao/uploaded/i4/2213118989895/O1CN01Lkqecj2MxxrWn06iJ_!!0-item_pic.jpg_300x300q90.jpg_.webp"
  191.                 alt=""
  192.             /></a>
  193.             <div class="detail">
  194.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  195.               <div class="price">159</div>
  196.             </div>
  197.           </div>
  198.           <div class="item">
  199.             <a href=""><img src="" alt="" /></a>
  200.             <div class="detail">
  201.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  202.               <div class="price">159</div>
  203.             </div>
  204.           </div>
  205.           <div class="item">
  206.             <a href=""><img src="" alt="" /></a>
  207.             <div class="detail">
  208.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  209.               <div class="price">159</div>
  210.             </div>
  211.           </div>
  212.           <div class="item">
  213.             <a href=""><img src="" alt="" /></a>
  214.             <div class="detail">
  215.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  216.               <div class="price">159</div>
  217.             </div>
  218.           </div>
  219.           <div class="item">
  220.             <a href=""><img src="" alt="" /></a>
  221.             <div class="detail">
  222.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  223.               <div class="price">159</div>
  224.             </div>
  225.           </div>
  226.           <div class="item">
  227.             <a href=""><img src="" alt="" /></a>
  228.             <div class="detail">
  229.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  230.               <div class="price">159</div>
  231.             </div>
  232.           </div>
  233.           <div class="item">
  234.             <a href=""><img src="" alt="" /></a>
  235.             <div class="detail">
  236.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  237.               <div class="price">159</div>
  238.             </div>
  239.           </div>
  240.           <div class="item">
  241.             <a href=""><img src="" alt="" /></a>
  242.             <div class="detail">
  243.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  244.               <div class="price">159</div>
  245.             </div>
  246.           </div>
  247.           <div class="item">
  248.             <a href=""><img src="" alt="" /></a>
  249.             <div class="detail">
  250.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  251.               <div class="price">159</div>
  252.             </div>
  253.           </div>
  254.           <div class="item">
  255.             <a href=""><img src="images/items/item-11.webp" alt="" /></a>
  256.             <div class="detail">
  257.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  258.               <div class="price">159</div>
  259.             </div>
  260.           </div>
  261.           <div class="item">
  262.             <a href=""><img src="" alt="" /></a>
  263.             <div class="detail">
  264.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  265.               <div class="price">159</div>
  266.             </div>
  267.           </div>
  268.           <div class="item">
  269.             <a href=""><img src="" alt="" /></a>
  270.             <div class="detail">
  271.               <div class="desc">商品描述商品描述商品描述商品描述</div>
  272.               <div class="price">159</div>
  273.             </div>
  274.           </div>
  275.         </div>
  276.       </main>
  277.     </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: #f5f5f5;
  15. }
  16. .wrap header .top .content {
  17.   width: 1190px;
  18.   height: inherit;
  19.   margin: auto;
  20.   display: flex;
  21.   place-content: space-between;
  22. }
  23. .wrap header .top .content .left {
  24.   display: flex;
  25.   place-items: center;
  26. }
  27. .wrap header .top .content .left span,
  28. .wrap header .top .content .right span {
  29.   margin: 5px;
  30. }
  31. /* 头部：快速入口 */
  32. .wrap header .entry {
  33.   height: 100px;
  34.   width: 100%;
  35.   padding: 15px;
  36.   background-color: #ff727c;
  37. }
  38. .wrap header .entry .content {
  39.   max-width: 1190px;
  40.   min-width: 950px;
  41.   height: inherit;
  42.   margin: auto;
  43.   display: grid;
  44.   grid-template-columns: 80px repeat(5, 1fr);
  45.   grid-auto-rows: 80px;
  46.   gap: 10px;
  47.   /* padding: 10px; */
  48. }
  50. .wrap header .entry .content .item {
  51.   /* background-color: #bb727c; */
  52.   border-radius: 15px;
  53.   height: 75px;
  54. }
  55. .wrap header .entry .content .item.logo img,
  56. .wrap header .entry .content .item.entry img {
  57.   width: 100%;
  58. }
  59. .wrap header .entry .content .item.entry {
  60.   color: white;
  61.   background-color: #fea775;
  62.   display: grid;
  63.   grid-template-columns: 1fr 70px;
  64.   padding: 5px;
  65. }
  66. /* 主体 */
  67. .wrap main {
  68.   max-width: 1190px;
  69.   min-width: 950px;
  70.   min-inline-size: 1000px;
  71.   margin: auto;
  72.   padding: 20px;
  73.   background-color: green;
  74. }
  75. /* 搜索框 */
  76. .wrap main .search {
  77.   height: 88px;
  78.   display: grid;
  79.   grid-template-columns: 190px 1fr 90px;
  80.   /* place-items: center; */
  81.   gap: 10px;
  82.   /* 粘性定位 */
  83.   position: sticky;
  84.   top: 0;
  85. }
  86. .wrap main .search .item {
  87.   background-color: #ffffff;
  88. }
  89. .wrap main .search .item .icon-taobaowang {
  90.   color: orange;
  91.   font-size: xx-large;
  92. }
  93. /* 导航区 */
  94. .wrap main .navs {
  95.   height: 423px;
  96.   margin: 20px 0;
  97.   display: grid;
  98.   grid-template-columns: 270px 1fr;
  99.   gap: 10px;
  100. }
  101. .wrap main .navs > * {
  102.   background-color: lightskyblue;
  103. }
  104. .wrap main .navs .cate {
  105.   display: grid;
  106.   grid-template-rows: repeat(9, 1fr);
  107.   gap: 10px;
  108. }
  109. .wrap main .navs .cate > * {
  110.   background-color: aliceblue;
  111. }
  112. /* 用户信息及轮播图 */
  113. .wrap main .navs .user {
  114.   display: grid;
  115.   grid-template-columns: 564px 1fr;
  116.   grid-template-rows: 42px 1fr;
  117.   gap: 10px;
  118. }
  119. .wrap main .navs .user > * {
  120.   background-color: aliceblue;
  121. }
  122. .wrap main .navs .user-top {
  123.   grid-column: span 2;
  124.   display: grid;
  125.   grid-template-columns: repeat(8, 1fr);
  126.   gap: 10px;
  127. }
  128. .wrap main .navs .user-top > * {
  129.   background-color: blue;
  130. }
  131. .wrap main .navs .user-info {
  132.   display: grid;
  133.   grid-template-rows: 106px 60px 1fr 40px;
  134.   gap: 10px;
  135. }
  136. .wrap main .navs .user-info > * {
  137.   background-color: lightblue;
  138. }
  139. .wrap main .navs .user-info .logo {
  140.   padding-top: 10px;
  141.   display: grid;
  142.   grid-template-rows: repeat(2, 1fr);
  143.   /* place-content: center center; */
  144.   place-items: center center;
  145. }
  146. .wrap main .navs .user-info .button {
  147.   display: grid;
  148.   grid-template-columns: repeat(3, 1fr);
  149.   place-items: center center;
  150. }
  151. .wrap main .navs .user-info .user-shop {
  152.   display: grid;
  153.   grid-template-columns: repeat(4, 1fr);
  154.   place-items: center center;
  155.   gap: 10px;
  156. }
  158. /* 标题区 */
  159. .wrap main .title {
  160.   background-color: #fff;
  161.   display: flex;
  162.   place-items: end;
  163. }
  164. .wrap main .title .tag {
  165.   background: linear-gradient(to left, orangered, orange);
  166.   color: #fff;
  167.   padding: 0 5px;
  168.   border-radius: 5px;
  169.   margin-left: 5px;
  170.   margin-bottom: 1px;
  171. }
  172. /* 商品列表 */
  173. .wrap main .list {
  174.   margin: 20px 0;
  175.   display: grid;
  176.   grid-template-columns: repeat(3, 1fr);
  177.   grid-auto-rows: 172px;
  178.   gap: 10px;
  179. }
  180. .wrap main .list .item {
  181.   background-color: rgb(244, 239, 239);
  182.   border-radius: 6px;
  183.   display: grid;
  184.   grid-template-columns: 150px 1fr;
  185.   padding: 10px;
  186.   gap: 10px;
  187. }
  188. .wrap main .list .item img {
  189.   width: 100%;
  190.   border-radius: 6px;
  191. }
  192. .wrap main .list .item .detail {
  193.   display: grid;
  194.   grid-template-rows: 1fr 35px;
  195. }
  196. /* 媒体查询 */
  197. @media (max-width: 950px) {
  198.   .wrap header .entry .content {
  199.     grid-template-columns: 80px repeat(4, 1fr);
  200.   }
  201.   .wrap main .navs {
  202.     grid-template-columns: 1fr;
  203.   }
  204.   .wrap main .navs .cate {
  205.     display: none;
  206.   }
  207.   .wrap main .list {
  208.     grid-template-columns: repeat(2, 1fr);
  209.   }
  210. }

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

相关文章

查看更多