Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Flex布局京东首页实例
Blogger Information
Blog 41
fans 0
comment 0
visits 31024
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
Flex布局京东首页实例
陈强
Original
2134 people have browsed it

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>多快好省，购物上京东！</title>
  7.     <link rel="stylesheet" href="static/css/index.css" />
  8.   </head>
  9.   <body>
  10.     <!-- 页眉 -->
  11.     <div class="header">
  12.       <div class="iconfont iconcaidan"></div>
  13.       <div class="seach">
  14.         <div class="logo">JD</div>
  15.         <div class="iconfont iconsousuo"></div>
  16.         <input type="text" value="电动自行车" placeholder="电动自行车" />
  17.       </div>
  18.       <div class="login">登录</div>
  19.     </div>
  20.     <!-- 主体 -->
  21.     <div class="main">
  22.       <!-- 焦点图 -->
  23.       <div class="slider">
  24.         <div class="slider-bg">
  25.           <ul class="sider">
  26.             <li>
  27.               <a href="">
  28.                 <img src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/154662/24/11113/193179/5fe2aea3E5a1bb49c/b10e96a51b391ddb.jpg!q70.jpg.dpg" alt="" />
  29.               </a>
  30.             </li>
  31.           </ul>
  32.         </div>
  33.       </div>
  34.       <!-- 广告图片区 -->
  35.       <div class="pic-show">
  36.         <ul>
  37.           <li>
  38.             <a href=""><img src="//m.360buyimg.com/mobilecms/s250x200_jfs/t1/148312/2/19741/139129/5fe2abf3Edf1a8c4a/d07d3d32f176c8fa.png!q70.jpg.dpg" alt="" /></a>
  39.           </li>
  40.           <li>
  41.             <a href=""><img src="//m.360buyimg.com/mobilecms/s250x200_jfs/t1/155382/3/11229/182534/5fe2c369E8b997217/f6f43af1ebc3f20a.png!q70.jpg.dpg" alt="" /></a>
  42.           </li>
  43.           <li>
  44.             <a href=""><img src="//m.360buyimg.com/mobilecms/s250x200_jfs/t1/152683/19/11128/146174/5fe2ac31E5bc0a01c/ebf23703903f51f8.png!q70.jpg.dpg" alt="" /></a>
  45.           </li>
  46.         </ul>
  47.       </div>
  48.       <!-- 导航区 -->
  49.       <div class="nav">
  50.         <ul>
  51.           <li>
  52.             <a href=""><img src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png" alt="" /><span>京东超市</span></a>
  53.           </li>
  54.           <li>
  55.             <a href=""><img src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/135931/4/3281/5598/5efbf2c0Edbdc82c7/ed9861b4ddfb9f30.png" alt="" /><span>数码电器</span></a>
  56.           </li>
  57.           <li>
  58.             <a href=""><img src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/140012/8/1804/3641/5efbf318E38bd5dad/0db99d859ab16ce9.png" alt="" /><span>京东服饰</span></a>
  59.           </li>
  60.           <li>
  61.             <a href=""><img src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/129215/21/5978/3618/5efbf344Ebec23ae8/59712d986b10bb0a.png" alt="" /><span>京东生鲜</span></a>
  62.           </li>
  63.           <li>
  64.             <a href=""><img src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/116602/7/11200/3796/5efbf375Ebba41029/f07cc166f368fa05.png" alt="" /><span>京东到家</span></a>
  65.           </li>
  66.           <li>
  67.             <a href=""><img src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/146390/3/1846/4909/5efbf39aEe5f5f797/300071558a9ab078.png" alt="" /><span>充值缴费</span></a>
  68.           </li>
  69.           <li>
  70.             <a href=""><img src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/143365/25/1824/3716/5efbf3c0E5175e1fb/88f6227257a29f1d.png" alt="" /><span>9.9元拼</span></a>
  71.           </li>
  72.           <li>
  73.             <a href=""><img src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/113589/24/11332/4897/5efbf3feE705d87db/e5c12d5e943266b9.png" alt="" /><span>领券</span></a>
  74.           </li>
  75.           <li>
  76.             <a href=""><img src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/129184/28/5977/3711/5efbf53aE2c2e6a07/7db529ce0e00838f.png" alt="" /><span>借钱</span></a>
  77.           </li>
  78.           <li>
  79.             <a href=""><img src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/123730/37/5924/4189/5efbf567E0a226121/d04df7c74c87cf68.png" alt="" /><span>PLUS会员</span></a>
  80.           </li>
  81.         </ul>
  82.       </div>
  83.       <!-- 秒杀区 -->
  84.       <div class="skill">
  85.         <div class="skill-top">
  86.           <div class="skill-title">京东秒杀</div>
  87.           <div class="skill-time">
  88.             <span class="hour">10</span><span class="down"><span>03</span>:<span>16</span>:<span>42</span></span>
  89.           </div>
  90.           <div class="skill-more">更多秒杀<span class="iconfont iconjiantou"></span></div>
  91.         </div>
  92.         <div class="skill-body">
  93.           <ul>
  94.             <li>
  95.               <div class="skill-item">
  96.                 <a href="">
  97.                   <img src="//img11.360buyimg.com/n7/s150x150_jfs/t1/146496/37/18362/169007/5fd749c2E8725f4a1/dcd59d4db7f801be.jpg.dpg" alt="" />
  98.                 </a>
  99.               </div>
  100.               <div class="price">
  101.                 <span><i class="iconfont iconfl-renminbi"></i>88</span>
  102.                 <span class="del"><i class="iconfont iconfl-renminbi"></i>128</span>
  103.               </div>
  104.             </li>
  105.             <li>
  106.               <div class="skill-item">
  107.                 <a href="">
  108.                   <img src="//img11.360buyimg.com/n7/s150x150_jfs/t1/156342/25/381/66926/5fd734c3E62a10669/fe4b624481f5f378.jpg.dpg" alt="" />
  109.                 </a>
  110.               </div>
  111.               <div class="price">
  112.                 <span><i class="iconfont iconfl-renminbi"></i>88</span>
  113.                 <span class="del"><i class="iconfont iconfl-renminbi"></i>128</span>
  114.               </div>
  115.             </li>
  116.             <li>
  117.               <div class="skill-item">
  118.                 <a href="">
  119.                   <img src="//img11.360buyimg.com/n7/s150x150_jfs/t1/150457/28/12176/202350/5fe32c96E48a90b2a/3e6bf45d55db076c.jpg.dpg" alt="" />
  120.                 </a>
  121.               </div>
  122.               <div class="price">
  123.                 <span><i class="iconfont iconfl-renminbi"></i>88</span>
  124.                 <span class="del"><i class="iconfont iconfl-renminbi"></i>128</span>
  125.               </div>
  126.             </li>
  127.             <li>
  128.               <div class="skill-item">
  129.                 <a href="">
  130.                   <img src="//img11.360buyimg.com/n7/s150x150_jfs/t1/150809/29/11742/200367/5fe19c8bEadb73d3f/d0ed173b404cc1cd.jpg.dpg" alt="" />
  131.                 </a>
  132.               </div>
  133.               <div class="price">
  134.                 <span><i class="iconfont iconfl-renminbi"></i>88</span>
  135.                 <span class="del"><i class="iconfont iconfl-renminbi"></i>128</span>
  136.               </div>
  137.             </li>
  138.             <li>
  139.               <div class="skill-item">
  140.                 <a href="">
  141.                   <img src="//img11.360buyimg.com/n7/s150x150_jfs/t1/133479/30/19342/194911/5fd2e023E9090a297/df4e8bd9e2c53bd3.jpg.dpg" alt="" />
  142.                 </a>
  143.               </div>
  144.               <div class="price">
  145.                 <span><i class="iconfont iconfl-renminbi"></i>88</span>
  146.                 <span class="del"><i class="iconfont iconfl-renminbi"></i>128</span>
  147.               </div>
  148.             </li>
  149.             <li>
  150.               <div class="skill-item">
  151.                 <a href="">
  152.                   <img src="//img11.360buyimg.com/n7/s150x150_jfs/t1/145840/16/18195/189967/5fd34631E1672e66d/6d324f1030c3c4af.jpg.dpg" alt="" />
  153.                 </a>
  154.               </div>
  155.               <div class="price">
  156.                 <span><i class="iconfont iconfl-renminbi"></i>88</span>
  157.                 <span class="del"><i class="iconfont iconfl-renminbi"></i>128</span>
  158.               </div>
  159.             </li>
  160.           </ul>
  161.         </div>
  162.       </div>
  163.       <!-- 猜你喜欢 -->
  164.       <div class="lover">
  165.         <div class="lover-title"><img src="//img12.360buyimg.com/img/s750x70_jfs/t1/148857/1/16777/13220/5fc9f9d0E734c0ee5/88c99cdbe410e58a.png" alt="" /></div>
  166.         <div class="lover-body">
  167.           <ul>
  168.             <li>
  169.               <div class="top">
  170.                 <a href="">
  171.                   <img src="//img12.360buyimg.com/mobilecms/s372x372_jfs/t1/152707/30/10821/132841/5fe1646dE41aae9a1/caa0ea2387e6aad4.jpg!q70.dpg.webp" alt="" />
  172.                 </a>
  173.                 <p>九阳（Joyoung）电火锅 旋控分体磁炉 IH电磁加热电磁灶 多功能火锅炉 大容量家用电火锅HG5 橙色</p>
  174.               </div>
  175.               <div class="info">
  176.                 <span class="price"><i class="iconfont iconfl-renminbi"></i>399</span>
  177.                 <span class="tag">满减</span>
  178.                 <span class="like">看相似</span>
  179.               </div>
  180.             </li>
  181.             <li>
  182.               <div class="top">
  183.                 <a href="">
  184.                   <img src="//img13.360buyimg.com/mobilecms/s372x372_jfs/t1/145943/5/18240/178944/5fd45e7eEc34aa68a/0f7bfb7509d177b7.jpg!q70.dpg.webp" alt="" />
  185.                 </a>
  186.                 <p>九阳 Joyoung 电火锅 家用多功能电炒锅 麦饭石色不粘电煮锅 电热锅 5L大容量 HG50-G512</p>
  187.               </div>
  188.               <div class="info">
  189.                 <span class="price"><i class="iconfont iconfl-renminbi"></i>149</span>
  190.                 <span></span>
  191.                 <span class="like">看相似</span>
  192.               </div>
  193.             </li>
  194.             <li>
  195.               <div class="top">
  196.                 <a href="">
  197.                   <img src="//img12.360buyimg.com/mobilecms/s372x372_jfs/t1/152707/30/10821/132841/5fe1646dE41aae9a1/caa0ea2387e6aad4.jpg!q70.dpg.webp" alt="" />
  198.                 </a>
  199.                 <p>九阳（Joyoung）电火锅 旋控分体磁炉 IH电磁加热电磁灶 多功能火锅炉 大容量家用电火锅HG5 橙色</p>
  200.               </div>
  201.               <div class="info">
  202.                 <span class="price"><i class="iconfont iconfl-renminbi"></i>399</span>
  203.                 <span class="tag">满减</span>
  204.                 <span class="like">看相似</span>
  205.               </div>
  206.             </li>
  207.             <li>
  208.               <div class="top">
  209.                 <a href="">
  210.                   <img src="//img13.360buyimg.com/mobilecms/s372x372_jfs/t1/145943/5/18240/178944/5fd45e7eEc34aa68a/0f7bfb7509d177b7.jpg!q70.dpg.webp" alt="" />
  211.                 </a>
  212.                 <p>九阳 Joyoung 电火锅 家用多功能电炒锅 麦饭石色不粘电煮锅 电热锅 5L大容量 HG50-G512</p>
  213.               </div>
  214.               <div class="info">
  215.                 <span class="price"><i class="iconfont iconfl-renminbi"></i>399</span>
  216.                 <span class="tag">满减</span>
  217.                 <span class="like">看相似</span>
  218.               </div>
  219.             </li>
  220.             <li>
  221.               <div class="top">
  222.                 <a href="">
  223.                   <img src="//img12.360buyimg.com/mobilecms/s372x372_jfs/t1/152707/30/10821/132841/5fe1646dE41aae9a1/caa0ea2387e6aad4.jpg!q70.dpg.webp" alt="" />
  224.                 </a>
  225.                 <p>九阳（Joyoung）电火锅 旋控分体磁炉 IH电磁加热电磁灶 多功能火锅炉 大容量家用电火锅HG5 橙色</p>
  226.               </div>
  227.               <div class="info">
  228.                 <span class="price"><i class="iconfont iconfl-renminbi"></i>399</span>
  229.                 <span class="tag">满减</span>
  230.                 <span class="like">看相似</span>
  231.               </div>
  232.             </li>
  233.             <li>
  234.               <div class="top">
  235.                 <a href="">
  236.                   <img src="//img12.360buyimg.com/mobilecms/s372x372_jfs/t1/152707/30/10821/132841/5fe1646dE41aae9a1/caa0ea2387e6aad4.jpg!q70.dpg.webp" alt="" />
  237.                 </a>
  238.                 <p>九阳（Joyoung）电火锅 旋控分体磁炉 IH电磁加热电磁灶 多功能火锅炉 大容量家用电火锅HG5 橙色</p>
  239.               </div>
  240.               <div class="info">
  241.                 <span class="price"><i class="iconfont iconfl-renminbi"></i>399</span>
  242.                 <span class="tag">满减</span>
  243.                 <span class="like">看相似</span>
  244.               </div>
  245.             </li>
  246.           </ul>
  247.         </div>
  248.       </div>
  249.     </div>
  250.     <!-- 页脚 -->
  251.     <div class="footer">
  252.       <div>
  253.         <img src="https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/81741/30/12345/4140/5d9c4b13E726f0a1e/82c582e7c375e4b3.png" alt="" />
  254.         <!-- <span>首页</span> -->
  255.       </div>
  256.       <div>
  257.         <img src="https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/56507/6/12787/3168/5d9c4b12Ef363dd8d/4af32f42575509d8.png" alt="" />
  258.         <!-- <span>分类</span> -->
  259.       </div>
  260.       <div>
  261.         <img src="https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/70651/38/12417/3194/5d9d3eafE12cde68b/2467c20113c50451.png" alt="" />
  262.         <!-- <span>竟喜</span> -->
  263.       </div>
  264.       <div>
  265.         <img src="https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/64954/4/12406/3529/5d9c4b12Ee7a82735/f2fe0a88bf344736.png" alt="" />
  266.         <!-- <span>购物车</span> -->
  267.       </div>
  268.       <div>
  269.         <img src="https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/68400/36/12368/3153/5d9c4b13E0e0d80a8/876c40f17d91ce44.png" alt="" />
  270.         <!-- <span>未登录</span> -->
  271.       </div>
  272.     </div>
  273.   </body>
  274. </html>

