Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 用flex布局尝试模拟一个静态的移动端京东页面
Blogger Information
Blog 29
fans 1
comment 0
visits 35415
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
1507 people have browsed it

模拟静态的京东页面的总体思路

可以大致的将京东首页页面看成是由三部分组成，分别是页眉区、内容区还有页脚区。

页眉和页脚区的布局思路一样，它们的显示优先级都要大于内容区。然后可以注意到的是它的页眉和页脚区域都有许多的字体图标，这个可以在阿里巴巴矢量图标库找到相似的下载下来引用就行了。另外，所有用到图片需要自己准备哦，所有的图片在京东主页上都可以扒下来。

首先是一个整体的布局思路，可以将主页的整体先弄好，剩下的亿点点细节可以再去部署。页眉和页脚的宽度可以登录到京东首页移动端,然后使用元素查看器查看高度设置。

对于页眉，页脚还有主内容区位置这块我用了绝对定位去弄的，后期去写内容区的细节的时候不知道是什么原因，它老是被覆盖，只能重新去使用绝对定位去写，所以还得计算布局的位置，比较麻烦。

分内容去写 css，这样各个区出了问题，代码处理量就很少，方便去修改。

下边是所有的代码：

整个页面框架的 html 代码如下：(由于推荐内容区的东西结构一样且太多了，所以我就只在 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.     <!-- 首页 -->
  7.     <link rel="stylesheet" href="static/css/index.css" />
  8.     <!-- 页眉 -->
  9.     <link rel="stylesheet" href="static/css/header.css" />
  10.     <!-- 字体图标 -->
  11.     <link rel="stylesheet" href="static/iconfont/iconfont.css" />
  12.     <!-- 幻灯片 -->
  13.     <link rel="stylesheet" href="static/css/slide.css" />
  14.     <!-- 导航区 -->
  15.     <link rel="stylesheet" href="static/css/nav.css" />
  16.     <!-- 正品直邮 -->
  17.     <link rel="stylesheet" href="static/css/mail.css" />
  18.     <!-- 秒杀 -->
  19.     <link rel="stylesheet" href="static/css/ms.css" />
  20.     <!-- 猜你喜欢 -->
  21.     <link rel="stylesheet" href="static/css/xh.css" />
  22.     <!-- 页脚 -->
  23.     <link rel="stylesheet" href="static/css/footer.css" />
  24.     <title>页脚</title>
  25.   </head>
  26.   <body>
  27.     <!-- 页眉 -->
  28.     <div class="header">
  29.       <!-- 字体图标菜单 -->
  30.       <a href=""><div class="menu iconfont icon-menu"></div></a>
  31.       <div class="search">
  32.         <div class="logo iconfont icon-jingdong"></div>
  33.         <div class="zoom iconfont icon-sousuo"></div>
  34.         <input type="text" class="words" value="oppo手机" />
  35.       </div>
  36.       <a href="" class="login">登录</a>
  37.     </div>
  38.     <!-- 主体 -->
  39.     <div class="main">
  40.       <!-- 幻灯片 -->
  41.       <div class="slide">
  42.         <div class="box"></div>
  43.         <a href=""><img src="static/img/bg/bg-3.jpg" alt="" /></a>
  44.       </div>
  45.       <!-- 跳转 -->
  46.       <div class="jump">
  47.         <a href=""><div class="jd iconfont icon-jingdongsaomazhifu"></div></a>
  48.         <a href="">打开APP</a>
  49.       </div>
  50.       <ul class="nav">
  51.         <li>
  52.           <a href=""><img src="static/img/nav/nav-1.png" alt="" /></a>
  53.           <a href="">京东超市</a>
  54.         </li>
  55.         <li>
  56.           <a href=""><img src="static/img/nav/nav-2.png" alt="" /></a>
  57.           <a href="">数码电器</a>
  58.         </li>
  59.         <li>
  60.           <a href=""><img src="static/img/nav/nav-3.png" alt="" /></a>
  61.           <a href="">京东服饰</a>
  62.         </li>
  63.         <li>
  64.           <a href=""><img src="static/img/nav/nav-4.png" alt="" /></a>
  65.           <a href="">京东生鲜</a>
  66.         </li>
  67.         <li>
  68.           <a href=""><img src="static/img/nav/nav-5.png" alt="" /></a>
  69.           <a href="">京东到家</a>
  70.         </li>
  71.         <li>
  72.           <a href=""><img src="static/img/nav/nav-6.png" alt="" /></a>
  73.           <a href="">充值缴费</a>
  74.         </li>
  75.         <li>
  76.           <a href=""><img src="static/img/nav/nav-7.png" alt="" /></a>
  77.           <a href="">9.9拼</a>
  78.         </li>
  79.         <li>
  80.           <a href=""><img src="static/img/nav/nav-8.png" alt="" /></a>
  81.           <a href="">领券</a>
  82.         </li>
  83.         <li>
  84.           <a href=""><img src="static/img/nav/nav-9.png" alt="" /></a>
  85.           <a href="">借钱</a>
  86.         </li>
  87.         <li>
  88.           <a href=""><img src="static/img/nav/nav-10.png" alt="" /></a>
  89.           <a href="">PLUS会员</a>
  90.         </li>
  91.       </ul>
  92.       <ul class="zp">
  93.         <li>
  94.           <a href="">正品直邮</a>
  95.           <a href=""><img src="static/img/zp/zp1.jpg" alt="" /></a>
  96.         </li>
  97.         <li>
  98.           <a href="">来电好货</a>
  99.           <a href="">3C大放价</a>
  100.           <a href=""><img src="static/img/zp/zp2.jpg" alt="" /></a>
  101.         </li>
  102.         <li>
  103.           <a href="">国潮风尚</a>
  104.           <a href="">国货正当时</a>
  105.           <a href=""><img src="static/img/zp/zp3.jpg" alt="" /></a>
  106.         </li>
  107.         <li>
  108.           <a href="">都是你爱的</a>
  109.           <a href=""><img src="static/img/zp/zp4.jpg" alt="" /></a>
  110.         </li>
  111.       </ul>
  112.       <div class="ms">
  113.         <!-- 头部区 -->
  114.         <div class="ms-top">
  115.           <div class="left">
  116.             <div class="title">京东秒杀</div>
  117.             <div class="notice">
  118.               <div class="tips">22点专场</div>
  119.               <div class="time">01:22:11</div>
  120.             </div>
  121.           </div>
  122.           <div class="right">更多秒杀</div>
  123.         </div>
  124.         <!-- 秒杀主体区 -->
  125.         <ul class="ms-body">
  126.           <li class="item">
  127.             <a href=""><img src="static/img/ms/ms-1.jpg" alt="" /></a>
  128.             <div class="iconfont icon-renminbi1688">338</div>
  129.             <div class="iconfont icon-renminbi1688">558</div>
  130.           </li>
  131.           <li class="item">
  132.             <a href=""><img src="static/img/ms/ms-2.jpg" alt="" /></a>
  133.             <div class="iconfont icon-renminbi1688">1338</div>
  134.             <div class="iconfont icon-renminbi1688">1558</div>
  135.           </li>
  136.           <li class="item">
  137.             <a href=""><img src="static/img/ms/ms-3.jpg" alt="" /></a>
  138.             <div class="iconfont icon-renminbi1688">2338</div>
  139.             <div class="iconfont icon-renminbi1688">2558</div>
  140.           </li>
  141.           <li class="item">
  142.             <a href=""><img src="static/img/ms/ms-4.jpg" alt="" /></a>
  143.             <div class="iconfont icon-renminbi1688">33</div>
  144.             <div class="iconfont icon-renminbi1688">58</div>
  145.           </li>
  146.           <li class="item">
  147.             <a href=""><img src="static/img/ms/ms-5.jpg" alt="" /></a>
  148.             <div class="iconfont icon-renminbi1688">138</div>
  149.             <div class="iconfont icon-renminbi1688">158</div>
  150.           </li>
  151.           <li class="item">
  152.             <a href=""><img src="static/img/ms/ms-6.jpg" alt="" /></a>
  153.             <div class="iconfont icon-renminbi1688">2238</div>
  154.             <div class="iconfont icon-renminbi1688">2658</div>
  155.           </li>
  156.         </ul>
  157.       </div>
  158.       <!-- 推荐区 -->
  159.       <h2>猜你喜欢</h2>
  160.       <ul class="xh">
  161.         <li class="item">
  162.           <a href=""><img src="static/img/xh/xh1.webp" alt="" /></a>
  163.           <p>
  164.             芝华仕 头等舱 转角科技布 布艺沙发 现代简约 组合家具 客厅小户型 50397
  165.             玛雅灰面向沙发左脚位30-60天发货
  166.           </p>
  167.           <div class="price">
  168.             <div class="iconfont icon-renminbi1688">4088</div>
  169.             <div>看相似</div>
  170.           </div>
  171.         </li>
  172.         <li class="item">
  173.           <a href=""><img src="static/img/xh/xh2.webp" alt="" /></a>
  174.           <p>
  175.             米家 小米电动牙刷 声波震动 进口纤密软毛 30天超长续航 IPX7防水 T100
  176.             蓝色
  177.           </p>
  178.           <div class="price">
  179.             <div class="iconfont icon-renminbi1688">38</div>
  180.             <div>看相似</div>
  181.           </div>
  182.         </li>
  183.         <li class="item">
  184.           <a href=""><img src="static/img/xh/xh3.webp" alt="" /></a>
  185.           <p>飞利浦（PHILIPS）电动剃须刀刮胡刀自动研磨便携式胡须刀PQ182</p>
  186.           <div class="price">
  187.             <div class="iconfont icon-renminbi1688">88</div>
  188.             <div>看相似</div>
  189.           </div>
  190.         </li>
  191.         <li class="item">
  192.           <a href=""><img src="static/img/xh/xh4.webp" alt="" /></a>
  193.           <p>
  194.             超媛加绒加厚中长款打底衫女冬季新款显瘦大码女装上衣立领外穿连衣裙FF-A015-C#9916你
  195.             黑色 S
  196.           </p>
  197.           <div class="price">
  198.             <div class="iconfont icon-renminbi1688">188</div>
  199.             <div>看相似</div>
  200.           </div>
  201.         </li>
  202.       </ul>
  203.     </div>
  204.     <!-- 页脚 -->
  205.     <div class="footer">
  206.       <div>
  207.         <a href=""><div class="iconfont icon-jingdong1"></div></a>
  208.         <a href="">首页</a>
  209.       </div>
  210.       <div>
  211.         <a href=""><div class="iconfont icon-2"></div></a>
  212.         <a href="">分类</a>
  213.       </div>
  214.       <div>
  215.         <a href=""><div class="iconfont icon-tx"></div></a>
  216.         <a href="">京喜</a>
  217.       </div>
  218.       <div>
  219.         <a href=""><div class="iconfont icon-gouwuche"></div></a>
  220.         <a href="">购物车</a>
  221.       </div>
  222.       <div>
  223.         <a href=""><div class="iconfont icon-lujingbeifen2"></div></a>
  224.         <a href="">未登录</a>
  225.       </div>
  226.       </div>
  227.     </div>
  228.   </body>
  229. </html>

样式初始化代码 reset.css

  1. /* 样式初始化 */
  2. * {
  3.   padding: 0;
  4.   margin: 0;
  5.   box-sizing: border-box;
  6. }
  8. /* 去掉列表的样式 */
  9. li {
  10.   list-style: none;
  11. }
  12. /* 去掉链接下划线 */
  13. a {
  14.   color: #7b7b7b;
  15.   text-decoration: none;
  16. }
  17. /* 设置主题颜色 */
  18. body {
  19.   background-color: #f6f6f6;
  20. }
  22. html {
  23.   font-size: 10px;
  24. }
  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. }
  42. @media screen and (min-width: 800px) {
  43.   html {
  44.     font-size: 18px;
  45.   }
  46. }
  47. @media screen and (min-width: 880px) {
  48.   html {
  49.     font-size: 18px;
  50.   }
  51. }
  52. @media screen and (min-width: 960px) {
  53.   html {
  54.     font-size: 20px;
  55.   }
  56. }
  57. @media screen and (min-width: 1040px) {
  58.   html {
  59.     font-size: 22px;
  60.   }
  61. }
  62. @media screen and (min-width: 1120px) {
  63.   html {
  64.     font-size: 24px;
  65.   }
  66. }
  67. @media screen and (min-width: 1200px) {
  68.   html {
  69.     font-size: 26px;
  70.   }
  71. }
  72. @media screen and (min-width: 1280px) {
  73.   html {
  74.     font-size: 28px;
  75.   }
  76. }

