search

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

仿京东移动端首页

吳
吳 原创
2020年12月24日 07:23:231018浏览

仿京东移动端首页

演示截图

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. }
上一条：分享几个常用函数方法下一条：仿京东商城移动端网页
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多