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

博客列表 >PC淘宝首页

PC淘宝首页

时间在渗透
时间在渗透原创
2022年11月01日 20:03:23353浏览

效果图

HTML

  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="static/css/taobao-pc.css">
  9. </head>
  10. <body>
  11.     <!-- 顶部导航栏 -->
  12.     <div class="topbar">
  13.         <div class="container">
  14.             <ul class="topbar-ul">
  15.                 <li class="dropdown topbar-item-region">
  16.                     <div class="dropdown-selected">
  17.                         <span>中国大陆</span>
  18.                         <span class="iconfont">&#xe7b2;</span>
  19.                     </div>
  20.                     <ul class="dropdown-list">
  21.                         <li>全球</li>
  22.                         <li>中国大陆</li>
  23.                         <li>中国香港</li>
  24.                         <li>中国台湾</li>
  25.                         <li>中国澳门</li>
  26.                         <li>韩国</li>
  27.                         <li>马来西亚</li>
  28.                         <li>澳大利亚</li>
  29.                         <li>新加波</li>
  30.                         <li>新西兰</li>
  31.                     </ul>
  32.                 </li>
  33.                 <li><a style="color: #f40;">亲,请先登录</a><a>免费注册</a></li>
  34.                 <li><a>手机淘宝</a></li>
  35.                 <li><a>网页无障碍</a></li>
  36.             </ul>
  37.             <ul class="topbar-ul">
  38.                 <li><a>我的淘宝</a></li>
  39.                 <li><a><i class="iconfont" style="color: #f40;">&#xe70b;</i> 购物车</a></li>
  40.                 <li><a>收藏夹</a></li>
  41.             </ul>
  42.         </div>
  43.     </div>
  45.     <!-- 快速入口 -->
  46.     <div class="entry">
  47.         <div class="container">
  48.             <div class="item place-text" place-text="图标"></div>
  49.             <div class="item place-text" place-text="类目1"></div>
  50.             <div class="item place-text" place-text="类目2"></div>
  51.             <div class="item place-text" place-text="类目3"></div>
  52.             <div class="item place-text" place-text="类目4"></div>
  53.             <div class="item place-text" place-text="类目5"></div>
  54.         </div>
  55.     </div>
  57.     <!-- 主体部分 -->
  58.     <div class="container main">
  59.         <!-- 头部 -->
  60.         <div class="header">
  61.             <div class="logo place-text" place-text="LOGO"></div>
  62.             <div class="search place-text" place-text="搜索框"></div>
  63.             <div class="qrcode place-text" place-text="二维码"></div>
  64.         </div>
  65.         <!-- 导航/轮播/用户信息 -->
  66.         <div class="screen">
  67.             <div class="screen-menu place-text" place-text="分类导航"></div>
  68.             <div class="screen-main">
  69.                 <div class="screen-nav place-text" place-text="快捷导航"></div>
  70.                 <div class="screen-slide place-text" place-text="轮播图"></div>
  71.                 <div class="screen-user place-text" place-text="用户信息"></div>
  72.             </div>
  73.         </div>
  74.         <!-- 商品列表 -->
  75.         <div class="list">
  76.             <div class="title">
  77.                 <h2>猜你喜欢</h2>
  78.                 <label>个性推荐</label>
  79.             </div>
  80.             <div class="list-row">
  81.                 <a class="item">
  82.                     <div class="pic place-text" place-text="封面图"></div>
  83.                     <div class="info">
  84.                         <div class="desc">
  85.                             <div class="info-title">商品描述商品描述商品描述商品描述</div>
  86.                             <div class="info-tag"><label class="tag-yfx">运送费险</label></div>
  87.                         </div>
  88.                         <div class="price"><em>¥</em> 59.9</div>
  89.                     </div>
  90.                 </a>
  91.                 <a class="item">
  92.                     <div class="pic place-text" place-text="封面图"></div>
  93.                     <div class="info">
  94.                         <div class="desc">
  95.                             <div class="info-title"><label class="tag-hot">HOT</label>商品描述商品描述商品描述商品描述</div>
  96.                             <div class="info-tag"><label class="tag-yfx">运送费险</label></div>
  97.                         </div>
  98.                         <div class="price"><em>¥</em> 59.9</div>
  99.                     </div>
  100.                 </a>
  101.                 <a class="item">
  102.                     <div class="pic place-text" place-text="封面图"></div>
  103.                     <div class="info">
  104.                         <div class="desc">
  105.                             <div class="info-title"><label class="tag-hot">天猫双11</label>商品描述商品描述商品描述商品描述</div>
  106.                             <div class="info-tag"><label class="tag-yfx">运送费险</label></div>
  107.                         </div>
  108.                         <div class="price"><em>¥</em> 59.9</div>
  109.                     </div>
  110.                 </a>
  111.                 <a class="item">
  112.                     <div class="pic place-text" place-text="封面图"></div>
  113.                     <div class="info">
  114.                         <div class="desc">
  115.                             <div class="info-title"><label class="tag-hot">HOT</label>商品描述商品描述商品描述商品描述</div>
  116.                         </div>
  117.                         <div class="price"><em>¥</em> 59.9</div>
  118.                     </div>
  119.                 </a>
  120.                 <a class="item">
  121.                     <div class="pic place-text" place-text="封面图"></div>
  122.                     <div class="info">
  123.                         <div class="desc">
  124.                             <div class="info-title">商品描述商品描述商品描述商品描述</div>
  125.                             <div class="info-tag"><label class="tag-yfx">运送费险</label></div>
  126.                         </div>
  127.                         <div class="price"><em>¥</em> 59.9</div>
  128.                     </div>
  129.                 </a>
  130.                 <a class="item">
  131.                     <div class="pic place-text" place-text="封面图"></div>
  132.                     <div class="info">
  133.                         <div class="desc">
  134.                             <div class="info-title"><label class="tag-hot">天猫双11</label>商品描述商品描述商品描述商品描述</div>
  135.                             <div class="info-tag"><label class="tag-yfx">运送费险</label></div>
  136.                         </div>
  137.                         <div class="price"><em>¥</em> 59.9</div>
  138.                     </div>
  139.                 </a>
  140.                 <a class="item">
  141.                     <div class="pic place-text" place-text="封面图"></div>
  142.                     <div class="info">
  143.                         <div class="desc">
  144.                             <div class="info-title"><label class="tag-hot">HOT</label>商品描述商品描述商品描述商品描述</div>
  145.                             <div class="info-tag"><label class="tag-yfx">运送费险</label></div>
  146.                         </div>
  147.                         <div class="price"><em>¥</em> 59.9</div>
  148.                     </div>
  149.                 </a>
  150.                 <a class="item">
  151.                     <div class="pic place-text" place-text="封面图"></div>
  152.                     <div class="info">
  153.                         <div class="desc">
  154.                             <div class="info-title"><label class="tag-hot">天猫双11</label>商品描述商品描述商品描述商品描述</div>
  155.                             <div class="info-tag"><label class="tag-yfx">运送费险</label></div>
  156.                         </div>
  157.                         <div class="price"><em>¥</em> 59.9</div>
  158.                     </div>
  159.                 </a>
  160.                 <a class="item">
  161.                     <div class="pic place-text" place-text="封面图"></div>
  162.                     <div class="info">
  163.                         <div class="desc">
  164.                             <div class="info-title"><label class="tag-hot">HOT</label>商品描述商品描述商品描述商品描述</div>
  165.                         </div>
  166.                         <div class="price"><em>¥</em> 59.9</div>
  167.                     </div>
  168.                 </a>
  169.             </div>
  170.         </div>
  171.     </div>
  172.     <div class="footer">
  173.         <div class="container">
  174.             <p style="text-align: center;">底部版权信息</p>
  175.         </div>
  176.     </div>
  177. </body>
  178. </html>

