search

博客列表 >CSS实战flex布局仿京东app

CSS实战flex布局仿京东app

wen。
wen。原创
2021年02月06日 12:56:291166浏览

京东实战app

运用弹性盒子布局京东app首页

css代码

  1. *{
  2.     box-sizing: border-box;
  3.     margin: 0;
  4.     padding: 0;    
  5. }
  7. a{
  8.     text-decoration: none;
  9. }
  11. ul,li{
  12.     list-style: none;
  13. }
  15. input{
  16.     color: #232326;
  17. }
  19. @media (min-width:360px){
  20.     html{
  21.         font-size: 12px;
  22.     }
  23. }
  25. /* 页眉 start */
  26. .header{
  27.     background: #b2151b;
  28.     position: fixed;
  29.     left: 0;
  30.     right: 0;
  31.     top: 0;
  32.     height: 3rem;
  33.     z-index: 999;
  34. }
  35. .header .icon-menu{
  36.     background: url(../images/icon-menu.png)50% no-repeat;     
  37.     background-size: 40%; 
  38.     height: 3rem;
  39. }
  40. .header{
  41.     display: flex;
  42.     align-items: center;
  43. }
  44. /* 页眉中的三个部分比例 1:6:1 */
  45. .header .login{
  46.     text-align: center;
  47.     color: #ffffff;
  48.     font-size: 1rem;
  49.     flex: 1;    
  50. }
  52. .header .menu{    
  53.     text-align: center;
  54.     flex: 1;
  55.     font-size: 2.5rem;
  56. }
  58. .header .search{
  59.     flex: 6;
  60.     background: #ffffff;
  61.     border-radius: 3rem;
  62.     padding: 0.5rem;    
  63.     display: flex;
  64. }
  66. .header .search .logo{
  67.     background: url(../images/jd-sprites.png)-13% 0% no-repeat;
  68.     background-size: 14rem;
  69.     flex: 1;
  70.     height: 1rem;
  71. }
  73. .header .search .icon-search{
  74.     background: url(../images/icon-search.png) 50% 0% no-repeat;
  75.     background-size: 1.3rem;
  76.     flex: 1;
  77.     height: 1rem;
  78.     border-left: 1px solid #bdbdbd;
  79. }
  81. .header .search .words{
  82.     flex: 6;
  83.     border: none;
  84.     height: 1rem;
  85. }
  86. /* 页眉 end */
  87. /* 主体 start */
  88. .main{
  89.     background: #f6f6f6;
  90.     padding-top: 3rem;
  91.     padding-bottom: 6rem;
  92.     font-size: 1.4rem;
  93. }
  94. .main .nav{
  95.     padding: 1rem;
  96.     background: #ffffff;
  97.     border-radius: 1rem;
  98.     margin: 0.5rem;
  99.     display: flex;
  100.     /* 运行换行 */
  101.     flex-flow: row wrap;
  102.     justify-content: space-between;
  103. }
  104. .main .nav img{
  105.     height: 3rem;
  106.     width: 3rem;
  107. }
  108. .main .nav a{
  109.     font-size: 1rem;
  110. }
  111. .main .nav li{
  112.     flex: 1 5 20%;
  113.     flex-flow: column nowrap;
  114.     align-items: center;
  115.     text-align: center;
  116.     height: 6rem;
  117. }
  118. .main .nav li p{
  119.     color: #666;
  120.     font-size: 0.8rem;
  121. }
  122. .main .ms{
  123.     background: #ffffff;
  124.     border-radius: 1rem;
  125.     margin: 0.5rem;
  126.     padding: 0.5rem;
  127. }
  128. .main .ms .ms-top{
  129.     font-size: 1.3rem;
  130.     height: 3rem;
  131.     display: flex;
  132.     justify-content: space-between;
  133.     background: url(../images/ms-bg.png) no-repeat;
  134.     background-size: 100%;
  135. }
  137. .main .ms .ms-top .left{
  138.     display: flex;
  139.     flex: 4;
  140. }
  142. .main .ms .ms-top .left .title{
  143.     font-weight: bold;
  144.     flex: 1;    
  145. }
  147. .main .ms .ms-top .left .notice{
  148.     display: flex;
  149.     flex: 3;
  150. }
  152. .main .ms .ms-top .left .notice .tips{
  153.     font-size: 1.2rem;
  154.     color: #ff2727;
  155.     line-height: 2;
  156.     font-weight: bold;
  157.     flex: 1;
  158. }
  160. .main .ms .ms-top .left .notice .tips::after{
  161.     content: '';
  162.     background: url(../images/seckill-time-to_1de70c91.png)10% no-repeat;
  163.     padding: 1rem;
  164.     background-size: 99%;
  165. }
  167. .main .ms .ms-top .left .notice .time{
  168.     font-size: 1.2rem;
  169.     flex: 3;
  170.     line-height: 2;
  171. }
  173. .main .ms .ms-top .left .notice .time span{
  174.     background: #fa2c19;
  175.     color: #ffffff;
  176.     border-radius: 4px;
  177.     padding: 0.2rem;
  178. }
  180. .main .ms .ms-top .right{
  181.     flex: 1;
  182.     font-size: 1.1rem;
  183.     color: #f23030;
  184.     line-height: 2;
  185. }
  187. .main .ms .ms-top .right::after{
  188.     content: '';
  189.     background: url(../images/arrow_rt_2ccb8cd5.png)10% no-repeat;
  190.     padding: 1rem;
  191.     background-size: 40%;
  192.     margin-left: 0.1rem;
  193. }
  195. .main .ms .ms-body{
  196.     display: flex;
  197.     flex-flow: row nowrap;
  198.     justify-content: space-between;
  199. }
  201. .main .ms .ms-body img{
  202.     width: 4rem;
  203.     height: 4rem;
  204. }
  206. .main .ms .ms-body li{
  207.     text-align: center;
  208. }
  210. .main .ms .ms-body li .price{
  211.     color: #f2270c;
  212.     font-size: 1.1rem;
  213.     font-weight: bold;
  214. }
  216. .main .ms .ms-body li .seckill-original-price{
  217.     font-size: 1.1rem;
  218.     color: #999;
  219.     text-decoration:line-through
  220. }
  222. .main .main-body{
  223.     display: flex;
  224.     flex-flow: row wrap;
  225.     justify-content: space-between;
  226.     margin: 0.5rem;
  227. }
  229. .main .main-body li{
  230.     flex: 1 1 calc(50% - 1rem);
  231.     align-items: center;
  232.     background: #ffffff;
  233.     display: flex;
  234.     flex-flow: row wrap;
  235.     margin: 0.5rem;
  236.     border-radius: 3px;
  237.     border-radius: 10px;
  238. }
  240. .main .main-body li img{
  241.     width: 100%;
  242.     height: 100%;
  243. }
  245. .main .main-body li .info{
  246.     margin: 0.3rem;
  247.     height: 7rem;
  248. }
  250. .main .main-body li .info p{
  251.     font-size: 1rem;
  252.     margin-bottom: 0.5rem;
  253.     height: 3rem;
  254.     overflow: hidden;
  255. }
  257. .main .main-body li .info .desc-price {
  258.     display: flex;
  259.     justify-content: space-between;
  260. }
  262. .main .main-body li .info .desc-price .left{
  263.     color: #fa2c19;
  264.     font-size: 0.8rem;
  265. }
  267. .main .main-body li .info .desc-price .left .price{
  268.     font-weight: bold;
  269. }
  271. .main .main-body li .info .desc-price .left .price span{
  272.     font-size: 1.3rem;
  273.     margin-left: 0.2rem;
  274. }
  276. .main .main-body li .info .desc-price .left .price .sg{
  277.     border: 1px solid #fa2c19;
  278.     font-size: 0.5em;
  279.     font-weight: normal;
  280.     padding: 0 0.1rem 0;
  281.     border-radius: 3px;
  282. }
  284. .main .main-body li .info .desc-price .right{
  285.     color: grey;
  286.     font-size: 0.8rem;
  287.     background: #f0f2f5;
  288.     height: 2rem;
  289.     line-height: 2;
  290.     padding: 0 0.5rem;
  291.     border-top-left-radius: 10px;
  292.     border-bottom-left-radius: 10px;
  293.     position: relative;
  294.     right: -0.5rem;
  295. }
  298. /* 主体 end */
  299. .footer{
  300.     background: #ffffff;
  301.     position: fixed;
  302.     height: 6em;
  303.     left: 0;
  304.     right: 0;
  305.     bottom: 0;
  306.     z-index: 999;
  307. }
  309. .footer .nav{
  310.     display: flex;
  311.     justify-content: space-between;
  312.     flex-flow: row nowrap;
  313. }
  315. .footer .nav li{
  316.     flex: 1 1 20%;
  317. }
  319. .footer .nav li img{
  320.     width: 100%;
  321.     height: 100%;
  322.     padding: 0.3rem 0.2rem 0;
  323. }