CSS

  • 初始化css

引用了iconfont字体

  1. @media screen and (max-winth: 640px) {
  2.   html {
  3.     font-size: 12px;
  4.   }
  5. }
  7. @media screen and (max-winth: 7600px) {
  8.   html {
  9.     font-size: 14px;
  10.   }
  11. }
  12. @font-face {
  13.   font-family: "iconfont";
  14.   src: url("//at.alicdn.com/t/font_2290161_6fyblk27etu.eot?t=1608796202210"); /* IE9 */
  15.   src: url("//at.alicdn.com/t/font_2290161_6fyblk27etu.eot?t=1608796202210#iefix") format("embedded-opentype"),
  16.     /* IE6-IE8 */
  17.       url("data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAO8AAsAAAAACBAAAANwAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqDJIMLATYCJAMUCwwABCAFhG0HURsgB8gekqSHgQRq4SABqjMIEXy/9+eeWz6P0oti0K1IFAqNQuFKSvOJVIky0V0nivLz6+rN/DXyGVGuax6Z5AgqKwGMULym/V8bJqUsFDSSTJNYPNmJjbfbxxIh4imRMv9zzHQJPsy/trlElkUl7Q1wlEAD6rgssjuQO1G+B3iGgWq6cD2BDjP8YcdJ81WioAgWBeIm3dYShZZemckMjdAa2VkgvkDVpCb8APic/3z8he2ggKRmCFZeXA/MRPtH+Gs9qvx/5ypFgOA4K7R9ZGwBhbgdtd9Il8EtSIfzdxn7Ejo0kvQj/Hn1pe21/v8FV/xAyo7wHx4hyQrRgiC9C+yTrLw4Qcwi+LHKIvGzjUXmV73wh0mvoAPDdxK+MnbKFnLom+xicErASRN5D7sydIg1HcEyOp6moV+G0HuVSuN/pbi+Vl5eyi8uDJFUVnCb515dlSu+vWJx57hQ/ukSCNomyHy8wsgqfxDKZZua5fJVMrq8vVIge0/09IqVm286ajIEvznxHIvb0GzEtDXWmq24Lc1Dpg89c+/373hnYOrxBy/qbvzgAHWjnoP97oxDGtSDIw4Outsr8NlZvCLEzc5UIA7x64fO0gtF9us+Wx/fEZuGJzfTEdYtgZuPHr23X44wl2PWCD8/hDXmMDepqWN2h9DVFULJEHNRzM84Pca2W29d9nZaJmu/zzvHCkYLJlO+BRzB6tyXbsHLCcpGQeBlE4XKmD/1d3z6//RrZEf8a+gEgO+0dN+86KWyQH4H/hkFseAvFAibiisKDLXY9THfnlZtQCBpHR3449wDno5RDov9hKYl0CBpMw1ZYwlZsFtQddqBlsYedNiUvL/ToAJpUajAhjqA0GcRkh7fIOtziCzYR6hGfEFLXyDocBn8EzutRDotvgA1QRMsF0g3KLIik5SKzAXaKtC4KcrxG+TY9UBIYHA3MsII+Yg1hUe7WSQWOJhCSIKbYRAQ5DF5aEg1TeTQCgpyjH1R1UphouQIQxqBTMDiAqQzkIiVthel3vcvIJsS0PBMQ4d9A7GYOzwIEShYgBzJI1HDW3lJoSNbUxFhAQ6MhEASWFEQBgnIG5/mQQZRlbbBf9ASRK0cUnn18srwOx6ADsH71cAxhBEwIkaCzuusSgFGoRvpbq4wV8WKclaza2pRPiM9CQipRAI=")
  18.       format("woff2"),
  19.     url("//at.alicdn.com/t/font_2290161_6fyblk27etu.woff?t=1608796202210") format("woff"), url("//at.alicdn.com/t/font_2290161_6fyblk27etu.ttf?t=1608796202210") format("truetype"), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url("//at.alicdn.com/t/font_2290161_6fyblk27etu.svg?t=1608796202210#iconfont") format("svg"); /* iOS 4.1- */
  20. }
  22. .iconfont {
  23.   font-family: "iconfont" !important;
  24.   font-size: 16px;
  25.   font-style: normal;
  26.   -webkit-font-smoothing: antialiased;
  27.   -moz-osx-font-smoothing: grayscale;
  28. }
  30. .iconfl-renminbi:before {
  31.   content: "\e634";
  32. }
  34. .iconsousuo:before {
  35.   content: "\e6b3";
  36. }
  38. .iconcaidan:before {
  39.   content: "\e794";
  40. }
  42. .iconjiantou:before {
  43.   content: "\e886";
  44. }
  45. * {
  46.   margin: 0;
  47.   padding: 0;
  48.   box-sizing: border-box;
  49. }
  50. html {
  51.   font-size: 10px;
  52. }
  53. body {
  54.   font-family: 微软雅黑;
  55. }
  56. ul,
  57. li {
  58.   list-style: none;
  59. }
  60. a:link,
  61. a:hover,
  62. a:visited {
  63.   display: block;
  64.   text-decoration: none;
  65.   color: #666;
  66. }
  67. img {
  68.   width: 100%;
  69. }
  • 页眉样式表 header css

