search

博客列表 >flex布局仿京东移动端首页

flex布局仿京东移动端首页

a.
a.原创
2021年01月01日 13:01:48978浏览

效果图


html代码

  1. a<!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.     <link rel="stylesheet" href="static/css/header.css" />
  9.     <link rel="stylesheet" href="static/css/slide.css" />
  10.     <link rel="stylesheet" href="static/css/nav.css" />
  11.     <link rel="stylesheet" href="static/css/haohuo.css" />
  12. </head>
  13.   <body>
  14.     <header class="header">
  15.       <div class="menu iconfont icon-caidan"></div>
  16.       <div class="search">
  17.         <div class="logo">JD</div>
  18.         <div class="zoom iconfont icon-sousuo"></div>
  19.         <input class="words" type="text" value="iphone12" /></div>
  20.       </div>
  21.       <div class="login">登录</div>
  22.     </header>
  23.     <div class="slide">
  24.         <div class="img"><img src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/130573/4/17560/124669/5fc2626cE4d3682e1/df08fc1bf4c5ae08.jpg!cr_1125x445_0_171!q70.jpg.dpg"></div>
  26.         <div class="focus-slide">
  27.             <span></span>
  28.             <span></span>
  29.             <span></span>
  30.             <span></span>
  31.         </div>
  32.     </div>
  33.     <main class="main">
  35.       <ul class="nav">
  36.         <!-- 第一组 -->
  37.         <li>
  38.           <a href=""><img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png" /></a>
  39.             <span>京东超市</span>
  40.         </li>
  41.         <li>
  42.           <a href=""><img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/135931/4/3281/5598/5efbf2c0Edbdc82c7/ed9861b4ddfb9f30.png" /></a>
  43.           <span>数码电器</span>
  44.         </li>
  45.         <li>
  46.           <a href=""><img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/140012/8/1804/3641/5efbf318E38bd5dad/0db99d859ab16ce9.png" /></a>
  47.           <span>京东服饰</span>
  48.         </li>
  49.         <li>
  50.           <a href=""><img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/129215/21/5978/3618/5efbf344Ebec23ae8/59712d986b10bb0a.png" /></a>
  51.           <span>京东生鲜</span>
  52.         </li>
  53.         <li>
  54.           <a href=""><img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/116602/7/11200/3796/5efbf375Ebba41029/f07cc166f368fa05.png" /></a>
  55.           <span>京东到家</span>
  56.         </li>
  57.         <li>
  58.           <a href=""><img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/146390/3/1846/4909/5efbf39aEe5f5f797/300071558a9ab078.png" /></a>
  59.           <span>充值缴费</span>
  61.         </li>
  62.         <li>
  63.           <a href=""><img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/143365/25/1824/3716/5efbf3c0E5175e1fb/88f6227257a29f1d.png" /></a>
  65.           <span>9.9元拼</span>
  66.         </li>
  67.         <li>
  68.           <a href=""><img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/113589/24/11332/4897/5efbf3feE705d87db/e5c12d5e943266b9.png" /></a>
  69.           <span>领券</span>
  70.         </li>
  71.         <li>
  72.           <a href=""><img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/129184/28/5977/3711/5efbf53aE2c2e6a07/7db529ce0e00838f.png" /></a>
  73.           <span>借钱</span>
  74.         </li>
  75.         <li>
  76.           <a href=""><img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/123730/37/5924/4189/5efbf567E0a226121/d04df7c74c87cf68.png" /></a>
  77.           <span>Plus会员</span>
  78.         </li>
  79.       </ul>
  80.       <div class="haohuo">
  81.         <div class="title">
  82.           <a href="#"><h3>来电好货</h3></a>
  83.           <a href="#"><h3>国潮风尚</h3></a>
  84.         </div>
  85.         <ul>
  86.           <li><a href=""><span>正品直邮</span><img src="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/122304/6/4867/26484/5ee73aa3E8a601402/04d440839b734589.png!q70.jpg.dpg"></a></li>
  87.           <li><a href=""><span>3C大放价</span><img src="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/146350/29/713/33082/5ee73d9fE1ae995ad/0ec365679efbf615.png!q70.jpg.dpg"></a></li>
  88.           <li><a href=""><span>国货正当时</span><img src="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/121172/17/1584/29106/5ebd1637Ec4c82232/aa56520b3ab276be.png!q70.jpg.dpg"></a></li>
  89.           <li><a href=""><span>都是你爱的</span><img src="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/141856/19/761/28886/5ee73fa2E4401ba28/9386324f55097e7b.jpg!q70.jpg.dpg"></a></li>
  90.         </ul>
  91.       </div>
  92.       <div class="ms">
  93.         <div class="ms-head">
  94.           <div class="ms-top">
  95.             <div class="jdms">京东秒杀</div>
  96.             <div class="notice">
  97.               <div class="tips">22点场</div>
  98.               <div class="time">01:11:22</div>
  99.             </div>
  101.           </div>
  102.           <div class="right">更多秒杀</div>
  103.         </div>
  105.         <div class="ms-body">
  106.           <ul class="ms-list">
  107.             <li><a href="#"><img src="https://img11.360buyimg.com/n7/s150x150_jfs/t1/152555/5/11538/63661/5fe59ce8Ef83f10f9/fb4c1690583b2612.jpg.dpg"><span class="yj">¥399</span><span class="xj">¥199</span></a></li>
  108.             <li><a href="#"><img src="https://img11.360buyimg.com/n7/s150x150_jfs/t1/152555/5/11538/63661/5fe59ce8Ef83f10f9/fb4c1690583b2612.jpg.dpg"><span class="yj">¥399</span><span class="xj">¥199</span></a></li>
  109.             <li><a href="#"><img src="https://img11.360buyimg.com/n7/s150x150_jfs/t1/152555/5/11538/63661/5fe59ce8Ef83f10f9/fb4c1690583b2612.jpg.dpg"><span class="yj">¥399</span><span class="xj">¥199</span></a></li>
  110.             <li><a href="#"><img src="https://img11.360buyimg.com/n7/s150x150_jfs/t1/152555/5/11538/63661/5fe59ce8Ef83f10f9/fb4c1690583b2612.jpg.dpg"><span class="yj">¥399</span><span class="xj">¥199</span></a></li>
  111.             <li><a href="#"><img src="https://img11.360buyimg.com/n7/s150x150_jfs/t1/152555/5/11538/63661/5fe59ce8Ef83f10f9/fb4c1690583b2612.jpg.dpg"><span class="yj">¥399</span><span class="xj">¥199</span></a></li>
  112.             <li><a href="#"><img src="https://img11.360buyimg.com/n7/s150x150_jfs/t1/152555/5/11538/63661/5fe59ce8Ef83f10f9/fb4c1690583b2612.jpg.dpg"><span class="yj">¥399</span><span class="xj">¥199</span></a></li>
  113.             <li><a href="#"><img src="https://img11.360buyimg.com/n7/s150x150_jfs/t1/152555/5/11538/63661/5fe59ce8Ef83f10f9/fb4c1690583b2612.jpg.dpg"><span class="yj">¥399</span><span class="xj">¥199</span></a></li>
  114.             <li><a href="#"><img src="https://img11.360buyimg.com/n7/s150x150_jfs/t1/152555/5/11538/63661/5fe59ce8Ef83f10f9/fb4c1690583b2612.jpg.dpg"><span class="yj">¥399</span><span class="xj">¥199</span></a></li>
  115.             <li><a href="#"><img src="https://img11.360buyimg.com/n7/s150x150_jfs/t1/152555/5/11538/63661/5fe59ce8Ef83f10f9/fb4c1690583b2612.jpg.dpg"><span class="yj">¥399</span><span class="xj">¥199</span></a></li>
  116.             <li><a href="#"><img src="https://img11.360buyimg.com/n7/s150x150_jfs/t1/152555/5/11538/63661/5fe59ce8Ef83f10f9/fb4c1690583b2612.jpg.dpg"><span class="yj">¥399</span><span class="xj">¥199</span></a></li>
  117.           </ul>
  118.         </div>
  119.     </div>
  120.     <div class="love">
  121.       <img src="http://img12.360buyimg.com/img/s750x70_jfs/t1/148857/1/16777/13220/5fc9f9d0E734c0ee5/88c99cdbe410e58a.png" alt="">
  122.       <ul class="love-list">
  123.         <li>
  124.           <a href="">
  125.             <img src="https://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/163748/34/162/262841/5fed47c1E0a55c930/3dbc5349f6dd8c3a.jpg!q70.dpg.webp" alt="">
  126.             <span class="title">骆驼户外羽绒服女秋冬新款保暖防寒防风中长款男外套 A0W1R4114 幻影黑 女 M</span>
  127.             <div class="price"><span>¥599</span><span>看相似</span></div></a></li>
  128.         <li><a href=""><img src="https://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/163748/34/162/262841/5fed47c1E0a55c930/3dbc5349f6dd8c3a.jpg!q70.dpg.webp" alt=""><span class="title">骆驼户外羽绒服女秋冬新款保暖防寒防风中长款男外套 A0W1R4114 幻影黑 女 M</span><div class="price"><span>¥599</span><span>看相似</span></div></a></li>
  129.         <li><a href=""><img src="https://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/163748/34/162/262841/5fed47c1E0a55c930/3dbc5349f6dd8c3a.jpg!q70.dpg.webp" alt=""><span class="title">骆驼户外羽绒服女秋冬新款保暖防寒防风中长款男外套 A0W1R4114 幻影黑 女 M</span><div class="price"><span>¥599</span><span>看相似</span></div></a></li>
  130.         <li><a href=""><img src="https://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/163748/34/162/262841/5fed47c1E0a55c930/3dbc5349f6dd8c3a.jpg!q70.dpg.webp" alt=""><span class="title">骆驼户外羽绒服女秋冬新款保暖防寒防风中长款男外套 A0W1R4114 幻影黑 女 M</span><div class="price"><span>¥599</span><span>看相似</span></div></a></li>
  131.         <li><a href=""><img src="https://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/163748/34/162/262841/5fed47c1E0a55c930/3dbc5349f6dd8c3a.jpg!q70.dpg.webp" alt=""><span class="title">骆驼户外羽绒服女秋冬新款保暖防寒防风中长款男外套 A0W1R4114 幻影黑 女 M</span><div class="price"><span>¥599</span><span>看相似</span></div></a></li>
  132.         <li><a href=""><img src="https://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/163748/34/162/262841/5fed47c1E0a55c930/3dbc5349f6dd8c3a.jpg!q70.dpg.webp" alt=""><span class="title">骆驼户外羽绒服女秋冬新款保暖防寒防风中长款男外套 A0W1R4114 幻影黑 女 M</span><div class="price"><span>¥599</span><span>看相似</span></div></a></li>
  133.         <li><a href=""><img src="https://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/163748/34/162/262841/5fed47c1E0a55c930/3dbc5349f6dd8c3a.jpg!q70.dpg.webp" alt=""><span class="title">骆驼户外羽绒服女秋冬新款保暖防寒防风中长款男外套 A0W1R4114 幻影黑 女 M</span><div class="price"><span>¥599</span><span>看相似</span></div></a></li>
  134.         <li><a href=""><img src="https://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/163748/34/162/262841/5fed47c1E0a55c930/3dbc5349f6dd8c3a.jpg!q70.dpg.webp" alt=""><span class="title">骆驼户外羽绒服女秋冬新款保暖防寒防风中长款男外套 A0W1R4114 幻影黑 女 M</span><div class="price"><span>¥599</span><span>看相似</span></div></a></li>
  135.         <li><a href=""><img src="https://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/163748/34/162/262841/5fed47c1E0a55c930/3dbc5349f6dd8c3a.jpg!q70.dpg.webp" alt=""><span class="title">骆驼户外羽绒服女秋冬新款保暖防寒防风中长款男外套 A0W1R4114 幻影黑 女 M</span><div class="price"><span>¥599</span><span>看相似</span></div></a></li>
  136.         <li><a href=""><img src="https://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/163748/34/162/262841/5fed47c1E0a55c930/3dbc5349f6dd8c3a.jpg!q70.dpg.webp" alt=""><span class="title">骆驼户外羽绒服女秋冬新款保暖防寒防风中长款男外套 A0W1R4114 幻影黑 女 M</span><div class="price"><span>¥599</span><span>看相似</span></div></a></li>
  137.         <li><a href=""><img src="https://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/163748/34/162/262841/5fed47c1E0a55c930/3dbc5349f6dd8c3a.jpg!q70.dpg.webp" alt=""><span class="title">骆驼户外羽绒服女秋冬新款保暖防寒防风中长款男外套 A0W1R4114 幻影黑 女 M</span><div class="price"><span>¥599</span><span>看相似</span></div></a></li>
  138.         <li><a href=""><img src="https://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/163748/34/162/262841/5fed47c1E0a55c930/3dbc5349f6dd8c3a.jpg!q70.dpg.webp" alt=""><span class="title">骆驼户外羽绒服女秋冬新款保暖防寒防风中长款男外套 A0W1R4114 幻影黑 女 M</span><div class="price"><span>¥599</span><span>看相似</span></div></a></li>
  139.         <li><a href=""><img src="https://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/163748/34/162/262841/5fed47c1E0a55c930/3dbc5349f6dd8c3a.jpg!q70.dpg.webp" alt=""><span class="title">骆驼户外羽绒服女秋冬新款保暖防寒防风中长款男外套 A0W1R4114 幻影黑 女 M</span><div class="price"><span>¥599</span><span>看相似</span></div></a></li>
  140.         <li><a href=""><img src="https://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/163748/34/162/262841/5fed47c1E0a55c930/3dbc5349f6dd8c3a.jpg!q70.dpg.webp" alt=""><span class="title">骆驼户外羽绒服女秋冬新款保暖防寒防风中长款男外套 A0W1R4114 幻影黑 女 M</span><div class="price"><span>¥599</span><span>看相似</span></div></a></li>
  141.         </ul>
  142.     </div>
  143.     </main>
  144.     <footer class="footer">
  145.       <ul>
  146.         <li><a href=""><img src="https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/81741/30/12345/4140/5d9c4b13E726f0a1e/82c582e7c375e4b3.png"></a></li>
  147.         <li><a href=""><img src="https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/56507/6/12787/3168/5d9c4b12Ef363dd8d/4af32f42575509d8.png"></a></li>
  148.         <li><a href=""><img src="https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/70651/38/12417/3194/5d9d3eafE12cde68b/2467c20113c50451.png"></a></li>
  149.         <li><a href=""><img src="https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/64954/4/12406/3529/5d9c4b12Ee7a82735/f2fe0a88bf344736.png"></a></li>
  150.         <li><a href=""><img src="https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/68400/36/12368/3153/5d9c4b13E0e0d80a8/876c40f17d91ce44.png"></a></li>
  151.       </ul>
  152.     </footer>
  153.   </body>
  154. </html>

