简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 实现仿京东商城移动端首页
Blogger Information
Blog 18
fans 1
comment 0
visits 16084
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
2888 people have browsed it

实现仿京东商城移动端首页

作业内容：京东app首页，选择导航，页眉，页脚，秒杀，推荐等，任选二个组件完成即可

代码模块

分析京东商城首页，可以吧首页分为页眉、主体、页脚三大模块
其中主体部分有可以分为轮播图、广告banner、首页导航、限时秒杀等若干个功能模块
按照分析的逻辑，分功能模块完成对京东商城首页的编写

页眉

html代码

  1.  <div class="header">
  2.       <!-- 设置页眉：菜单图标-搜索框-登录按钮 -->
  3.       <div class="menu iconfont icon-menu"></div>
  4.       <div class="search">
  5.         <div class="logo">JD</div>
  6.         <div class="zoom iconfont icon-search"></div>
  7.         <input class="works" type="text" value="蓝牙鼠标" />
  8.       </div>
  9.       <a href="" class="login">登录</a>
  10.     </div>

css代码

  1. /* header样式 */
  2. .header {
  3.   display: flex;
  4.   align-items: center;
  5. }
  6. /* 菜单-搜索框-登录按钮占页面比例为1:6:1 */
  7. .header .menu {
  8.   flex: 1;
  9.   text-align: center;
  10.   font-size: 2.5rem;
  11. }
  12. .header .search {
  13.   flex: 6;
  14.   padding: 0.5rem;
  15.   background-color: white;
  16.   border-radius: 3rem;
  17.   display: flex;
  18. }
  19. .header .login {
  20.   color: white;
  21.   flex: 1;
  22.   text-align: center;
  23. }
  24. .header .search .logo {
  25.   font-size: 2rem;
  26.   color: #e43130;
  27.   flex: 0 1 4rem;
  28.   text-align: center;
  29.   line-height: 2rem;
  30. }
  31. .header .search .zoom {
  32.   font-size: 2rem;
  33.   color: #666666;
  34.   flex: 0 1 4rem;
  35.   border-left: 1px solid #666666;
  36.   text-align: center;
  37.   line-height: 2rem;
  38. }
  39. .header .search .works {
  40.   flex: auto;
  41.   border: none;
  42.   outline: none;
  43.   color: #666;
  44. }

导航

HTML代码

  1. <div class="nav">
  2.         <ul>
  3.           <li>
  4.             <a href=""><img src="static/images/dh/nav-1.png" alt="" /></a>
  5.             <a href="">京东超市</a>
  6.           </li>
  7.           <li>
  8.             <a href=""><img src="static/images/dh/nav-2.png" alt="" /></a>
  9.             <a href="">数码超市</a>
  10.           </li>
  11.           <li>
  12.             <a href=""><img src="static/images/dh/nav-3.png" alt="" /></a>
  13.             <a href="">京东服饰</a>
  14.           </li>
  15.           <li>
  16.             <a href=""><img src="static/images/dh/nav-4.png" alt="" /></a>
  17.             <a href="">京东生鲜</a>
  18.           </li>
  19.           <li>
  20.             <a href=""><img src="static/images/dh/nav-5.png" alt="" /></a>
  21.             <a href="">京东到家</a>
  22.           </li>
  23.           <li>
  24.             <a href=""><img src="static/images/dh/nav-6.png" alt="" /></a>
  25.             <a href="">充值缴费</a>
  26.           </li>
  27.           <li>
  28.             <a href=""><img src="static/images/dh/nav-7.png" alt="" /></a>
  29.             <a href="">9.9元拼</a>
  30.           </li>
  31.           <li>
  32.             <a href=""><img src="static/images/dh/nav-8.png" alt="" /></a>
  34.             <a href="">领券</a>
  35.           </li>
  36.           <li>
  37.             <a href=""><img src="static/images/dh/nav-9.png" alt="" /></a>
  38.             <a href="">借钱</a>
  39.           </li>
  40.           <li>
  41.             <a href=""><img src="static/images/dh/nav-10.png" alt="" /></a>
  42.             <a href="">PLUS会员</a>
  43.           </li>
  44.         </ul>
  45.       </div>