主体区代码 index.css

  1. /* 导入初始化样式表 */
  2. @import "reset.css";
  4. /* 页眉 */
  5. .header {
  6.   background-color: #e43130;
  7.   color: white;
  8.   height: 4.4rem;
  9.   z-index: 100;
  10.   position: fixed;
  11.   top: 0;
  12.   right: 0;
  13.   left: 0;
  14. }
  16. /* body {
  17.   position: relative;
  18. } */
  19. /* 主体 */
  20. .main {
  21.   position: absolute;
  22.   top: 4.4rem;
  23.   bottom: 4.4rem;
  24.   left: 0;
  25.   right: 0;
  26.   /* background-color: rgb(58, 66, 58); */
  27.   /* min-height: 100rem; */
  28.   font-size: 1.4rem;
  29. }
  31. /* 页脚 */
  32. .footer {
  33.   background-color: #fafafa;
  34.   height: 4.4rem;
  35.   color: #666;
  36.   z-index: 100;
  37.   box-shadow: 0 0 3px #999;
  38.   position: fixed;
  39.   bottom: 0;
  40.   right: 0;
  41.   left: 0;
  42.   font-size: 1.4rem;
  43. }

页眉区的代码 header.css

  1. .header {
  2.   display: flex;
  3.   align-items: center;
  4. }
  5. .header a:first-of-type .menu {
  6.   font-size: 2.5rem;
  7.   flex: 1;
  8.   color: white;
  9.   /* 设置文本居中 */
  10.   text-align: center;
  11. }
  12. /* 搜索框 */
  13. .header .search {
  14.   flex: 6;
  15.   background-color: white;
  16.   padding: 0.5rem;
  17.   border-radius: 3rem;
  19.   display: flex;
  20.   align-items: center;
  21. }
  23. .header .search .logo {
  24.   color: #e43130;
  25.   flex: 0 1 4rem;
  26.   /* margin-left: 1rem; */
  27.   /* justify-content: flex-end; */
  28.   /* 水平垂直居中 */
  29.   text-align: center;
  30.   line-height: 2rem;
  31.   font-size: 1.5rem;
  32. }
  34. /* 放大镜 */
  36. .header .search .zoom {
  37.   font-size: 1.5rem;
  38.   color: #ccc;
  39.   flex: 0 1 4rem;
  40.   border-left: 1px solid;
  41.   text-align: center;
  42.   line-height: 2rem;
  43. }
  45. /* 搜索框 */
  46. .header .search .words {
  47.   font-size: 1.5rem;
  48.   flex: auto;
  49.   outline: none;
  50.   border: none;
  51.   color: #aaa;
  52. }
  53. .header .login {
  54.   font-family: Helvetica;
  55.   font-size: 1.5rem;
  56.   flex: 1;
  57.   color: white;
  58.   text-align: center;
  59. }