在header.css文件中引入初始化reset.css文件

  1. @import "reset.css";
  2. .header {
  3.   background-color: #c82519;
  4.   position: sticky;
  5.   top: 0;
  6.   left: 0;
  7.   right: 0;
  8.   display: flex;
  9.   z-index: 99;
  10. }
  11. .header .iconfont {
  12.   color: #fff;
  13.   display: flex;
  14.   flex: 1;
  15.   align-items: center;
  16.   justify-content: center;
  17. }
  18. .iconcaidan:before {
  19.   font-size: 1.2em;
  20. }
  21. .header .seach {
  22.   display: flex;
  23.   background-color: #fff;
  24.   flex: 6;
  25.   border-radius: 10em;
  26.   margin: 1em 0;
  27.   padding: 0.4em 0;
  28.   overflow: hidden;
  29.   align-items: center;
  30. }
  31. .header .seach .logo {
  32.   color: #e43130;
  33.   margin-left: 1em;
  34.   font-size: 1.8em;
  35. }
  36. .header .seach input {
  37.   width: 100%;
  38.   border: 0;
  39.   outline: 0;
  40.   color: #666;
  41.   padding-left: 0.3em;
  42.   font-size: 1.3em;
  43. }
  44. .iconsousuo:before {
  45.   color: #ccc;
  46.   border-left: 1px solid #ccc;
  47.   margin-left: 0.2em;
  48.   padding-left: 0.2em;
  49.   font-size: 1.2em;
  50. }
  51. .header .login {
  52.   display: flex;
  53.   flex: 1;
  54.   color: #fff;
  55.   font-size: 1.6em;
  56.   align-items: center;
  57.   justify-content: center;
  58. }
  • 页脚样式表 footer.css
  1. .footer {
  2.   background-color: #fff;
  3.   position: fixed;
  4.   bottom: 0;
  5.   left: 0;
  6.   right: 0;
  7.   box-shadow: 0 0 10px 0 hsla(0, 6%, 58%, 0.6);
  8.   display: flex;
  9.   justify-content: space-around;
  10. }
  11. .footer > div {
  12.   width: 20%;
  13. }
  14. .footer > div img {
  15.   width: 100%;
  16. }
  • 首页样式表 index.css