CSS

  1. /* 重置基础样式 */
  2. * {
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6. }
  8. body {
  9.     font-size: 14px;
  10.     color: #333;
  11.     background-color: #f6f6f6;
  12. }
  14. a {
  15.     color: #333;
  16.     cursor: pointer;
  17.     text-decoration: none;
  18. }
  20. a:hover {
  21.     color: #FF5000;
  22.     transition: all .3s;
  23. }
  25. li {
  26.     list-style: none;
  27. }
  29. img {
  30.     border: none;
  31.     width: 100%;
  32. }
  34. i,em,cite {
  35.     font-style: normal;
  36. }
  38. /* 占位文本 */
  39. .place-text {
  40.     position: relative;
  41. }
  42. .place-text:before{
  43.     position: absolute;
  44.     content: attr(place-text);
  45.     top: 50%;
  46.     left:50%;
  47.     transform: translate(-50%, -50%);
  48.     color: #bbb;
  49. }
  51. /* 全局容器宽度适应 */
  52. .container {
  53.     margin: 0 auto;
  54.     padding: 0 20px;
  55. }
  57. @media (min-width: 768px) {
  58.     .container {
  59.         width: 750px;
  60.     }
  61. }
  63. @media (min-width: 992px) {
  64.     .container {
  65.         width: 970px;
  66.     }
  67. }
  69. @media (min-width: 1200px) {
  70.     .container {
  71.         width: 1170px;
  72.     }
  73. }
  75. /* 图标字体 */
  76. @font-face {
  77.     font-family: 'iconfont';  /* Project id 3738571 */
  78.     src: url('https://at.alicdn.com/t/c/font_3738571_w9b16dc3ye.woff2?t=1667204474667') format('woff2'),
  79.          url('https://at.alicdn.com/t/c/font_3738571_w9b16dc3ye.woff?t=1667204474667') format('woff'),
  80.          url('https://at.alicdn.com/t/c/font_3738571_w9b16dc3ye.ttf?t=1667204474667') format('truetype');
  81. }
  83. .iconfont {
  84.     font-family: 'iconfont' !important;
  85.     font-size: 16px;
  86.     font-style: normal;
  87. }
  89. /* 顶部栏 */
  90. .topbar {
  91.     height: 35px;
  92.     background-color: #f5f5f5;
  93.     border-bottom: 1px solid #eee;
  94. }
  95. .topbar>.container {
  96.     display: flex;
  97.     flex-flow: row nowrap;
  98.     place-content: space-between;
  99. }
  100. .topbar .topbar-ul>li{
  101.     display: inline-block;
  102.     line-height: 35px;
  103.     font-size: 12px;
  104. }
  105. .topbar .topbar-ul>li+li {
  106.     margin-left: 10px;
  107. }
  108. .topbar .topbar-ul>li .iconfont {
  109.     font-size: 12px;
  110. }
  112. .topbar .topbar-ul>li>a+a {
  113.     margin-left: 8px;
  114. }
  116. /* 下拉菜单 */
  117. .dropdown {
  118.     position: relative;
  119.     z-index: 9;
  120. }
  121. /* 下拉默认选中展示的文字 */
  122. .dropdown-selected {
  123.     position: relative;
  124.     padding: 0 20px 0 6px;
  125.     cursor: pointer;
  126. }
  127. /* 下拉右侧小箭头 */
  128. .dropdown-selected .iconfont {
  129.     position: absolute;
  130.     right: 0;
  131.     font-size: 12px;
  132. }
  133. /* 下拉菜单列表 */
  134. ul.dropdown-list {
  135.     display: none;
  136.     position: absolute;
  137.     top: 35px;
  138.     left: 0;
  139.     background-color: #fff;
  140.     padding: 8px 0;
  141.     height: 240px;
  142.     overflow-x: hidden;
  143. }
  144. ul.dropdown-list>li {
  145.     cursor: pointer;
  146.     width: 150px;
  147.     line-height: 28px;
  148.     padding: 0 6px;
  149. }
  150. ul.dropdown-list>li:hover {
  151.     background-color: #f4f4f4;
  152. }
  154. /* 当鼠标碰到高亮背景色 */
  155. .dropdown:hover .dropdown-selected {
  156.     background-color: #fff;
  157. }
  158. .dropdown:hover ul.dropdown-list{
  159.     display: block;
  160. }
  162. /*快速入口*/
  163. .entry {
  164.     background-color: #ff72b5;
  165.     padding: 15px 0;
  166.     height: 100px;
  167. }
  169. .entry>.container {
  170.     display: grid;
  171.     grid-template-columns: 100px repeat(5, 1fr);
  172.     grid-auto-rows:70px;
  173.     gap: 10px;
  175. }
  176. .entry .item {
  177.     border-radius:10px;
  178.     background-color: #fff;
  179. }
  180. /* 主体 */
  181. .main {
  182.     background-color: #fff;
  183.     padding:30px;
  184.     margin-bottom: 20px;
  185. }
  187. /*头部区*/
  188. .header {
  189.     /*粘性定位*/
  190.     position: static;
  191.     top: 0;
  192.     display: grid;
  193.     grid-template-columns: 200px 12fr 90px;
  194.     height: 90px;
  195.     gap: 30px;
  196.     margin-bottom: 20px;
  197. }
  198. .header>* {
  199.     background-color: #eee;
  200.     text-align: center;
  201.     line-height: 90px;
  202. }
  204. /* 导航/轮播/用户信息 */
  205. .screen {
  206.     display: grid;
  207.     grid-template-columns: 270px 1fr;
  208.     gap: 15px;
  209.     height: 360px;
  210.     margin-bottom: 20px;
  211. }
  212. .screen-menu,
  213. .screen-main > .screen-nav,
  214. .screen-main > .screen-slide,
  215. .screen-main > .screen-user{
  216.     background-color: #eee;
  217.     border-radius: 10px;
  218. }
  220. .screen-main {
  221.     display: grid;
  222.     grid-template-columns: 1.5fr 1fr;
  223.     grid-template-rows: 40px 1fr;
  224.     gap: 10px;
  225. }
  226. .screen-nav {
  227.     grid-column: span 2;
  228. }
  230. /* 列表标题栏 */
  231. .title {
  232.     display: flex;
  233.     place-items: center;
  234.     margin-bottom: 20px;
  235. }
  236. .title>h2 {
  237.     color: #000;
  238.     font-weight: bold;
  239.     font-size: 24px;
  240. }
  241. .title>label {
  242.     background: linear-gradient(to left, orangered, orange);
  243.     color: #fff;
  244.     border-radius: 5px;
  245.     padding: 0 5px;
  246.     margin-left: 6px;
  247. }
  249. /* 商品列表 */
  250. .list-row {
  251.     display: grid;
  252.     grid-template-columns: repeat(3, 1fr);
  253.     grid-auto-rows: 175px;
  254.     gap: 15px;
  255. }
  257. .list-row > .item {
  258.     display: grid;
  259.     grid-template-columns: 150px 1fr;
  260.     gap: 10px;
  261.     background-color: #f7f9fa;
  262.     border: 1px solid #f7f9fa;
  263.     border-radius: 10px;
  264.     padding: 10px;
  265. }
  266. .list-row > .item:hover {
  267.     background-color: #fff;
  268.     border-color: #ff915e;
  269.     box-shadow: 0 8px 12px 0 rgb(255 80 0 / 6%);
  270. }
  272. .list-row > .item > .pic {
  273.     background-color: rgb(0 0 0 / 6%);
  274.     border-radius: 5px;
  275. }
  276. .list-row > .item > .pic > img {
  277.     width: 100%;
  278.     border-radius: 5px;
  279. }
  281. .list-row > .item > .info {
  282.     display: grid;
  283.     grid-template-rows: 1fr 25px;
  284.     place-content: space-between;
  285.     line-height: 1.5;
  286.     padding: 10px 0;
  287. }
  289. .list-row > .item .info-title {
  290.     color: #333;
  291.     font-size: 16px;
  292.     overflow: hidden;
  293.     max-height: 46px;
  294. }
  296. .list-row >.item .price {
  297.     font-size: 22px;
  298.     color: #ff5000;
  299. }
  301. .list-row > .item .tag-hot {
  302.     background: linear-gradient(to left, orangered, orange);
  303.     color: #fff;
  304.     border-radius: 3px;
  305.     padding: 0 5px;
  306.     margin-right: 6px;
  307.     font-size: 12px;
  308. }
  310. .list-row > .item .tag-yfx {
  311.     color: #FF5000;
  312.     border: 1px solid #FAB596;
  313.     background: #fff;
  314.     border-radius: 3px;
  315.     padding: 0 5px;
  316.     margin-right: 6px;
  317.     font-size: 12px;
  318. }
  320. .footer {
  321.     padding: 20px 0;
  322.     background-color: #fff;
  323. }
  324. @media (max-width: 1200px) {
  325.     .list-row > .item {
  326.         grid-template-columns: 120px 1fr;
  327.     }
  328. }
  330. @media (max-width: 992px) {
  331.     .entry>.container {
  332.         grid-template-columns: 100px repeat(4, 1fr);
  333.     }
  334.     .entry .item:last-of-type {
  335.         display: none;
  336.     }
  337.     .screen {
  338.         grid-template-columns: 1fr;
  339.     }
  340.     .screen-menu {
  341.         display: none;
  342.     }
  344.     .list-row {
  345.         grid-template-columns: repeat(2, 1fr);
  346.     }
  347. }
上一条：实例演示php数组常用api下一条：淘宝PC端框架
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多