幻灯片部分代码 slide.css(这个没有 js 处理，只能先做成静态的):

  1. /* 幻灯片，静态 */
  2. .main .solide {
  3.   background-color: white;
  4.   min-height: 14rem;
  5. }
  7. .main .slide .box {
  8.   height: 11rem;
  9.   background-color: #e43130;
  10.   border-bottom-left-radius: 5rem;
  11.   border-bottom-right-radius: 5rem;
  12.   z-index: 1;
  13. }
  15. .main .slide a {
  16.   position: absolute;
  17.   left: 50%;
  18.   top: 0;
  19.   transform: translateX(-50%);
  20. }
  21. .main .slide img {
  22.   /* width: 35rem; */
  23.   height: 14rem;
  24.   border-radius: 1rem;
  25. }
  27. /* 跳转栏 */
  28. .jump {
  29.   height: 3rem;
  30.   display: flex;
  31.   background-color: #e43130;
  32.   padding: 0.2rem;
  33.   z-index: 3;
  34.   position: fixed;
  35.   right: 0;
  36.   top: 5rem;
  37.   border-top-left-radius: 2.5rem;
  38.   border-bottom-left-radius: 2.5rem;
  39.   justify-content: space-around;
  40.   /* opacity: 0.8; */
  41. }
  43. .jump a:first-of-type {
  44.   line-height: 2.5rem;
  45. }
  47. .jump .jd {
  48.   width: 2.5rem;
  49.   height: 2.5rem;
  50.   font-size: 2.5rem;
  51.   background-color: white;
  52.   /* border: 1px solid #fff; */
  53.   border-radius: 50%;
  54.   color: #e43130;
  55.   margin-right: 0.5rem;
  56. }
  58. .jump a:last-of-type {
  59.   color: white;
  60.   font-size: 1.5rem;
  61.   line-height: 3rem;
  62. }

