Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1223 -京东app首页
Blogger Information
Blog 37
fans 2
comment 0
visits 26497
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
1223 -京东app首页
世纪天城
Original
984 people have browsed it

选择京东app首页的导航，页眉，页脚，秒杀
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.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <link rel="stylesheet" href="static/css/index.css">
  8.     <link rel="stylesheet" href="static/icon-font/iconfont.css">
  9.     <title>仿京东商城</title>
  10. </head>
  11. <body>
  12.     <header>
  13.         <div class="header-nav">
  14.             <span class="iconfont icon-menu"></span>
  15.         </div>
  16.         <div class="header-search">
  17.             <div class="jd">JD</div>
  18.             <div class="iconfont icon-search"></div>
  19.             <input type="text" name="" value="" placeholder="女装">
  20.         </div>
  21.         <button class="header-button">登录</button>
  22.     </header>
  23.     <main>
  24.         <div class="banner">
  25.             <a href="static/images/bg/banner.jpg"><img src="static/images/bg/banner.jpg" alt=""></a>
  26.         </div>
  27.         <div class="main-nav">
  28.             <ul>
  29.                 <li>
  30.                     <a href=""><img src="static/images/dh/nav-1.png" alt=""></a>
  31.                     <a href="">京东超市</a>
  32.                 </li>
  33.                 <li>
  34.                     <a href=""><img src="static/images/dh/nav-2.png" alt=""></a>
  35.                     <a href="">数码电器</a>
  36.                 </li>
  37.                 <li>
  38.                     <a href=""><img src="static/images/dh/nav-3.png" alt=""></a>
  39.                     <a href="">京东服饰</a>
  40.                 </li>
  41.                 <li>
  42.                     <a href=""><img src="static/images/dh/nav-4.png" alt=""></a>
  43.                     <a href="">京东生鲜</a>
  44.                 </li>
  45.                 <li>
  46.                     <a href=""><img src="static/images/dh/nav-5.png" alt=""></a>
  47.                     <a href="">京东到家</a>
  48.                 </li>
  49.                 <li>
  50.                     <a href=""><img src="static/images/dh/nav-6.png" alt=""></a>
  51.                     <a href="">充值缴费</a>
  52.                 </li>
  53.                 <li>
  54.                     <a href=""><img src="static/images/dh/nav-7.png" alt=""></a>
  55.                     <a href="">9.9元拼</a>
  56.                 </li>
  57.                 <li>
  58.                     <a href=""><img src="static/images/dh/nav-8.png" alt=""></a>
  59.                     <a href="">领劵</a>
  60.                 </li>
  61.                 <li>
  62.                     <a href=""><img src="static/images/dh/nav-9.png" alt=""></a>
  63.                     <a href="">借钱</a>
  64.                 </li>
  65.                 <li>
  66.                     <a href=""><img src="static/images/dh/nav-10.png" alt=""></a>
  67.                     <a href="">plus会员</a>
  68.                 </li>
  69.             </ul>
  70.         </div>
  71.         <div class="main-ms">
  72.             <div class="main-zc">
  73.                 <h3>京东秒杀</h3>
  74.                 <div><span>6点场</span><span>00</span>:<span>38</span>:<span>24</span></div>
  75.                 <span>更多秒杀</span>
  76.             </div>
  77.             <ul class="main-sp">
  78.                 <li>
  79.                     <a href=""><img src="static/images/ms/ms-1.jpg" alt=""></a>
  80.                     <span class="xj iconfont icon-rmb">2249</span>
  81.                     <span class="yj iconfont icon-rmb">3199</span>
  82.                 </li>  
  83.                 <li>
  84.                     <a href=""><img src="static/images/ms/ms-2.jpg" alt=""></a>
  85.                     <span class="xj iconfont icon-rmb">2249</span>
  86.                     <span class="yj iconfont icon-rmb">3199</span>
  87.                 </li>  
  88.                 <li>
  89.                     <a href=""><img src="static/images/ms/ms-3.jpg" alt=""></a>
  90.                     <span class="xj iconfont icon-rmb">2249</span>
  91.                     <span class="yj iconfont icon-rmb">3199</span>
  92.                 </li> 
  93.                 <li>
  94.                     <a href=""><img src="static/images/ms/ms-4.jpg" alt=""></a>
  95.                     <span class="xj iconfont icon-rmb">2249</span>
  96.                     <span class="yj iconfont icon-rmb">3199</span>
  97.                 </li> 
  98.                 <li>
  99.                     <a href=""><img src="static/images/ms/ms-5.jpg" alt=""></a>
  100.                     <span class="xj iconfont icon-rmb">2249</span>
  101.                     <span class="yj iconfont icon-rmb">3199</span>
  102.                 </li> 
  103.             <ul>
  104.         </div>
  105.         <div class="main-tj">
  106.             <h3>猜你喜欢</h3>
  107.             <ul>
  108.                 <li>
  109.                     <a href=""><img src="static/images/tj/tj-1.jpg" alt=""></a>
  110.                     <a href="">空气净化器除雾霾PM2.5除甲醛杀菌除病毒无雾加湿器家用消毒卧室客厅使用</a>
  111.                     <span class="jg iconfont icon-rmb">2249</span>
  112.                     <a href="">看相似</a>
  113.                 </li>
  114.                 <li>
  115.                     <a href=""><img src="static/images/tj/tj-2.jpg" alt=""></a>
  116.                     <a href="">空气净化器除雾霾PM2.5除甲醛杀菌除病毒无雾加湿器家用消毒卧室客厅使用</a>
  117.                     <span class="jg iconfont icon-rmb">2249</span>
  118.                     <a href="">看相似</a>
  119.                 </li>
  120.                 <li>
  121.                     <a href=""><img src="static/images/tj/tj-3.jpg" alt=""></a>
  122.                     <a href="">空气净化器除雾霾PM2.5除甲醛杀菌除病毒无雾加湿器家用消毒卧室客厅使用</a>
  123.                     <span class="jg iconfont icon-rmb">2249</span>
  124.                     <a href="">看相似</a>
  125.                 </li>
  126.                 <li>
  127.                     <a href=""><img src="static/images/tj/tj-4.jpg" alt=""></a>
  128.                     <a href="">空气净化器除雾霾PM2.5除甲醛杀菌除病毒无雾加湿器家用消毒卧室客厅使用</a>
  129.                     <span class="jg iconfont icon-rmb">2249</span>
  130.                     <a href="">看相似</a>
  131.                 </li>
  132.                 <li>
  133.                     <a href=""><img src="static/images/tj/tj-5.jpg" alt=""></a>
  134.                     <a href="">空气净化器除雾霾PM2.5除甲醛杀菌除病毒无雾加湿器家用消毒卧室客厅使用</a>
  135.                     <span class="jg iconfont icon-rmb">2249</span>
  136.                     <a href="">看相似</a>
  137.                 </li>
  138.                 <li>
  139.                     <a href=""><img src="static/images/tj/tj-5.jpg" alt=""></a>
  140.                     <a href="">空气净化器除雾霾PM2.5除甲醛杀菌除病毒无雾加湿器家用消毒卧室客厅使用</a>
  141.                     <span class="jg iconfont icon-rmb">2249</span>
  142.                     <a href="">看相似</a>
  143.                 </li>
  144.             </ul>
  145.         </div>
  146.     </main>
  147.     <footer>
  148.         <div>
  149.             <span class="iconfont icon-home"></span>
  150.             <a href="">主页</a>
  151.         </div>
  152.         <div>
  153.             <span class="iconfont icon-shopping-cart"></span>
  154.             <a href="">购物车</a>
  155.         </div>
  156.         <div>
  157.             <span class="iconfont icon-user"></span>
  158.             <a href="">个人中心</a>
  159.         </div>
  160.         <div>
  161.             <span class="iconfont icon-settings"></span>
  162.             <a href="">设置</a>
  163.         </div>
  164.     </footer>
  165. </body>
  166. </html>

