简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > PC淘宝首页
Blogger Information
Blog 18
fans 0
comment 0
visits 8457
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
PC淘宝首页
时间在渗透
Original
354 people have browsed it

效果图

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. }
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：整体效果完成的不错, 很好
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！