主导航区代码 nav.css:

  1. /* 主导航区 */
  2. .main .nav {
  3.   /* background-color: white; */
  4.   display: flex;
  5.   flex-flow: row wrap;
  6.   position: absolute;
  7.   top: 14rem;
  8.   justify-content: space-between;
  9. }
  11. .main .nav img {
  12.   height: 4rem;
  13.   width: 4rem;
  14. }
  15. .main .nav li {
  16.   /* 每一行显示五个 */
  17.   flex: 1 1 20%;
  18.   display: flex;
  19.   flex-flow: column nowrap;
  20.   align-items: center;
  21. }

正品直邮区代码 mail.css:

  1. .main .zp {
  2.   display: flex;
  3.   background-color: white;
  4.   position: absolute;
  5.   top: 29rem;
  6.   left: 0;
  7.   right: 0;
  8.   padding: 1rem;
  9.   margin: 1rem;
  10.   justify-content: space-between;
  11.   align-items: flex-end;
  12. }
  14. .main .zp img {
  15.   height: 6rem;
  16.   width: 6rem;
  17. }
  19. .main .zp li {
  20.   display: flex;
  21.   flex: 1 1 25%;
  22.   flex-flow: column nowrap;
  23.   align-items: flex-start;
  24. }
  26. .main .zip li a {
  27.   color: #000;
  28. }
  29. .main .zp li:nth-of-type(2) a:first-of-type,
  30. .main .zp li:nth-of-type(3) a:first-of-type {
  31.   font-weight: bold;
  32.   font-size: 1.8rem;
  33.   color: #000;
  34. }

