Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 仿京东移动端首页
Blogger Information
Blog 47
fans 3
comment 0
visits 38102
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
仿京东移动端首页
吳
Original
1016 people have browsed it

仿京东移动端首页

演示截图

Html代码

  1. <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.     <!-- 引入字体图标 -->
  9.     <link rel="stylesheet" href="static/icon-font/iconfont.css">
  10.     <!-- 引入页眉 -->
  11.     <link rel="stylesheet" href="static/css/header.css">
  12.     <!-- 引入主体 -->
  13.     <link rel="stylesheet" href="static/css/main.css">
  14.     <!-- 引入正品直邮 -->
  15.     <link rel="stylesheet" href="static/css/zp.css">
  16.     <!-- 引入秒杀样式表 -->
  17.     <link rel="stylesheet" href="static/css/ms.css">
  18.     <!-- 引入推荐样式表 -->
  19.     <link rel="stylesheet" href="static/css/tj.css">
  20.     <!-- 引入页脚样式表 -->
  21.     <link rel="stylesheet" href="static/css/footer.css">
  22.     <!-- 引入四格样式表 -->
  23.     <link rel="stylesheet" href="static/css/sg.css">
  24. </head>
  26. <body>
  27.     <!-- 页眉 -->
  28.     <div class="header">
  29.         <!-- 菜单图标 -->
  30.         <div class="menu iconfont icon-menu"></div>
  31.         <div class="search">
  32.             <div class="logo">JD</div>
  33.             <div class="zoom iconfont icon-search"></div>
  34.             <input class="words" type="text" value="" placeholder="MacBook Air 2020" />
  35.         </div>
  36.         <a href="#" class="login">登录</a>
  37.     </div>
  38.     <!-- 主体 -->
  39.     <div class="main">
  40.         <!-- 导航 -->
  41.         <ul class="nav">
  42.             <li>
  43.                 <a href="JavaScript:viod(0);"><img src="static/images/dh/dh1.png" /></a>
  44.                 <a href="">京东超市</a>
  45.             </li>
  46.             <li>
  47.                 <a href="JavaScript:viod(0);"><img src="static/images/dh/dh2.png" /></a>
  48.                 <a href="">数码电器</a>
  49.             </li>
  50.             <li>
  51.                 <a href="JavaScript:viod(0);"><img src="static/images/dh/dh3.png" /></a>
  52.                 <a href="">京东服饰</a>
  53.             </li>
  54.             <li>
  55.                 <a href="JavaScript:viod(0);"><img src="static/images/dh/dh4.png" /></a>
  56.                 <a href="">京东生鲜</a>
  57.             </li>
  58.             <li>
  59.                 <a href="JavaScript:viod(0);"><img src="static/images/dh/dh5.png" /></a>
  60.                 <a href="">京东到家</a>
  61.             </li>
  62.             <li>
  63.                 <a href="JavaScript:viod(0);"><img src="static/images/dh/dh6.png" /></a>
  64.                 <a href="">充值缴费</a>
  65.             </li>
  66.             <li>
  67.                 <a href="JavaScript:viod(0);"><img src="static/images/dh/dh7.png" /></a>
  68.                 <a href="">9.9拼</a>
  69.             </li>
  70.             <li>
  71.                 <a href="JavaScript:viod(0);"><img src="static/images/dh/dh8.png" /></a>
  72.                 <a href="">领券</a>
  73.             </li>
  74.             <li>
  75.                 <a href="JavaScript:viod(0);"><img src="static/images/dh/dh9.png" /></a>
  76.                 <a href="">借钱</a>
  77.             </li>
  78.             <li>
  79.                 <a href="JavaScript:viod(0);"><img src="static/images/dh/dh10.png" /></a>
  80.                 <a href="">PLUS会员</a>
  81.             </li>
  82.         </ul>
  83.         <!-- 正品直邮 -->
  84.         <ul class="zp">
  85.             <li class="zpone">
  86.                 <a href="">正品直郵</a>
  87.                 <a href="javascript:viod(0);"><img src="static/images/zp/zp1.dpg" /></a>
  88.             </li>
  89.             <li class="hh">
  90.                 <a href="">来电好货</a>
  91.                 <a href="">3C大放价</a>
  92.                 <a href="javascript:viod(0);"><img src="static/images/zp/zp2.dpg" /></a>
  93.             </li>
  94.             <li class="gc">
  95.                 <a href="">国潮风尚</a>
  96.                 <a href="">国货正当时</a>
  97.                 <a href="javascript:viod(0);"><img src="static/images/zp/zp3.dpg" /></a>
  98.             </li>
  99.             <li>
  100.                 <a href="">都是你爱的</a>
  101.                 <a href="javascript:viod(0);"><img src="static/images/zp/zp4.dpg" /></a>
  102.             </li>
  103.         </ul>
  104.         <!-- 秒杀活动 -->
  105.         <div class="ms">
  106.             <div class="ms-top">
  107.                 <div class="left">
  108.                     <div class="title">京东秒杀</div>
  109.                     <div class="notice">
  110.                         <div class="tips">18点专场</div>
  111.                         <div class="time">18:00:00</div>
  112.                     </div>
  113.                 </div>
  114.                 <div class="right">更多秒杀</div>
  115.             </div>
  116.             <!-- 秒杀主体区 -->
  117.             <ul class="ms-body">
  118.                 <li class="item">
  119.                     <a href=""><img src="static/images/ms/ms1.dpg" /></a>
  120.                     <div class="iconfont icon-rmb">338</div>
  121.                     <div class="iconfont icon-rmb">558</div>
  122.                 </li>
  123.                 <li class="item">
  124.                     <a href=""><img src="static/images/ms/ms2.dpg" /></a>
  125.                     <div class="iconfont icon-rmb">6266</div>
  126.                     <div class="iconfont icon-rmb">7399</div>
  127.                 </li>
  128.                 <li class="item">
  129.                     <a href=""><img src="static/images/ms/ms3.dpg" /></a>
  130.                     <div class="iconfont icon-rmb">1818</div>
  131.                     <div class="iconfont icon-rmb">2199</div>
  132.                 </li>
  133.                 <li class="item">
  134.                     <a href=""><img src="static/images/ms/ms4.dpg" /></a>
  135.                     <div class="iconfont icon-rmb">379</div>
  136.                     <div class="iconfont icon-rmb">430</div>
  137.                 </li>
  138.                 <li class="item">
  139.                     <a href=""><img src="static/images/ms/ms5.dpg" /></a>
  140.                     <div class="iconfont icon-rmb">1399</div>
  141.                     <div class="iconfont icon-rmb">1799</div>
  142.                 </li>
  143.                 <li class="item">
  144.                     <a href=""><img src="static/images/ms/ms6.dpg" /></a>
  145.                     <div class="iconfont icon-rmb">4690</div>
  146.                     <div class="iconfont icon-rmb">5990</div>
  147.                 </li>
  148.             </ul>
  149.         </div>
  150.         <!-- 四格推荐 -->
  151.         <div class="sige">
  152.             <ul class="sige-top">
  153.                 <li class="item">
  154.                     <a href="">
  155.                         <div class="iie">
  156.                             <img src="static/images/sg/1.dpg" />
  157.                         </div>
  158.                         <div class="green">白条6期免息</div>
  159.                         <div class="title">珠宝钟表</div>
  160.                     </a>
  161.                 </li>
  162.                 <li class="item">
  163.                     <a href="">
  164.                         <div class="iie">
  165.                             <img src="static/images/sg/1.dpg" />
  166.                         </div>
  167.                         <div class="green">Apple大牌日</div>
  168.                         <div class="title">手机礼遇节</div>
  169.                     </a>
  170.                 </li>
  171.                 <li class="item">
  172.                     <a href="">
  173.                         <div class="iie">
  174.                             <img src="static/images/sg/1.dpg" />
  175.                         </div>
  176.                         <div class="green">圣诞狂欢夜</div>
  177.                         <div class="title">玩具乐器</div>
  178.                     </a>
  179.                 </li>
  180.                 <li class="item">
  181.                     <a href="">
  182.                         <div class="iie">
  183.                             <img src="static/images/sg/1.dpg" />
  184.                         </div>
  185.                         <div class="green">每满100减50</div>
  186.                         <div class="title">图书圣诞购</div>
  187.                     </a>
  188.                 </li>
  189.             </ul>
  190.         </div>
  191.         <!-- 推荐 -->
  192.         <h2 class="title">猜你喜欢</h2>
  193.         <ul class="tj">
  194.             <li class="item">
  195.                 <a href=""><img src="static/images/tj/1.webp" /></a>
  196.                 <p>卡帝乐鳄鱼 CARTELO 男鞋英伦时尚一脚蹬套脚中老年爸爸商务休闲皮鞋男 6931 黑色 38</p>
  197.                 <div class="price">
  198.                     <div class="iconfont icon-rmb">238</div>
  199.                     <div>看相似</div>
  200.                 </div>
  201.             </li>
  202.             <li class="item">
  203.                 <a href=""><img src="static/images/tj/2.webp" /></a>
  204.                 <p>衣柜现代简约出租房钢管加粗加固加厚简易布衣柜家用卧室开门式 BX1安阁小鹿 宽85 (收藏加购优先发货)</p>
  205.                 <div class="price">
  206.                     <div class="iconfont icon-rmb">349</div>
  207.                     <div>看相似</div>
  208.                 </div>
  209.             </li>
  210.             <li class="item">
  211.                 <a href=""><img src="static/images/tj/1.webp" /></a>
  212.                 <p>卡帝乐鳄鱼 CARTELO 男鞋英伦时尚一脚蹬套脚中老年爸爸商务休闲皮鞋男 6931 黑色 38</p>
  213.                 <div class="price">
  214.                     <div class="iconfont icon-rmb">238</div>
  215.                     <div>看相似</div>
  216.                 </div>
  217.             </li>
  218.             <li class="item">
  219.                 <a href=""><img src="static/images/tj/1.webp" /></a>
  220.                 <p>卡帝乐鳄鱼 CARTELO 男鞋英伦时尚一脚蹬套脚中老年爸爸商务休闲皮鞋男 6931 黑色 38</p>
  221.                 <div class="price">
  222.                     <div class="iconfont icon-rmb">238</div>
  223.                     <div>看相似</div>
  224.                 </div>
  225.             </li>
  226.         </ul>
  228.     </div>
  229.     <!-- 页脚 -->
  230.     <div class="footer">
  231.         <div>
  232.             <div class="iconfont icon-home"></div>
  233.             <span>首页</span>
  234.         </div>
  235.         <div>
  236.             <div class="iconfont icon-layers"></div>
  237.             <span>分类</span>
  238.         </div>
  239.         <div>
  240.             <div class="iconfont icon-kehuguanli"></div>
  241.             <span>京喜</span>
  242.         </div>
  243.         <div>
  244.             <div class="iconfont icon-shopping-cart"></div>
  245.             <span>购物车</span>
  246.         </div>
  247.         <div>
  248.             <div class="iconfont icon-user"></div>
  249.             <span>我的</span>
  250.         </div>
  251.     </div>
  252. </body>
  254. </html>