CSS代码

reset

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  6. :root {
  7.   font-size: 10px;
  8. }
  10. li {
  11.   list-style: none;
  12. }
  13. a {
  14.   color: #7b7b7b;
  15.   text-decoration: none;
  16. }
  17. body {
  18.   background-color: antiquewhite;
  19.   font-size: 10px;
  20. }
  21. /* @media screen and (min-width: 440px) {
  22.   html {
  23.     font-size: 10px;
  24.   }
  25. }
  26. @media screen and (min-width: 480px) {
  27.   html {
  28.     font-size: 12px;
  29.   }
  30. }
  31. @media screen and (min-width: 640px) {
  32.   html {
  33.     font-size: 14px;
  34.   }
  35. }
  36. @media screen and (min-width: 720px) {
  37.   html {
  38.     font-size: 16px;
  39.   }
  40. } */

header

  1. @import url(https://at.alicdn.com/t/font_2289194_lcufc1dn8s.css);
  2. .header {
  3.   display: flex;
  4.   align-items: center;
  5.   justify-content: space-between;
  6. }
  7. .header .menu {
  8.   color: #fff;
  9.   text-align: center;
  10.   font-size: 2.4rem;
  11.   margin: 0 1rem;
  12. }
  14. .header .login {
  15.   color: #fff;
  16.   margin: 0 1.5rem;
  17. }
  19. .header .search {
  20.   flex: auto;
  21.   text-align: center;
  22.   padding: 0.5rem;
  23.   background-color: white;
  24.   border-radius: 3rem;
  25.   display: flex;
  26. }
  27. .header .search .logo {
  28.   color: #e43130;
  29.   flex: 0 1 4rem;
  30.   font-size: 1.6rem;
  31.   text-align: center;
  32.   line-height: 2rem;
  33. }
  34. /* 放大镜 */
  35. .header .search .zoom {
  36.   color: #ccc;
  37.   flex: 0 1 4rem;
  38.   border-left: 1px solid;
  40.   text-align: center;
  41.   line-height: 2rem;
  42. }
  44. .header .search .words {
  45.   flex: auto;
  46.   border: none;
  47.   outline: none;
  48.   color: #aaa;
  49. }

haohuo

  1. .haohuo {
  2.   background-color: #fff;
  3.   /*border:solid 1px red;*/
  4.   margin: 1rem;
  5.   min-width: 400px;
  6. }
  8. .haohuo .title {
  9.   display: flex;
  10.   justify-content: center;
  11. }
  12. .haohuo .title a {
  13.   margin: 1rem;
  14. }
  15. .haohuo .title a h3 {
  16.   color: black;
  17. }
  19. .haohuo ul {
  20.   display: flex;
  21.   justify-content: space-evenly;
  22.   padding-bottom: 1rem;
  23. }
  24. .haohuo ul li a {
  25.   /*border: 1px red solid;*/
  26.   display: flex;
  27.   flex-flow: column nowrap;
  28.   justify-content: center;
  29.   align-items: center;
  30.   color: rgb(31, 29, 29);
  31. }
  32. .haohuo ul a img {
  33.   width: 8rem;
  34. }

nav

  1. .main .nav {
  2.   /* background-color: rgb(255, 255, 255); */
  3.   padding: 1rem;
  4.   display: flex;
  6.   flex-flow: wrap;
  7.   justify-content: space-between;
  8. }
  9. .main .nav img {
  10.   height: 4rem;
  11.   width: 4rem;
  12. }
  14. .main .nav li {
  15.   /* 第一行显示5个，每个分配20% */
  16.   flex: 1 1 20%;
  17.   display: flex;
  18.   padding: 1rem;
  19.   flex-flow: column nowrap;
  20.   align-items: center;
  21. }

ms

  1. .main .ms {
  2.   background-color: #fff;
  3.   padding: 1rem;
  4.   margin: 1rem 0;
  5. }
  6. .main .ms .ms-top {
  7.   font-size: 1.3rem;
  8.   height: 3rem;
  9. }

index

  1. @import "reset.css";
  2. .header {
  3.   background-color: #c31130;
  4.   color: white;
  5.   height: 4.4rem;
  6.   position: fixed;
  7.   top: 0;
  8.   left: 0;
  9.   right: 0;
  10.   bottom: 0;
  11.   font-size: 1.4rem;
  12.   min-width: 400px;
  13. }
  14. .footer {
  15.   color: #666;
  16.   background-color: #fafafa;
  17.   color: white;
  18.   height: 5rem;
  19.   box-shadow: 0 0 3px #999;
  20.   position: fixed;
  21.   bottom: 0;
  22.   left: 0;
  23.   right: 0;
  24.   font-size: 1.4rem;
  25.   min-width: 400px;
  26. }
  27. .slide {
  28.   /* position: relative; */
  29.   margin-top: 3.2rem;
  30.   min-width: 400px;
  31. }
  32. .main {
  33.   /* position: absolute; */
  34.   margin-top: 1.8rem;
  35.   /* bottom: 4.4rem; */
  36.   min-width: 400px;
  37.   left: 0;
  38.   right: 0;
  39.   height: 100rem;
  40.   font-size: 1.4rem;
  41. }
  42. .ms {
  43.   margin: 1rem;
  44.   border-radius: 10px;
  45.   background-color: white;
  46.   display: flex;
  47.   flex-flow: column nowrap;
  48. }
  49. .ms .ms-head {
  50.   display: flex;
  51.   justify-content: space-between;
  52.   align-items: center;
  53. }
  55. .ms > .ms-head > .ms-top {
  56.   background: url(../images/index.png) no-repeat;
  57.   background-size: cover;
  58.   display: flex;
  59.   align-items: center;
  60.   justify-content: center;
  61. }
  63. .ms > .ms-head > .ms-top > .jdms {
  64.   font-size: 1.8rem;
  65.   margin: 0.7rem 1.5rem;
  66. }
  68. .ms > .ms-head > .ms-top > .notice {
  69.   display: flex;
  70.   align-items: center;
  71.   justify-content: center;
  72.   border: 1px red solid;
  73.   border-radius: 10px;
  74.   height: 2.2rem;
  75. }
  77. .ms > .ms-head > .ms-top > .notice > .tips {
  78.   background-color: red;
  79.   border: 1px red solid;
  80.   border-radius: 10px;
  81.   padding: 0 0.5rem;
  82.   color: white;
  83. }
  84. .ms > .ms-head > .ms-top > .notice > .time {
  85.   padding: 0 1rem;
  86. }
  88. .ms > .ms-head .right {
  89.   padding-right: 2rem;
  90.   font-size: 1.6rem;
  91.   color: red;
  92. }
  94. .ms > .ms-body > .ms-list {
  95.   padding: 1rem 0;
  96.   display: flex;
  97.   flex-flow: row nowrap;
  98.   overflow: auto;
  99. }
  100. .ms > .ms-body > .ms-list li a {
  101.   display: flex;
  102.   flex-flow: column nowrap;
  104.   align-items: center;
  105. }
  106. .ms > .ms-body > .ms-list li a span {
  107.   font-size: 2rem;
  108. }
  109. .ms > .ms-body > .ms-list li a .yj {
  110.   /* color: red; */
  111.   text-decoration: line-through;
  112. }
  114. .ms > .ms-body > .ms-list li a .xj {
  115.   color: red;
  116. }
  118. .love img {
  119.   width: 100%;
  120.   text-align: center;
  121. }
  122. .love > .love-list {
  123.   display: flex;
  124.   flex-flow: row wrap;
  125.   margin: 0 1rem;
  126. }
  127. .love > .love-list li {
  128.   border-radius: 20px;
  129.   background-color: white;
  130.   max-width: 400px;
  131.   flex: 1 1 48%;
  132.   margin: 1rem 0.5rem;
  133.   padding: 0 0 1.5rem 0;
  134. }
  135. .love > .love-list li a {
  136.   display: flex;
  137.   flex-flow: column nowrap;
  138. }
  139. .love > .love-list li a img {
  140.   border-radius: 20px;
  141.   max-width: 400px;
  142. }
  143. .love > .love-list li a .price {
  144.   display: flex;
  145.   justify-content: space-between;
  146. }
  148. .love > .love-list li a .price span:first-of-type {
  149.   padding-left: 1rem;
  150.   color: red;
  151.   font-size: 2rem;
  152. }
  153. .love > .love-list li a .title {
  154.   padding: 1rem;
  155. }
  156. .love > .love-list li a .price span:last-of-type {
  157.   background-color: #ccc;
  158.   color: white;
  159.   font-size: 1.5rem;
  160.   border-start-start-radius: 10px;
  161.   border-end-start-radius: 010px;
  162. }
  164. .footer ul {
  165.   display: flex;
  167.   justify-content: space-evenly;
  168. }
  169. .footer ul li {
  170.   align-items: flex-end;
  171. }
  173. .footer ul li a img {
  174.   width: 6rem;
  175. }

slide

  1. .slide .img img {
  2.   width: 100%;
  3. }
  4. .slide > .focus-slide {
  5.   display: flex;
  6.   margin-top: -3rem;
  7.   justify-content: center;
  8. }
  9. .slide > .focus-slide span {
  10.   background-color: rgb(255, 255, 255);
  11.   width: 1rem;
  12.   height: 1rem;
  14.   /* border: red solid 1px; */
  15.   border-radius: 3rem;
  16.   margin: 0 1rem;
  17. }
上一条：Grid布局中项目在单元格和容器中对齐方式、防PHP中文网首页、grid媒体查询理解下一条：js中的常量变量以及html文档三种引入js的方式
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多