Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 仿京东移动端首页参考
Blogger Information
Blog 8
fans 1
comment 0
visits 6721
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
仿京东移动端首页参考
JOAblog
Original
586 people have browsed it

仿京东移动端首页

效果图示：

html代码实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <link rel="stylesheet" href="/img/font_icon/iconfont.css" />
  8.     <link rel="stylesheet" href="/css/index.css" />
  10.     <title>多快好省就上京东购物</title>
  11.   </head>
  12.   <body>
  13.     <!-- 页眉 -->
  14.     <div class="head">
  15.       <!-- 顶部左侧图标按钮 -->
  16.       <div class="caidan iconfont icon-gengduo"></div>
  17.       <!-- 中部搜索 -->
  18.       <div class="sousuo">
  19.         <!-- 文字LOGOJD -->
  20.         <p>JD</p>
  21.         <!-- 搜索图标 -->
  22.         <div class="sousuotubiao iconfont icon-sousuo"></div>
  23.         <!-- 搜索输入框 -->
  24.         <input
  25.           type="text"
  26.           name="sousuo"
  27.           id="sousuo"
  28.           placeholder="输入想要购买的商品"
  29.         />
  30.       </div>
  31.       <!-- 顶部右侧登录 -->
  32.       <div class="login"><span>登录</span></div>
  33.     </div>
  35.     <!-- 主体 -->
  36.     <div class="main">
  37.       <!-- banner -->
  38.       <div class="banner"><img src="/img/banner.png" alt="" /></div>
  39.       <!-- 主体菜单 -->
  40.       <div class="maincd">
  41.         <a href=""
  42.           ><img src="/img/jdicon/1.png" alt="" /><span>京东超市</span></a
  43.         >
  44.         <a href=""
  45.           ><img src="/img/jdicon/2.png" alt="" /><span>数码电器</span></a
  46.         >
  47.         <a href=""
  48.           ><img src="/img/jdicon/3.png" alt="" /><span>京东服饰</span></a
  49.         ><a href=""
  50.           ><img src="/img/jdicon/4.png" alt="" /><span>京东生鲜</span></a
  51.         >
  52.         <a href=""
  53.           ><img src="/img/jdicon/5.png" alt="" /><span>京东到家</span></a
  54.         >
  55.         <a href=""
  56.           ><img src="/img/jdicon/1.png" alt="" /><span>充值缴费</span></a
  57.         ><a href=""
  58.           ><img src="/img/jdicon/2.png" alt="" /><span>9.9元拼</span></a
  59.         >
  60.         <a href=""><img src="/img/jdicon/4.png" alt="" /><span>领券</span></a>
  61.         <a href=""><img src="/img/jdicon/3.png" alt="" /><span>领津贴</span></a
  62.         ><a href=""
  63.           ><img src="/img/jdicon/2.png" alt="" /><span>PLUS会员</span></a
  64.         >
  65.       </div>
  66.       <!-- 秒杀 -->
  67.       <div class="miaosha">
  68.         <div class="miaoshatop">
  69.           <a href="">
  70.             <div><p>京东秒杀</p></div>
  71.             <div>14点场</div>
  72.             <div>
  73.               <div>00</div>
  74.               <span>:</span>
  75.               <div>13</div>
  76.               <span>:</span>
  77.               <div>22</div>
  78.             </div>
  79.           </a>
  80.           <a href="">更多秒杀</a>
  81.         </div>
  82.         <div class="miaoshamain">
  83.           <ur class="miaoshaul">
  84.             <li class="miaoshali">
  85.               <div><img src="/img/jdicon/1.jpg" alt="" /></div>
  86.               <div>
  87.                 <span><em>￥</em> 11</span
  88.                 ><span
  89.                   ><em>￥</em> 22
  90.                   <hr
  91.                 /></span>
  92.               </div>
  93.             </li>
  94.             <li class="miaoshali">
  95.               <div><img src="/img/jdicon/1.jpg" alt="" /></div>
  96.               <div>
  97.                 <span><em>￥</em> 33</span
  98.                 ><span
  99.                   ><em>￥</em> 44
  100.                   <hr
  101.                 /></span>
  102.               </div>
  103.             </li>
  104.             <li class="miaoshali">
  105.               <div><img src="/img/jdicon/1.jpg" alt="" /></div>
  106.               <div>
  107.                 <span><em>￥</em> 55</span
  108.                 ><span
  109.                   ><em>￥</em> 66
  110.                   <hr
  111.                 /></span>
  112.               </div>
  113.             </li>
  114.             <li class="miaoshali">
  115.               <div><img src="/img/jdicon/1.jpg" alt="" /></div>
  116.               <div>
  117.                 <span><em>￥</em> 77</span
  118.                 ><span
  119.                   ><em>￥</em> 88
  120.                   <hr
  121.                 /></span>
  122.               </div>
  123.             </li>
  124.             <li class="miaoshali">
  125.               <div><img src="/img/jdicon/1.jpg" alt="" /></div>
  126.               <div>
  127.                 <span> <em>￥</em> 99</span
  128.                 ><span
  129.                   ><em>￥</em> 110
  130.                   <hr
  131.                 /></span>
  132.               </div>
  133.             </li>
  134.             <li class="miaoshali">
  135.               <div><img src="/img/jdicon/1.jpg" alt="" /></div>
  136.               <div>
  137.                 <span><em>￥</em> 120</span
  138.                 ><span
  139.                   ><em>￥</em> 130
  140.                   <hr
  141.                 /></span>
  142.               </div>
  143.             </li>
  144.           </ur>
  145.         </div>
  146.       </div>
  148.       <!-- 商品区 -->
  149.       <div class="sp">
  150.         <ul class="spul">
  151.           <li class="spli">
  152.             <div class="spimg">
  153.               <img src="/img/jdicon/2.jpg" alt="" />
  154.             </div>
  155.             <div class="sptext">
  156.               BOTTLED
  157.               JOY运动水壶健身水杯大容量承认便携户外便携户外便携户外便携户外便携户外...
  158.             </div>
  159.             <div class="splook">
  160.               <a href="" class="spjg">￥159</a>
  161.               <a href="" class="spxs">看相似</a>
  162.             </div>
  163.           </li>
  164.           <li class="spli">
  165.             <div class="spimg">
  166.               <img src="/img/jdicon/2.jpg" alt="" />
  167.             </div>
  168.             <div class="sptext">
  169.               BOTTLED
  170.               JOY运动水壶健身水杯大容量承认便携户外便携户外便携户外便携户外便携户外...
  171.             </div>
  172.             <div class="splook">
  173.               <a href="" class="spjg">￥159</a>
  174.               <a href="" class="spxs">看相似</a>
  175.             </div>
  176.           </li>
  177.           <li class="spli">
  178.             <div class="spimg">
  179.               <img src="/img/jdicon/2.jpg" alt="" />
  180.             </div>
  181.             <div class="sptext">
  182.               BOTTLED
  183.               JOY运动水壶健身水杯大容量承认便携户外便携户外便携户外便携户外便携户外...
  184.             </div>
  185.             <div class="splook">
  186.               <a href="" class="spjg">￥159</a>
  187.               <a href="" class="spxs">看相似</a>
  188.             </div>
  189.           </li>
  190.           <li class="spli">
  191.             <div class="spimg">
  192.               <img src="/img/jdicon/2.jpg" alt="" />
  193.             </div>
  194.             <div class="sptext">
  195.               BOTTLED
  196.               JOY运动水壶健身水杯大容量承认便携户外便携户外便携户外便携户外便携户外...
  197.             </div>
  198.             <div class="splook">
  199.               <a href="" class="spjg">￥159</a>
  200.               <a href="" class="spxs">看相似</a>
  201.             </div>
  202.           </li>
  203.           <li class="spli">
  204.             <div class="spimg">
  205.               <img src="/img/jdicon/2.jpg" alt="" />
  206.             </div>
  207.             <div class="sptext">
  208.               BOTTLED
  209.               JOY运动水壶健身水杯大容量承认便携户外便携户外便携户外便携户外便携户外...
  210.             </div>
  211.             <div class="splook">
  212.               <a href="" class="spjg">￥159</a>
  213.               <a href="" class="spxs">看相似</a>
  214.             </div>
  215.           </li>
  216.           <li class="spli">
  217.             <div class="spimg">
  218.               <img src="/img/jdicon/2.jpg" alt="" />
  219.             </div>
  220.             <div class="sptext">
  221.               BOTTLED
  222.               JOY运动水壶健身水杯大容量承认便携户外便携户外便携户外便携户外便携户外...
  223.             </div>
  224.             <div class="splook">
  225.               <a href="" class="spjg">￥159</a>
  226.               <a href="" class="spxs">看相似</a>
  227.             </div>
  228.           </li>
  229.           <li class="spli">
  230.             <div class="spimg">
  231.               <img src="/img/jdicon/2.jpg" alt="" />
  232.             </div>
  233.             <div class="sptext">
  234.               BOTTLED
  235.               JOY运动水壶健身水杯大容量承认便携户外便携户外便携户外便携户外便携户外...
  236.             </div>
  237.             <div class="splook">
  238.               <a href="" class="spjg">￥159</a>
  239.               <a href="" class="spxs">看相似</a>
  240.             </div>
  241.           </li>
  242.           <li class="spli">
  243.             <div class="spimg">
  244.               <img src="/img/jdicon/2.jpg" alt="" />
  245.             </div>
  246.             <div class="sptext">
  247.               BOTTLED
  248.               JOY运动水壶健身水杯大容量承认便携户外便携户外便携户外便携户外便携户外...
  249.             </div>
  250.             <div class="splook">
  251.               <a href="" class="spjg">￥159</a>
  252.               <a href="" class="spxs">看相似</a>
  253.             </div>
  254.           </li>
  255.           <li class="spli">
  256.             <div class="spimg">
  257.               <img src="/img/jdicon/2.jpg" alt="" />
  258.             </div>
  259.             <div class="sptext">
  260.               BOTTLED
  261.               JOY运动水壶健身水杯大容量承认便携户外便携户外便携户外便携户外便携户外...
  262.             </div>
  263.             <div class="splook">
  264.               <a href="" class="spjg">￥159</a>
  265.               <a href="" class="spxs">看相似</a>
  266.             </div>
  267.           </li>
  268.           <li class="spli">
  269.             <div class="spimg">
  270.               <img src="/img/jdicon/2.jpg" alt="" />
  271.             </div>
  272.             <div class="sptext">
  273.               BOTTLED
  274.               JOY运动水壶健身水杯大容量承认便携户外便携户外便携户外便携户外便携户外...
  275.             </div>
  276.             <div class="splook">
  277.               <a href="" class="spjg">￥159</a>
  278.               <a href="" class="spxs">看相似</a>
  279.             </div>
  280.           </li>
  281.         </ul>
  282.       </div>
  283.     </div>
  285.     <!-- 页脚 -->
  286.     <div class="footer">
  287.       <ur>
  288.         <li class="iconfont icon-jingdong">
  289.           <span>首页</span>
  290.         </li>
  291.         <li class="iconfont icon-sort"><span>分类</span></li>
  292.         <li class="iconfont icon-niu"><span>京喜</span></li>
  293.         <li class="iconfont icon-gwc"><span>购物车</span></li>
  294.         <li class="iconfont icon-denglu"><span>未登录</span></li>
  295.       </ur>
  296.     </div>
  297.   </body>
  298. </html>