秒杀区代码 ms.css：

  1. /* 秒杀区 */
  2. .main .ms {
  3.   background-color: white;
  4.   position: absolute;
  5.   top: 43rem;
  6.   padding: 1rem;
  7.   margin: 1rem;
  8.   right: 0;
  9.   left: 0;
  10.   border-radius: 1rem;
  11. }
  13. .main .ms .ms-top {
  14.   font-size: 1.3rem;
  15.   height: 3rem;
  16.   display: flex;
  17.   justify-content: space-between;
  18. }
  19. .main .ms .ms-top .left {
  20.   display: flex;
  21. }
  22. .main .ms .ms-top .left .notice {
  23.   font-size: 1.1rem;
  24.   height: 2rem;
  25.   border: 1px solid #e43130;
  26.   border-radius: 2rem;
  27.   margin-left: 1rem;
  29.   display: flex;
  30.   justify-content: center;
  31.   align-items: center;
  32. }
  33. .main .ms .ms-top .left .notice .tips {
  34.   background-color: #e43130;
  35.   color: white;
  36.   border-radius: 2rem;
  37.   padding: 0.3rem 0.5rem;
  38. }
  39. .main .ms .ms-top .left .notice .time {
  40.   padding: 0.3rem 0.5rem;
  41. }
  42. .main .ms .ms-top .right {
  43.   color: #e43130;
  44. }
  46. /* 主体区 */
  47. .main .ms .ms-body {
  48.   display: flex;
  49.   justify-content: space-between;
  50. }
  52. .main .ms .ms-body img {
  53.   height: 5.5rem;
  54.   width: 5.5rem;
  55. }
  57. /* 秒杀价 */
  58. .main .ms .ms-body .item div:first-of-type {
  59.   color: #e43130;
  60.   font-weight: bold;
  61. }
  63. /* 原价 */
  64. .main .ms .ms-body .item div:last-of-type {
  65.   text-decoration: line-through;
  66.   color: #666666;
  67.   text-decoration-color: #666;
  68. }

