search

博客列表 >1223 -京东app首页

1223 -京东app首页

世纪天城
世纪天城原创
2020年12月25日 10:56:25983浏览

选择京东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. }

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

秒杀部分

推荐部分

上一条：grid布局的常用属性与新单位fr下一条：CSS弹性布局（flex）快速入门和实操
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多