index.css代码：

  1. @import url(/css/head.css);
  2. @import url(/css/footer.css);
  3. @import url(/css/main.css);
  4. *{
  5.     padding: 0;margin: 0;box-sizing: border-box;
  6. }
  7. :root{
  8.     font-size: 10px;
  9. }
  10. body{
  11.     font-size: 1.6rem;
  12. }

head.css代码：

  1. .head {
  2.   background-color: #c82519;
  3.   height: 4.5rem;
  4.   color: white;
  5.   position: fixed;
  6.   top: 0;
  7.   left: 0;
  8.   right: 0;
  9.   display: flex;
  10.   z-index: 9;
  11. }
  12. .head .caidan {
  13.   font-size: 2rem;
  14.   text-align: center;
  15.   flex: 1;
  16.   position: relative;
  17.   top: 1rem;
  18. }
  19. .head .sousuo {
  20.   flex: 6;
  21.   display: flex;
  22.   background-color: white;
  23.   color: #c82519;
  24.   font-size: 2rem;
  25.   justify-content: space-evenly;
  26.   border-radius: 2.5rem;
  27.   height: 3rem;
  28.   position: relative;
  29.   top: 0.8rem;
  30.   align-items: center;
  31. }
  32. .head .sousuo > p {
  33.   font-weight: bolder;
  34.   color: #e93b3d;
  35. }
  36. .head .sousuo .sousuotubiao {
  37.   font-size: 2rem;
  38.   color: #dbdbdb;
  39.   border-left: 1px solid #dddddd;
  40.   padding-left: 1rem;
  41. }
  42. .head .sousuo > input {
  43.   border: none;
  44.   outline: medium;
  45. }
  46. .head .login {
  47.   font-size: 1.5rem;
  48.   text-align: center;
  49.   flex: 1;
  50.   position: relative;
  51.   top: 1rem;
  52. }