在首页样式表中引入页眉、页脚样式表

  1. @import "header.css";
  2. @import "footer.css";
  4. .main {
  5.   padding-bottom: 5em;
  6.   background-color: #f6f6f6;
  7. }
  8. /* 焦点图 */
  9. .main .slider {
  10.   height: 15em;
  11.   margin: 0;
  12.   padding: 0;
  13.   position: relative;
  14.   min-height: 0;
  15. }
  16. .main .slider-bg {
  17.   background-image: linear-gradient(0deg, #f1503b, #c82519 50%);
  18.   height: 13em;
  19.   width: 100%;
  20.   border-bottom-left-radius: 100%;
  21.   border-bottom-right-radius: 100%;
  22. }
  23. .main .sider img {
  24.   padding: 0.3em 0.5em;
  25.   border-radius: 2em;
  26. }
  28. /* 广告图区 */
  29. .main .pic-show {
  30.   height: 10em;
  31.   background-color: #fff;
  32. }
  34. .main .pic-show ul {
  35.   display: flex;
  36. }
  38. /* 导航区 */
  39. .main .nav {
  40.   padding: 0.2em;
  41. }
  42. .main .nav ul {
  43.   display: flex;
  44.   flex-flow: row wrap;
  45. }
  46. .main .nav li {
  47.   width: 20%;
  48.   text-align: center;
  49.   padding: 1.2em;
  50. }
  52. /* 秒杀区 */
  53. .skill {
  54.   background-color: #fff;
  55.   margin: 1rem;
  56.   border-radius: 1rem;
  57. }
  58. .skill .skill-top {
  59.   padding: 1em;
  60.   display: flex;
  61.   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABYwAAACQBAMAAABZrTKvAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAYUExURUdwTO0QEO0QEO0WFuoNDe0SEuwREewREYfJP0kAAAAIdFJOUwB9ZA+zIzZPcd7tbgAAA/BJREFUeNrt3TGP41QUBtDZtRbaTVig3SxIaS0sQz1oEO0uwaaFIk4LAeK/j+1kMg6FBynzZnPDOfVUnz5dX9vPmZubSW/uHtzeQEjjGt+Jg5ju1Bg1hgtbKuzGqDF8LH+NavyjOIjp51GNfxAHMb0Y1fi1OIjp1ajG78VBUF8fW/y9MIi/VdgpCCu7f+R2mwuDsF4eavxWFAT2YWjx54IgtF/e3N3+LQYAAAAAAACeyKvtYr58Lwci+242+FMSxPXJ7OBXWRBVtriv8TyXBkF9Mzv6ShpEH8Yd45iYXo5aPHsrD0L6bVzjL+RByJ1idsJWQUSfntb4d4kQ0IvTGr+WCAF9OK2xD3uJ6I/TGn8pEQJanNZ4LhHUGD6G2b9IBDUGSwWoMf9XHrhxBbz+4Ap4Gc0VcDSIK+CgJtfAsXmugI+YuIatYvTk2Bf+RPXTQ40/kwbhx7FhTFx+/Ipr4KcIuQZ+GBYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACC3PZEBwWZYVekz0FhedPJcEkRVFtVoVciB4izvGMbF3iqqq667HoiBwjYuqbtbrqtBjAu8UZdX0PV5ZKgg8jcu6bppm7SaP6DtF023HakzgpaLqh7FpTOhpnPWrcdOYxsS+xRuWim4au8cj8lIxTGNLBRe9NRSTB3+y4YFbXa0MYy532A7yqT+o6nX/+kONudwW7980F1Nbxf5PnNXkQuX7x2mTszY/HA2S1nlJO1uVbhiXdbNp28mnwt3uXJaFYXxeiXsiTJRuWW/a5bZtd+uJO7jske2ZR2+jD6ubENPEWzXtu17bTLzdyLse+xrvrBaXjqWkjLdut0ONl+1axAkvetWwulV6nKTG5WEY9+N4Yqu4MYrPuwPpLnrLtp285HFGvJvtocbLXWVxSzYt9he9/pIn5AQ1ru+HcTeObRXparw53IHsVmr89Mp6e6zxcr0SSOKLnktemho3oxo3apxsWhzvQMyKJBe7UY13KzdyqaeFWZGmxvt05/sau+ClnhZdyPJ48ny/3bx7oMZqHHkaz+8TVuPk00LISfI9jImFhNNP47lZ8Sy3eBJ5hqVCjZPdQs/dRNuN49fY64/0MS88cEs1JrL+ufzCy+jUNR69/hDy03M06HnGxT7mhZBTbW37g5rzxw5qcta0GB0NMo1TBFxvHo7Nq3GyaXE8qGlWpMi32yr+w0dMnL28Ne1269h8wruPTdsul9OflHL2OK6a3fARkyyS5Ntd75p2+MBfi5Nux4dPSh0iTLVW9D9e3PjPHqljrtY+8E84JwT8PJe9ovSzQUkHRRewWZy+x7kWpx3ImY0N4BIueCIAALgE/wB5Hy4N/5rMxgAAAABJRU5ErkJggg==)
  62.     no-repeat;
  63.   background-size: 100%;
  64. }
  65. .skill .skill-body ul {
  66.   display: flex;
  67.   justify-content: space-around;
  68. }
  69. .skill .skill-top .skill-title {
  70.   flex: 1;
  71.   font-size: 1.4em;
  72. }
  73. .skill .skill-top .skill-time {
  74.   flex: 3;
  75. }
  76. .skill .skill-top .skill-time .hour {
  77.   color: #f23030;
  78.   font-size: 1.3em;
  79.   padding-right: 0.5em;
  80. }
  81. .skill .skill-top .skill-time .down {
  82.   color: #f23030;
  83.   font-size: 1.2em;
  84. }
  85. .skill .skill-top .skill-time .down span {
  86.   background-color: #f23030;
  87.   font-size: 0.85em;
  88.   color: #fff;
  89.   border-radius: 0.4em;
  90.   padding: 0.2em;
  91. }
  92. .skill .skill-top .skill-time .hour:after {
  93.   height: 2.025rem;
  94.   width: 2.525rem;
  95.   content: "";
  96.   display: inline-block;
  97.   vertical-align: middle;
  98.   background-image: url(//wq.360buyimg.com/wxsq_project/portal/m_jd_index/images/seckill-time-to_1de70c91.png);
  99.   background-repeat: no-repeat;
  100.   background-position: 50%;
  101.   background-size: contain;
  102.   font-size: 1.3em;
  103. }
  104. .skill .skill-top .skill-more {
  105.   flex: 1;
  106.   text-align: right;
  107.   display: flex;
  108.   align-items: center;
  109.   justify-content: flex-end;
  110.   color: #f23030;
  111. }
  112. .iconjiantou:before {
  113.   background-color: #fff;
  114.   color: #f23030;
  115.   border-radius: 100%;
  116.   border: 0;
  117. }
  118. .skill .skill-body ul {
  119.   padding: 1em;
  120.   text-align: center;
  121. }
  122. .skill .skill-body li {
  123.   display: flex;
  124.   flex-flow: column nowrap;
  125. }
  126. .skill .skill-body .price {
  127.   display: flex;
  128.   flex-flow: column nowrap;
  129. }
  130. .skill .skill-body span {
  131.   color: #f23030;
  132.   line-height: 1;
  133. }
  134. .iconfl-renminbi:before {
  135.   font-size: 0.5em;
  136. }
  137. .skill .skill-body .price .del {
  138.   text-decoration: line-through;
  139.   color: #666;
  140. }
  142. /* 猜你喜欢 */
  143. .main .lover {
  144.   margin: 1rem;
  145. }
  147. .main .lover ul {
  148.   display: flex;
  149.   flex-flow: row wrap;
  150.   justify-content: space-between;
  151. }
  152. .main .lover li {
  153.   background-color: #fff;
  154.   width: 48.5%;
  155.   border-radius: 0.4em;
  156.   overflow: hidden;
  157.   margin-bottom: 1em;
  158. }
  159. .main .lover .lover-body img {
  160.   height: 18em;
  161. }
  162. .main .lover .lover-body p {
  163.   display: -webkit-box;
  164.   -webkit-line-clamp: 2;
  165.   -webkit-box-orient: vertical;
  166.   word-break: break-all;
  167.   overflow: hidden;
  168.   margin: 0.2em 0.4em;
  169. }
  170. .main .lover-body .info {
  171.   padding: 0.5em;
  173.   position: relative;
  174. }
  175. .main .lover-body .info span {
  176.   color: #f23030;
  177. }
  178. .main .lover-body .info .price {
  179.   font-size: 1.4em;
  180.   font-weight: 600;
  181. }
  182. .main .lover-body .info .tag {
  183.   font-size: 1.2em;
  184.   border: 1px solid #f23030;
  185.   border-radius: 0.2em;
  186.   padding: 0 0.2em;
  187. }
  188. .main .lover-body .info .like {
  189.   font-size: 1.2em;
  190.   background-color: #f0f2f5;
  191.   border-radius: 1em 0 0 1em;
  192.   position: absolute;
  193.   right: 0;
  194.   color: gray;
  195.   padding: 0.1em 0.4em;
  196. }

图片效果

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：媒体查询中,如果只有一个单位,建议只写起点min-width,不要写max-width
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