search

博客列表 >实现仿京东商城移动端首页

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

空瓶子
空瓶子原创
2020年12月24日 18:24:132903浏览

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

作业内容：京东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.对于相对定位和绝对定位的使用不是很熟练
上一条：京东app首页页眉，页脚组件下一条：CSS定位类型和弹出层效果
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多