footer.css代码：

  1. li{
  2.     list-style: none;
  3. }
  4. .footer{
  5.     height: 5rem;
  6.     background-color: #FFFFFF;
  7.     position: fixed;
  8.     bottom: 0;
  9.     right: 0;
  10.     left: 0;
  11.     box-shadow: 0 0 5px #E2DFDF;
  12.     z-index: 1;
  14. }
  15. .footer ur{
  16.     display: flex;
  17.     justify-content:space-around;
  18.     position:relative;
  19.     top: 1rem;
  21. }
  22. .footer ur li{
  23.     flex-direction: column;
  24.     display: flex;
  25.     align-items: center;
  26.     font-size: 2rem;
  27.     color: #8B8B8B;
  28.     position:relative;
  29.     bottom: 1rem;
  30.     padding-top: 6px;
  31. }
  32. .footer ur li:hover{
  33.     color: red;
  34. }
  35. .footer ur li>span{
  36.     font-size: 0.5rem;   
  37. }

main.css代码：

  1. @import url(/css/maincd.css);
  2. @import url(/css/sp.css);
  3. .main {
  4.   z-index: -1;
  5.   margin-top: 4.5rem;
  6.   margin-bottom: 5rem;
  7.   background-color: #f6f6f6;
  8. }
  9. .main .banner {
  10.   background-color: #c82519;
  11.   height: 10rem;
  12.   border-bottom-left-radius: 5rem;
  13.   border-bottom-right-radius: 5rem;
  14. }
  15. .main .banner > img {
  16.   height: 14rem;
  17.   width: 35.5rem;
  18.   max-width: 40rem;
  19.   border-radius: 1rem;
  20.   position: absolute;
  21.   left: 1rem;
  23.   top: 4.5rem;
  24. }