css代码

  1. .main .nav ul {
  2.   display: flex;
  3.   flex-flow: row wrap;
  4.   padding: 1rem;
  5.   justify-content: space-between;
  6. }
  7. .main .nav img {
  8.   width: 4rem;
  9.   height: 4rem;
  10. }
  11. .main .nav li {
  12.   flex: 1 1 20%;
  13.   display: flex;
  14.   flex-flow: column nowrap;
  15.   /* align-self: center; */
  16.   font-size: 1.2rem;
  17.   text-align: center;
  18. }

显示秒杀

HTML代码

  1. <div class="xsms-goods">
  2.         <div class="ms-top">
  3.           <div class="ms-left">
  4.             <div class="title">京东秒杀</div>
  5.             <div class="notice">
  6.               <div class="mszc">22点专场</div>
  7.               <div class="ms-time">22:22:22</div>
  8.             </div>
  9.           </div>
  10.           <div class="ms-right">
  11.             <a href="">更多秒杀</a>
  12.           </div>
  13.         </div>
  14.         <ul class="msgoods">
  15.           <li>
  16.             <img src="static/images/ms/ms-1.jpg" alt="" />
  17.             <div class="iconfont icon-rmb">123</div>
  18.             <div class="iconfont icon-rmb">456</div>
  19.           </li>
  20.           <li>
  21.             <img src="static/images/ms/ms-2.jpg" alt="" />
  22.             <div class="iconfont icon-rmb">123</div>
  23.             <div class="iconfont icon-rmb">456</div>
  24.           </li>
  25.           <li>
  26.             <img src="static/images/ms/ms-3.jpg" alt="" />
  27.             <div class="iconfont icon-rmb">123</div>
  28.             <div class="iconfont icon-rmb">456</div>
  29.           </li>
  30.           <li>
  31.             <img src="static/images/ms/ms-4.jpg" alt="" />
  32.             <div class="iconfont icon-rmb">123</div>
  33.             <div class="iconfont icon-rmb">456</div>
  34.           </li>
  35.           <li>
  36.             <img src="static/images/ms/ms-5.jpg" alt="" />
  37.             <div class="iconfont icon-rmb">123</div>
  38.             <div class="iconfont icon-rmb">456</div>
  39.           </li>
  40.           <li>
  41.             <img src="static/images/ms/ms-6.jpg" alt="" />
  42.             <div class="iconfont icon-rmb">123</div>
  43.             <div class="iconfont icon-rmb">456</div>
  44.           </li>
  45.         </ul>
  46.       </div>

css代码

  1. .main .xsms-goods {
  2.   margin: 1rem;
  3.   background-color: white;
  4.   border-radius: 1rem;
  5.   padding: 0.5rem;
  6. }
  8. .main .xsms-goods .ms-top {
  9.   display: flex;
  10.   flex-flow: nowrap;
  11.   justify-content: space-between;
  12. }
  13. .main .xsms-goods .ms-top .ms-left {
  14.   display: flex;
  15.   flex-flow: nowrap;
  16.   justify-content: space-evenly;
  17. }
  19. .main .xsms-goods .ms-top .ms-left .title {
  20.   align-self: center;
  21. }
  22. .main .xsms-goods .ms-top .ms-left .notice {
  23.   font-size: 1.1rem;
  24.   height: 2rem;
  25.   margin-left: 1rem;
  26.   display: flex;
  27.   border: 1px solid #e43130;
  28.   border-radius: 1rem;
  29.   justify-content: center;
  30.   align-items: center;
  31. }
  32. .main .xsms-goods .ms-top .ms-left .mszc {
  33.   align-self: center;
  34.   background-color: #e43130;
  35.   border-radius: 1rem;
  36.   color: white;
  37.   padding: 0.3rem 0.5rem;
  38. }
  39. .main .xsms-goods .ms-top .ms-left .ms-time {
  40.   align-self: center;
  42.   padding: 0.3rem 0.5rem;
  43. }
  44. .main .xsms-goods .ms-top .ms-right a {
  45.   color: #e43130;
  46. }
  47. /* 限时秒杀主体样式设置 */
  48. .main .xsms-goods .msgoods {
  49.   display: flex;
  50.   justify-content: space-between;
  51.   margin: 1rem 0;
  52.   /* flex-flow: column wrap; */
  53. }
  54. .main .xsms-goods .msgoods img {
  55.   width: 4.8rem;
  56.   margin-bottom: 1rem;
  57. }
  58. .main .xsms-goods .msgoods li {
  59.   display: flex;
  60.   flex-flow: column;
  61. }
  62. .main .xsms-goods .msgoods li div:first-of-type {
  63.   font-size: 1.5rem;
  64.   font-weight: bolder;
  65.   color: #e43130;
  66. }
  67. .main .xsms-goods .msgoods li div:last-of-type {
  68.   font-size: 1.5rem;
  69.   /* font-weight: 400; */
  70.   color: #999;
  71.   text-decoration: line-through;
  72. }

