search

博客列表 >Flex布局京东首页实例

Flex布局京东首页实例

陈强
陈强原创
2020年12月24日 17:10:232135浏览

代码

  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. }

图片效果

上一条：演示box-sizing：IE盒子和常用的左右垂直居中下一条：1223 京东app首页
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多