maincd.css代码：

  1. .main .maincd {
  2.   margin-top: 5rem;
  3.   display: flex;
  4.   flex-wrap: wrap;
  5.   justify-content: space-around;
  6.   margin-bottom: 2rem;
  7. }
  8. .main .maincd > a {
  9.   display: flex;
  10.   flex-direction: column;
  11.   text-decoration: none;
  12.   color: #7e7e7e;
  13.   align-items: center;
  14.   margin-bottom: 1rem;
  15.   width: 6.6rem;
  16. }
  17. .main .maincd > a > span {
  18.   font-size: 1.2rem;
  19.   margin-top: 0.6rem;
  20. }
  21. .main .maincd > a > img {
  22.   width: 4rem;
  23.   height: 4rem;
  24.   text-align: center;
  25. }
  26. .miaosha {
  27.   background-color: #fff;
  28.   position: relative;
  29.   left: 0;
  30.   right: 0;
  31.   height: 13.5rem;
  32.   margin-left: 1rem;
  33.   margin-right: 1rem;
  34.   border-radius: 1rem;
  35.   margin-bottom: 1rem;
  36.   display: flex;
  37.   flex-direction: column;
  38.   /* text-decoration: none; */
  39. }
  40. .miaosha .miaoshatop {
  41.   display: flex;
  42.   justify-content: space-between;
  43. }
  44. .miaosha .miaoshatop > a {
  45.   text-decoration: none;
  46.   /* color: #222222; */
  47. }
  48. .miaosha .miaoshatop > a:first-of-type {
  49.   color: #222;
  50.   flex: 2;
  51.   margin-top: 1rem;
  52.   margin-left: 1rem;
  53.   font-size: 1.4rem;
  54.   display: flex;
  55.   justify-content: space-between;
  56. }
  57. .miaosha .miaoshatop > a:last-of-type {
  58.   color: #f23121;
  59.   flex: 2;
  60.   margin-right: 1rem;
  61.   margin-top: 1rem;
  63.   font-size: 1.2rem;
  64.   display: flex;
  65.   justify-content: flex-end;
  66. }
  67. .miaosha .miaoshatop > a:first-of-type > div:first-of-type + div {
  68.   color: red;
  69. }
  70. .miaosha .miaoshatop > a:first-of-type > div:first-of-type + div + div {
  71.   display: flex;
  72.   justify-content: flex-end;
  73. }
  74. .miaosha .miaoshatop > a:first-of-type > div:first-of-type + div + div > span {
  75.   color: red;
  76. }
  77. .miaosha .miaoshatop > a:first-of-type > div:first-of-type + div + div > div {
  78.   background-color: red;
  79.   color: white;
  80.   border-radius: 0.5rem;
  81.   width: auto;
  82. }
  83. .miaoshamain .miaoshaul {
  84.   display: flex;
  85.   justify-content: space-between;
  86.   text-align: center;
  87. }
  88. .miaoshamain .miaoshaul .miaoshali {
  89.   width: 5.7rem;
  90. }
  91. .miaoshamain .miaoshaul .miaoshali > div > img {
  92.   height: 5.5rem;
  93.   width: 5.5rem;
  94.   margin-top: 1rem;
  95.   /* margin-bottom: 1rem; */
  96. }
  97. .miaoshamain .miaoshaul .miaoshali > div:last-of-type {
  98.   display: flex;
  99.   flex-direction: column;
  100.   font-size: 1rem;
  101. }
  102. .miaoshamain .miaoshaul .miaoshali > div:last-of-type > span:first-of-type {
  103.   color: red;
  104. }
  105. .miaoshamain .miaoshaul .miaoshali > div:last-of-type > span:last-of-type {
  106.   color: #999;
  107.   position: relative;
  108. }
  109. .miaoshamain .miaoshaul .miaoshali > div:last-of-type > span:last-of-type > hr {
  110.   width: 3rem;
  111.   position: absolute;
  112.   top: 1rem;
  113.   left: 2rem;
  114. }