css初始代码

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5. }
  6. a{
  7.     color: #666;
  8. }
  9. a:link{
  10.     text-decoration: none;
  11. }
  12. a:hover{
  13.     color: red;
  14. }
  15. li{
  16.     display: inline-block;
  17. }
  18. html{
  19.     font-size: 10px;
  20.     min-width: 480px;
  21.     background-color: rgb(248, 239, 239);
  22. }
  23. @media screen and (min-width: 480px) {
  24.     html {
  25.         font-size: 12px;
  26.     }
  27. }
  28. @media screen and(min-width:640px){
  29.     html{
  30.         font-size: 14px;
  31.     }
  32. }
  33. @media screen and (min-width: 720px) {
  34.     html {
  35.         font-size: 16px;
  36.     }
  37. }

首页css 代码

  1. @import'reset.css';
  2. header,footer{
  3.     min-width: 480px;
  4.     min-height: 4.4em;
  5.     display: flex;
  6.     align-items: center;
  7. }
  8. /* header */
  9. header{
  10.     position: fixed;
  11.     top: 0;
  12.     left: 0;
  13.     right: 0;
  14.     background-color: rgb(255, 1, 1);
  15.     z-index: 99;
  16. }
  17. .header-nav,.header-button{
  18.     flex: 1;
  19.     text-align: center;
  20.     cursor: pointer;
  21.     color: #fff;
  22. }
  23. .header-search{
  24.     flex: 6;
  25.     display: flex;
  26.     background-color: #fff;
  27.     border-radius: 5em;
  28.     padding: 0.3em;
  29.     align-items: center;
  30. }
  31. .header-search .jd{
  32.     margin-right: 1em;
  33.     color: rgb(255, 1, 1);
  34.     font-size: 1.5rem;
  35. }
  36. .header-search .iconfont{
  37.     border-left: #cccccc 1px solid; 
  38.     padding: 0 1em; 
  39.     color: #cccccc;
  40.     font-size: 1rem;
  41. }
  42. .header-search>input{
  43.     width: 100%;
  44.     padding: 0.2em 0;
  45.     font-size: 1rem;
  46.     color: #cccccc;
  47.     border: none;
  48. }
  49. .header-button{
  51.     background-color:  rgb(255, 1, 1);
  52.     color: bisque;
  53.     border: none;
  54.     cursor: pointer;
  55. }
  56. main{
  57.     padding-top: 4.4em;
  58.     padding-bottom: 4.4em;
  59.     /* background-color: rgb(250, 249, 245); */
  60. }
  61. main>.banner img{
  62.     width: 100%;
  63.     border: none;
  64. }
  65. footer{
  66.     position: fixed;
  67.     left: 0;
  68.     right: 0;
  69.     bottom: 0;
  70.     background-color: rgb(255, 250, 250);
  71.     z-index: 99;
  72. }
  73. main .main-nav ul{
  74.     display: flex;
  75.     flex-wrap: wrap;
  76.     justify-content: space-between;
  77. }
  78. main .main-nav ul img{
  79.     width: 100%;
  80. }
  81. main .main-nav ul li{
  82.     flex: 1 1 20%;
  83.     display: flex;
  84.     flex-flow: column;
  85.     align-items: center;
  86.     padding: 1em;
  87. }
  88. main>.main-ms{
  89.     background-color:#fff;
  90.     border-radius: 1.5em;
  91. }
  92. main>.main-ms>.main-zc{
  93.     display: flex;
  94.     justify-content: space-between;
  95.     min-height: 4em;
  96.     line-height: 4em;
  97. }
  98. main>.main-ms>.main-zc>h3{
  99.     font-size: 1.8rem;
  100.     font-weight: 500;
  101.     padding: 0 1em;
  102. }
  103. main>.main-ms>.main-zc>div{
  104.     flex: 1;
  105. }
  106. main>.main-ms>.main-zc>div>span:first-of-type{
  107.     color:  rgb(255, 1, 1);
  108.     font-size: 1.5rem;
  109. }
  110. main>.main-ms>.main-zc>div>span:last-of-type,
  111. main>.main-ms>.main-zc>div>span:nth-of-type(2),
  112. main>.main-ms>.main-zc>div>span:nth-of-type(3){
  113.     background-color: rgb(255, 1, 1);
  114.     margin-left: 0.3em;
  115.     padding: 0.3em;
  116.     border-radius: 0.5em;
  117.     color: #fff;
  118. }
  119. main>.main-ms>.main-zc>span{
  120.     color: rgb(255, 1, 1);
  121.     padding-right: 0.5em;
  122.     font-size: 1.2rem;
  123. }
  124. main>.main-ms>.main-sp{
  125.     display: flex;
  126. }
  127. main>.main-ms>.main-sp li{
  128.     display: flex;
  129.     flex-flow: column;
  130.     flex: 1 1 20%;
  131.     text-align: center;
  132.     padding-bottom: 1em;
  133. }
  134. main>.main-ms>.main-sp li img{
  135.     width: 100%;
  136. }
  137. main>.main-ms .icon-rmb.xj,main>.main-tj .iconfont.jg{
  138.     color: rgb(255, 1, 1);
  139. }
  140. main>.main-ms .iconfont.yj{
  141.     color: #666;
  142.     text-decoration: line-through;
  143. }
  144. main>.main-tj h3{
  145.     text-align: center;
  146.     min-height: 3em;
  147.     line-height: 3em;
  148.     font-size: 1.5rem;
  149. }
  150. main>.main-tj>ul{
  151.     display: flex;
  152.     flex-wrap: wrap;
  153. }
  154. main>.main-tj>ul>li img{
  155.     width: 100%;
  156. }
  157. main>.main-tj>ul>li{
  158.     flex: 1 1 50%;
  159.     padding: 0.3em;
  160.     position: relative;
  161. }
  162. main>.main-tj>ul>li>a:nth-of-type(2){
  163.     line-height: 1.5em;
  164.     display: block;
  165.     margin: 1em 0.5em;
  166. }
  167. main>.main-tj>ul>li a:last-of-type{
  168.     position: absolute;
  169.     bottom: 0.5em;
  170.     right: 1em;
  171.     padding: 0.2em 1em;
  172.     border-radius: 0.5em;
  173.     background-color: rgb(218, 216, 216);
  174. }
  175. footer{
  176.     display: flex;
  177.     justify-content: space-between;
  178.     padding: 0 1em;
  179. }

完成后的效果图
页眉，导航，页脚部分

秒杀部分

推荐部分

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