index.html

  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" type="text/css" href="css/app.css">
  8. </head>
  9. <body>
  10.     <!-- 页眉 -->
  11.     <div class="header">
  12.         <!-- 字体图标菜单 -->
  13.         <div class="menu iconfont icon-menu"></div>
  14.         <!-- 搜索框 -->
  15.         <div class="search">
  16.             <div class="logo"></div>
  17.             <div class="zoom iconfont icon-search"></div>
  18.             <input type="text" class="words" placeholder="联想一体机电脑">
  19.         </div>
  20.         <!-- 登录按钮 -->
  21.         <a href="" class="login">登录</a>
  22.     </div>
  23.     <!-- 主体 -->
  24.     <div class="main">
  25.         <ul class="nav">
  26.             <li>
  27.                 <a href="#">
  28.                     <img src="images/e2bcc411170524f0.png"/>
  29.                   <p>京东超市</p>
  30.                 </a>
  31.             </li>
  32.             <li>
  33.                 <a href="#">
  34.                     <img src="images/ed9861b4ddfb9f30.png"/>
  35.                   <p>数码电器</p>
  36.                 </a>
  37.             </li>
  38.             <li>
  39.                 <a href="#">
  40.                     <img src="images/0db99d859ab16ce9.png"/>
  41.                   <p>京东服饰</p>
  42.                 </a>
  43.             </li>           
  44.             <li>
  45.                 <a href="#">
  46.                     <img src="images/59712d986b10bb0a.png"/>
  47.                   <p>京东生鲜</p>
  48.                 </a>
  49.             </li>
  50.             <li>
  51.                 <a href="#">
  52.                     <img src="images/f07cc166f368fa05.png"/>
  53.                   <p>京东到家</p>
  54.                 </a>
  55.             </li>
  56.             <li>
  57.                 <a href="#">
  58.                     <img src="images/300071558a9ab078.png"/>
  59.                   <p>充值缴费</p>
  60.                 </a>
  61.             </li>
  62.             <li>
  63.                 <a href="#">
  64.                     <img src="images/b2aa7d67e675baf8.png"/>
  65.                   <p>9.9元拼</p>
  66.                 </a>
  67.             </li>
  68.             <li>
  69.                 <a href="#">
  70.                     <img src="images/e5c12d5e943266b9.png"/>
  71.                   <p>领券</p>
  72.                 </a>
  73.             </li>
  74.             <li>
  75.                 <a href="#">
  76.                     <img src="images/af4b57d2383e605d.png"/>
  77.                   <p>领金贴</p>
  78.                 </a>
  79.             </li>
  80.             <li>
  81.                 <a href="#">
  82.                     <img src="images/d04df7c74c87cf68.png"/>
  83.                   <p>PLUS会员</p>
  84.                 </a>
  85.             </li>
  86.         </ul>
  87.         <!-- 秒杀区 -->
  88.         <div class="ms">
  89.             <div class="ms-top">
  90.                 <div class="left">
  91.                     <div class="title">京东秒杀</div>
  92.                     <div class="notice">
  93.                         <div class="tips">
  94.                             16
  95.                         </div>
  96.                         <div class="time"><span>00</span>:<span>35</span>:<span>14</span></div>
  97.                     </div>
  98.                 </div>
  99.                 <div class="right">更多秒杀</div>
  100.             </div>
  101.             <ul class="ms-body">
  102.                 <li>
  103.                     <a href="#">
  104.                         <img src="images/9594607c2e8b36db.jpg" />
  105.                         <p class="price">￥20.9</p>
  106.                         <p class="seckill-original-price">￥23.7</p>
  107.                     </a>
  108.                 </li>
  109.                 <li>
  110.                     <a href="#">
  111.                         <img src="images/6a2ff1fc52fe892c.jpg" />
  112.                         <p class="price">￥1000</p>
  113.                         <p class="seckill-original-price">￥1500</p>
  114.                     </a>
  115.                 </li>
  116.                 <li>
  117.                     <a href="#">
  118.                         <img src="images/bff7dd4facbc18d6.jpg" />
  119.                         <p class="price">￥19.9</p>
  120.                         <p class="seckill-original-price">￥29.9</p>
  121.                     </a>
  122.                 </li>
  123.                 <li>
  124.                     <a href="#">
  125.                         <img src="images/cc5a53e672c9d90f.jpg" />
  126.                         <p class="price">￥22.9</p>
  127.                         <p class="seckill-original-price">￥35.9</p>
  128.                     </a>
  129.                 </li>
  130.                 <li>
  131.                     <a href="#">
  132.                         <img src="images/c40339852983406f.jpg" />
  133.                         <p class="price">￥1959</p>
  134.                         <p class="seckill-original-price">￥2248</p>
  135.                     </a>
  136.                 </li>
  137.                 <li>
  138.                     <a href="#">
  139.                         <img src="images/48b02e4c05f5ccb9.jpg" />
  140.                         <p class="price">￥29.9</p>
  141.                         <p class="seckill-original-price">￥45</p>
  142.                     </a>
  143.                 </li>
  144.             </ul>
  145.         </div>     
  146.         <!-- 商品主体   -->
  147.         <ul class="main-body">            
  148.             <li>
  149.                 <a href="#">
  150.                     <img src="images/c0ab1871dbc3a78c.jpg" />
  151.                 </a>                
  152.                 <div class="info">
  153.                     <p>忆丝芸头发营养液保湿护发喷雾200ml（免洗护发素防毛躁烫发护理柔顺精华液） 水润平衡喷雾</p>
  154.                     <div class="desc-price">
  155.                         <div class="left">
  156.                             <div class="price">
  157.                                 ￥<span>52</span>
  158.                                 <span class="sg">减免</span>
  159.                             </div>
  160.                         </div>                    
  161.                         <div class="right">
  162.                             <p>看相似</p>
  163.                         </div>
  164.                     </div>                    
  165.                 </div>
  166.             </li>          
  167.             <li>
  168.                 <a href="#">
  169.                     <img src="images/8a6a08fd86671626.jpg" />
  170.                 </a>                
  171.                 <div class="info">
  172.                     <p>安睡宝(SOMERELLE) 水洗棉四件套 ins全棉色织纯棉学生宿舍三件套素色简约床单被套 雾霾兰 1.8米双人床四件套 220*240cm</p>
  173.                     <div class="desc-price">
  174.                         <div class="left">
  175.                             <div class="price">
  176.                                 ￥<span>379</span>
  177.                             </div>
  178.                         </div>                    
  179.                         <div class="right">
  180.                             <p>看相似</p>
  181.                         </div>
  182.                     </div>                    
  183.                 </div>
  184.             </li>     
  185.             <li>
  186.                 <a href="#">
  187.                     <img src="images/4a490f0a31564308.jpg" />
  188.                 </a>                
  189.                 <div class="info">
  190.                     <p>汰渍 Tide 洁净除菌洗衣液（洁雅百合香）超值套装10斤（2KG*1瓶+500G*6袋装</p>
  191.                     <div class="desc-price">
  192.                         <div class="left">
  193.                             <div class="price">
  194.                                 ￥<span>59.9</span>
  195.                                 <span class="sg">满减</span>
  196.                             </div>
  197.                         </div>                    
  198.                         <div class="right">
  199.                             <p>看相似</p>
  200.                         </div>
  201.                     </div>                    
  202.                 </div>
  203.             </li>       
  204.             <li>
  205.                 <a href="#">
  206.                     <img src="images/2d80e586f7acd3aa.jpg" />
  207.                 </a>                
  208.                 <div class="info">
  209.                     <p>佳洁士(Crest) 3D钻亮炫白系列美白漱口水500ML</p>
  210.                     <div class="desc-price">
  211.                         <div class="left">
  212.                             <div class="price">
  213.                                 ￥<span>38.8</span>
  214.                                 <span class="sg">满减</span>
  215.                             </div>
  216.                         </div>                    
  217.                         <div class="right">
  218.                             <p>看相似</p>
  219.                         </div>
  220.                     </div>                    
  221.                 </div>
  222.             </li>           
  223.             <li>
  224.                 <a href="#">
  225.                     <img src="images/06296d41299f6765.jpg" />
  226.                 </a>                
  227.                 <div class="info">
  228.                     <p>亚缇克兰 Urtekram 玻尿酸原液水光面膜10片 （补水保湿男女士护肤化妆品）</p>
  229.                     <div class="desc-price">
  230.                         <div class="left">
  231.                             <div class="price">
  232.                                 ￥<span>98.8</span>
  233.                             </div>
  234.                         </div>                    
  235.                         <div class="right">
  236.                             <p>看相似</p>
  237.                         </div>
  238.                     </div>                    
  239.                 </div>
  240.             </li>       
  241.             <li>
  242.                 <a href="#">
  243.                     <img src="images/b6ce1ff083180055.png" />
  244.                 </a>                
  245.                 <div class="info">
  246.                     <p>北极绒 秋冬裸睡全新科技臻肤棉四件套 刺绣加厚保暖床单被套床上单人双人宿舍三件套</p>
  247.                     <div class="desc-price">
  248.                         <div class="left">
  249.                             <div class="price">
  250.                                 ￥<span>89</span>
  251.                             </div>
  252.                         </div>                    
  253.                         <div class="right">
  254.                             <p>看相似</p>
  255.                         </div>
  256.                     </div>                    
  257.                 </div>
  258.             </li>           
  259.         </ul>
  260.     </div>
  261.     <!-- 页脚 -->
  262.     <div class="footer">
  263.         <ul class="nav">
  264.             <li>
  265.                 <a href="#">
  266.                     <img src="images/81328b0609c60a3c.png" />
  267.                 </a>
  268.             </li>
  269.             <li>
  270.                 <a href="#">
  271.                     <img src="images/4af32f42575509d8.png" />
  272.                 </a>
  273.             </li>
  274.             <li>
  275.                 <a href="#">
  276.                     <img src="images/a161ad4f4d2bb5ea.png" />
  277.                 </a>
  278.             </li>
  279.             <li>
  280.                 <a href="#">
  281.                     <img src="images/f2fe0a88bf344736.png" />
  282.                 </a>
  283.             </li>
  284.             <li>
  285.                 <a href="#">
  286.                     <img src="images/876c40f17d91ce44.png" />
  287.                 </a>
  288.             </li>
  289.         </ul>
  290.     </div>
  291. </body>
  292. </html>

首页展现效果图

京东app首页

动图效果如下

动态图

上一条：H5互动游戏如何设计制作下一条：php字符串函数解析
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多