推荐商品

HTML代码

  1. <div class="caini">
  2.         <img src="static/images/qt/like-top.png" alt="" />
  3.         <div class="like-goods">
  4.           <div>
  5.             <img src="static/images/sp/sp-1.webp" alt="" />
  6.             <p>
  7.               商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介品介绍商品介绍
  8.             </p>
  9.             <div class="price">
  10.               <div class="iconfont icon-rmb">123</div>
  11.               <div>看相似</div>
  12.             </div>
  13.           </div>
  15.           <div>
  16.             <img src="static/images/sp/sp-2.webp" alt="" />
  17.             <p>
  18.               商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介品介绍商品介绍
  19.             </p>
  20.             <div class="price">
  21.               <div class="iconfont icon-rmb">123</div>
  22.               <div>看相似</div>
  23.             </div>
  24.           </div>
  26.           <div>
  27.             <img src="static/images/sp/sp-3.webp" alt="" />
  28.             <p>
  29.               商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介品介绍商品介绍
  30.             </p>
  31.             <div class="price">
  32.               <div class="iconfont icon-rmb">123</div>
  33.               <div>看相似</div>
  34.             </div>
  35.           </div>
  37.           <div>
  38.             <img src="static/images/sp/sp-4.webp" alt="" />
  39.             <p>
  40.               商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介品介绍商品介绍
  41.             </p>
  42.             <div class="price">
  43.               <div class="iconfont icon-rmb">123</div>
  44.               <div>看相似</div>
  45.             </div>
  46.           </div>
  47.         </div>
  48.       </div>
  49.     </div>

css代码

  1. .main .caini img {
  2.   width: 50rem;
  3. }
  4. .main .caini .like-goods {
  5.   margin: 1rem;
  6.   display: flex;
  7.   /* 允许换行 */
  8.   flex-wrap: wrap;
  9. }
  10. .main .caini .like-goods > div {
  11.   flex: 1 1 calc(50% - 2rem);
  12.   background-color: #fff;
  13.   border-radius: 2rem;
  14.   overflow: hidden;
  15.   margin: 1rem;
  16.   padding: 1rem;
  17. }
  18. .main .caini .like-goods > div > img {
  19.   width: 20rem;
  20. }
  21. .main .caini .like-goods .price {
  22.   display: flex;
  23.   justify-content: space-between;
  24. }
  25. .main .caini .like-goods .price div:first-of-type {
  26.   color: #e43130;
  27.   font-weight: bolder;
  28. }
  29. .main .caini .like-goods .price div:last-of-type {
  30.   background-color: #999999;
  31.   border-radius: 1rem;
  32.   color: #f6f6f6;
  33.   padding: 3px;
  34. }

最终效果

" class="reference-link">

存在的问题

  1. 页面响应式存在问题，部分模块无法做到响应
    2.关于flex属性，及其属性值的使用不是很熟练
    3.对于相对定位和绝对定位的使用不是很熟练
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！