推荐喜欢区的代码 xh.css:

  1. .main h2 {
  2.   position: absolute;
  3.   top: 58rem;
  4.   left: 0;
  5.   right: 0;
  6.   text-align: center;
  7.   line-height: 4rem;
  8.   margin: 2rem 0;
  9.   font-weight: 500;
  10. }
  11. .main .xh {
  12.   position: absolute;
  13.   font-size: 1rem;
  15.   display: flex;
  16.   flex-flow: row wrap;
  17.   top: 64rem;
  18.   left: 0;
  19.   right: 0;
  20. }
  21. .main .xh .item {
  22.   flex: 1 1 calc(50% - 3rem);
  23.   background-color: white;
  24.   border-radius: 1rem;
  25.   overflow: hidden;
  26.   display: flex;
  27.   flex-flow: column nowrap;
  28.   padding-bottom: 1rem;
  29.   /* text-overflow: hidden; */
  30. }
  31. .main .xh .item:nth-of-type(odd) {
  32.   margin-left: 1rem;
  33.   margin-bottom: 1rem;
  34. }
  35. .main .xh .item:nth-of-type(even) {
  36.   margin: 0 1rem;
  37.   margin-bottom: 1rem;
  38. }
  40. .main .xh .item img {
  41.   width: 100%;
  42.   height: 100%;
  43.   padding: 1rem;
  44. }
  45. .main .xh .item p {
  46.   font-size: 1.3rem;
  47.   height: 3rem;
  48.   overflow: hidden;
  49.   padding: 1rem;
  50. }
  51. .main .xh .item .price {
  52.   height: 3rem;
  53.   display: flex;
  54.   justify-content: space-between;
  55.   align-items: center;
  56. }
  57. .main .xh .item .price div:first-of-type {
  58.   color: #e43130;
  59. }
  60. .main .xh .item .price div:last-of-type {
  61.   height: 2rem;
  62.   color: #666;
  63.   background-color: #ddd;
  64.   border-radius: 1rem;
  65.   padding: 0.2rem 1rem;
  66. }
  68. .main .xh .item div:last-of-type {
  69.   height: 1rem;
  70. }

页脚区代码 footer.css:

  1. .footer {
  2.   display: flex;
  3.   justify-content: space-around;
  4. }
  5. .footer > div {
  6.   display: flex;
  7.   flex-flow: column nowrap;
  8.   align-items: center;
  9.   justify-content: flex-end;
  10. }
  12. .footer div a:first-of-type div {
  13.   font-size: 1.5rem;
  14. }

最后的显示效果如下：
显示效果 1：

显示效果 2：

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post