sp.css代码：

  1. .sp .spul {
  2.   display: flex;
  3.   flex-wrap: wrap;
  4. }
  5. .sp .spul .spli {
  6.   width: 17rem;
  7.   min-height: 26rem;
  8.   background-color: #fff;
  9.   border-radius: 1rem;
  10.   margin-left: 1rem;
  11.   margin-top: 1rem;
  12. }
  14. .sp .spul .spli .spimg > img {
  15.   width: 17rem;
  16.   border-radius: 1rem 1rem 0 0;
  17. }
  18. .sp .spul .spli .sptext {
  19.   font-size: 1.2rem;
  20.   margin-left: 0.5rem;
  21.   margin-right: 0.5rem;
  22.   height: 3rem;
  23.   width: auto;
  24.   -webkit-line-clamp: 2;
  25.   display: -webkit-box;
  26.   overflow: hidden;
  27.   -webkit-box-orient: vertical;
  28.   text-overflow: ellipsis;
  29. }
  30. .sp .spul .spli .splook {
  31.   display: flex;
  32.   margin-left: 0.5rem;
  34.   margin-top: 1rem;
  35.   justify-content: space-between;
  36. }
  37. .sp .spul .spli .splook a {
  38.   text-decoration: none;
  39. }
  40. .sp .spul .spli .splook a:first-of-type {
  41.   color: red;
  42. }
  43. .sp .spul .spli .splook a:last-of-type {
  44.   background-color: #f0f2f5;
  45.   color: #808080;
  46.   border-radius: 1rem 0rem 0 1rem;
  47.   width: 4.5rem;
  48.   font-size: 1rem;
  49.   text-align: right;
  50.   padding: 0.2rem;
  51. }
Correcting teacher：PHPzPHPz

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