CSS代码

  • 页眉
  1. .header {
  2.     display: flex;
  3.     align-items: center;
  4. }
  7. /* 登录按钮 */
  9. .header .login {
  10.     color: #fff;
  11.     text-align: center;
  12.     flex: 1;
  13.     font-size: 1.4rem;
  14.     text-decoration: none;
  15. }
  17. .header .menu {
  18.     text-align: center;
  19.     flex: 1;
  20.     font-size: 2.5rem;
  21. }
  23. .header .search {
  24.     display: flex;
  25.     flex: 6;
  26.     padding: 0.5rem;
  27.     border-radius: 3rem;
  28.     background-color: #fff;
  29. }
  31. .header .search .logo {
  32.     color: #e43130;
  33.     flex: 0 1 4rem;
  34.     text-align: center;
  35.     line-height: 2rem;
  36. }
  38. .header .search .zoom {
  39.     color: #ccc;
  40.     flex: 0 1 4rem;
  41.     /* 分割线 */
  42.     border-left: 1px solid;
  43.     text-align: center;
  44.     line-height: 2rem;
  45. }
  47. .header .search .words {
  48.     flex: auto;
  49.     border: none;
  50.     outline: none;
  51.     color: #aaa;
  52. }
  • 主体
  1. .main .nav {
  2.     display: flex;
  3.     padding: 1rem;
  4.     /* 允许换行 */
  5.     flex-flow: row wrap;
  6.     justify-content: space-between;
  7. }
  9. .main .nav img {
  10.     height: 4rem;
  11.     width: 4rem;
  12. }
  14. .main .nav li {
  15.     /* 每一行显示5个，100%来分配，就是20% */
  16.     flex: 1 1 20%;
  17.     padding: 1rem;
  18.     display: flex;
  19.     flex-flow: column nowrap;
  20.     align-items: center;
  21. }
  • 页脚
  1. .footer {
  2.     display: flex;
  3.     justify-content: space-around;
  4.     align-items: center;
  5.     overflow: hidden;
  6. }
  8. .footer>div {
  9.     display: flex;
  10.     flex-flow: column nowrap;
  11.     align-items: center;
  12. }
  14. .footer>div>.iconfont {
  15.     font-size: 2rem;
  16. }
  18. .fonter>div>span {
  19.     font-size: 1.2rem;
  20. }
  • 秒杀
  1. .main .ms {
  2.     background-color: #fff;
  3.     padding: 1rem;
  4.     margin: 1rem;
  5.     border-radius: 1rem;
  6. }
  8. .main .ms .ms-top {
  9.     display: flex;
  10.     font-size: 1.3rem;
  11.     height: 3rem;
  12.     justify-content: space-between;
  13. }
  15. .main .ms .ms-top .left {
  16.     display: flex;
  17. }
  19. .main .ms .ms-top .left .notice {
  20.     font-size: 1.1rem;
  21.     height: 2rem;
  22.     border: 1px solid #e43130;
  23.     border-radius: 2rem;
  24.     margin-left: 1rem;
  25.     display: flex;
  26.     justify-content: center;
  27.     align-items: center;
  28. }
  30. .main .ms .ms-top .left .notice .tips {
  31.     background-color: #e43130;
  32.     color: #fff;
  33.     border-radius: 2rem;
  34.     padding: 0.3rem 0.5rem;
  35. }
  37. .main .ms .ms-top .left .notice .time {
  38.     padding: 0.3rem 0.5rem;
  39. }
  41. .main .ms .ms-top .right {
  42.     color: #e43130;
  43. }
  46. /* 主体 */
  48. .main .ms .ms-body {
  49.     display: flex;
  50.     justify-content: space-between;
  51. }
  53. .main .ms .ms-body img {
  54.     height: 6.6rem;
  55.     width: 6.6rem;
  56. }
  59. /* 秒杀价 */
  61. .main .ms .ms-body .item div:first-of-type {
  62.     color: #e43130;
  63.     font-weight: bolder;
  64. }
  66. .main .ms .ms-body .item div:last-of-type {
  67.     color: #666666;
  68.     text-decoration: line-through;
  69.     text-decoration-color: #666666;
  70. }
  • 四格
  1. .main .sige {
  2.     display: flex;
  3.     color: #fff;
  4. }
  6. .main .sige .sige-top .item {
  7.     background-color: #e43130;
  8.     display: flex;
  9.     max-height: 14rem;
  10.     flex-flow: row wrap;
  11.     border-radius: 1rem;
  12.     padding: 0.5rem;
  13.     margin: 0.5rem;
  14.     justify-content: center;
  15.     align-items: center;
  16.     position: relative;
  17.     flex: 1 1 25%;
  18. }
  20. .main .sige .sige-top .item .iie {
  21.     background-color: #fff;
  22.     min-height: 8rem;
  23.     min-width: 8rem;
  24.     margin-top: 0.5rem;
  25.     padding: 0.5rem;
  26.     border-radius: 0.8rem;
  27. }
  29. .main .sige .sige-top .item img {
  30.     height: 100%;
  31.     width: 100%;
  32.     border-radius: 1rem;
  33. }
  35. .main .sige .sige-top {
  36.     display: flex;
  37.     flex: 1 1 25%;
  38.     padding: 1rem;
  39. }
  41. .main .sige .sige-top .item div {
  42.     display: flex;
  43.     color: #fff;
  44.     flex-flow: column wrap;
  45. }
  47. .main .sige .sige-top .item .green {
  48.     background-color: #1fdae0;
  49.     border-radius: 1rem;
  50.     position: relative;
  51.     text-align: center;
  52.     bottom: 1.5rem;
  53. }
  55. .main .sige .sige-top .item .title {
  56.     font-size: 1.5rem;
  57.     position: relative;
  58.     top: -1.2rem;
  59.     display: flex;
  60. }
  • 猜你喜欢
  1. .main .title {
  2.     text-align: center;
  3.     height: 4rem;
  4.     color: #555;
  5.     font-weight: 500;
  6. }
  8. .main .tj {
  9.     font-size: 1rem;
  10.     display: flex;
  11.     /* 允许换行 */
  12.     flex-flow: row wrap;
  13. }
  15. .main .tj .item {
  16.     flex: 1 1 calc(50% - 2rem);
  17.     background-color: #fff;
  18.     overflow: hidden;
  19.     display: flex;
  20.     flex-flow: column nowrap;
  21.     margin-left: 1rem;
  22.     margin-bottom: 1rem;
  23.     padding-bottom: 1rem;
  24.     border-radius: 1rem;
  25. }
  27. .main .tj .item img {
  28.     width: 100%;
  29.     height: 100%;
  30.     /* border-radius: 1rem; */
  31. }
  33. .main .tj .item {
  34.     padding: 1rem;
  35. }
  37. .main .tj .price {
  38.     display: flex;
  39.     justify-content: space-between;
  40. }
  42. .main .tj .price div:first-of-type {
  43.     color: red;
  44. }
  46. .main .tj .price div:last-of-type {
  47.     color: #666;
  48.     background-color: #fcf5f5;
  49.     border-top-left-radius: 1rem;
  50.     border-bottom-left-radius: 1rem;
  51.     padding: 0.2rem 1rem;
  52. }
  • 正品直邮
  1. .main .zp {
  2.     margin-top: 1rem;
  3.     padding: 1rem;
  4.     margin: 1rem;
  5.     display: flex;
  6.     background-color: #fff;
  7.     border-radius: 0.5rem;
  8.     flex-flow: row nowrap;
  9.     justify-content: space-between;
  10. }
  12. .main .zp img {
  13.     height: 6.6rem;
  14.     width: 6.6rem;
  15. }
  17. .main .zp li {
  18.     display: flex;
  19.     flex-flow: row wrap;
  20.     justify-content: center;
  21.     flex: 1 1 25%;
  22. }
  24. .main .zp .zpone a:first-of-type {
  25.     padding: 1rem;
  26.     color: #222222;
  27.     display: flex;
  28.     align-self: flex-end;
  29. }
  31. .main .zp .hh a:first-of-type {
  32.     font-size: 1.8rem;
  33.     color: black;
  34.     font-weight: bold;
  35. }
  37. .main .zp .hh a:nth-of-type(2) {
  38.     margin-right: 1rem;
  39. }
  41. .main .zp .gc a:first-of-type {
  42.     font-size: 1.8rem;
  43.     color: black;
  44.     font-weight: bold;
  45. }
  47. .main .zp .gc a:nth-of-type(2) {
  48.     margin-right: 0.1rem;
  49. }
  51. .main .zp li:last-of-type a:first-of-type {
  52.     display: flex;
  53.     align-self: center;
  54.     color: #222222;
  55. }
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