Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 京东手机端页面实战
Blogger Information
Blog 13
fans 1
comment 0
visits 9871
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
841 people have browsed it

  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="static/css/index.css" />
  8.     <link rel="stylesheet" href="static/icon-font/iconfont.css" />
  9.     <link rel="stylesheet" href="static/css/header.css" />
  10.     <link rel="stylesheet" href="static/css/footer.css" />
  11.     <link rel="stylesheet" href="static/css/nav.css" />
  12.     <link rel="stylesheet" href="static/css/ms.css" />
  13.     <link rel="stylesheet" href="static/css/tj.css" />
  14.     <title>页眉+页脚+主导航+秒杀区+推荐商品列表区</title>
  15.   </head>
  16.   <body>
  17.     <div class="header">
  18.       <!-- 菜单 -->
  19.       <div class="menu iconfont icon-menu"></div>
  20.       <!-- 搜索框 -->
  21.       <div class="search">
  22.         <div class="logo">JD</div>
  23.         <div class="zoom iconfont icon-search"></div>
  24.         <input type="text" class="words" value="移动硬盘5000g" id="" />
  25.       </div>
  26.       <!-- 登录按钮 -->
  27.       <a href="" class="login">登录</a>
  28.     </div>
  29.     <!-- 主体 -->
  30.     <div class="main">
  31.       <!-- 主导航区 -->
  32.       <ul class="nav">
  33.         <li>
  34.           <a href=""><img src="static/images/dh/nav-1.png" alt="" /></a>
  35.           <a href="">京东超市</a>
  36.         </li>
  37.         <li>
  38.           <a href=""><img src="static/images/dh/nav-2.png" alt="" /></a>
  39.           <a href="">数码电器</a>
  40.         </li>
  41.         <li>
  42.           <a href=""><img src="static/images/dh/nav-3.png" alt="" /></a>
  43.           <a href="">京东服饰</a>
  44.         </li>
  45.         <li>
  46.           <a href=""><img src="static/images/dh/nav-4.png" alt="" /></a>
  47.           <a href="">京东生鲜</a>
  48.         </li>
  49.         <li>
  50.           <a href=""><img src="static/images/dh/nav-5.png" alt="" /></a>
  51.           <a href="">充值缴费</a>
  52.         </li>
  53.         <li>
  54.           <a href=""><img src="static/images/dh/nav-6.png" alt="" /></a>
  55.           <a href="">9.9元拼</a>
  56.         </li>
  57.         <li>
  58.           <a href=""><img src="static/images/dh/nav-7.png" alt="" /></a>
  59.           <a href="">领劵</a>
  60.         </li>
  61.         <li>
  62.           <a href=""><img src="static/images/dh/nav-8.png" alt="" /></a>
  63.           <a href="">领津贴</a>
  64.         </li>
  65.         <li>
  66.           <a href=""><img src="static/images/dh/nav-9.png" alt="" /></a>
  67.           <a href="">PLUS会员</a>
  68.         </li>
  69.         <li>
  70.           <a href=""><img src="static/images/dh/nav-10.png" alt="" /></a>
  71.           <a href="">数码电器</a>
  72.         </li>
  73.       </ul>
  74.       <!-- 秒杀区 -->
  75.       <div class="ms">
  76.         <div class="ms-top">
  77.           <div class="left">
  78.             <div class="title">京东秒杀</div>
  79.             <div class="notice">
  80.               <div class="tips">20点专场</div>
  81.               <div class="time">01：40：33</div>
  82.             </div>
  83.           </div>
  84.           <div class="right">更多秒杀</div>
  85.         </div>
  86.         <!-- 秒杀主体区 -->
  87.         <ul class="ms-body">
  88.           <li class="item">
  89.             <a href=""><img src="static/images/ms/ms-1.jpg" alt="" /></a>
  90.             <div class="iconfont icon-rmb">338</div>
  91.             <div class="iconfont icon-rmb">558</div>
  92.           </li>
  93.           <li class="item">
  94.             <a href=""><img src="static/images/ms/ms-2.jpg" alt="" /></a>
  95.             <div class="iconfont icon-rmb">338</div>
  96.             <div class="iconfont icon-rmb">558</div>
  97.           </li>
  98.           <li class="item">
  99.             <a href=""><img src="static/images/ms/ms-3.jpg" alt="" /></a>
  100.             <div class="iconfont icon-rmb">338</div>
  101.             <div class="iconfont icon-rmb">558</div>
  102.           </li>
  103.           <li class="item">
  104.             <a href=""><img src="static/images/ms/ms-4.jpg" alt="" /></a>
  105.             <div class="iconfont icon-rmb">338</div>
  106.             <div class="iconfont icon-rmb">558</div>
  107.           </li>
  108.         </ul>
  109.       </div>
  111.       <!-- 推荐商品列表区 -->
  112.       <ul class="tj">
  113.         <li class="item">
  114.           <a href=""><img src="static/images/sp/sp-1.webp" alt="" /></a>
  115.           <p>
  116.             商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍
  117.           </p>
  118.           <div class="price">
  119.             <div class="iconfont icon-rmb">138</div>
  120.             <div>看相似</div>
  121.           </div>
  122.         </li>
  123.         <li class="item">
  124.           <a href=""><img src="static/images/sp/sp-2.webp" alt="" /></a>
  125.           <p>
  126.             商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍
  127.           </p>
  128.           <div class="price">
  129.             <div class="iconfont icon-rmb">138</div>
  130.             <div>看相似</div>
  131.           </div>
  132.         </li>
  133.         <li class="item">
  134.           <a href=""><img src="static/images/sp/sp-3.webp" alt="" /></a>
  135.           <p>
  136.             商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍
  137.           </p>
  138.           <div class="price">
  139.             <div class="iconfont icon-rmb">138</div>
  140.             <div>看相似</div>
  141.           </div>
  142.         </li>
  143.         <li class="item">
  144.           <a href=""><img src="static/images/sp/sp-4.webp" alt="" /></a>
  145.           <p>
  146.             商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍
  147.           </p>
  148.           <div class="price">
  149.             <div class="iconfont icon-rmb">138</div>
  150.             <div>看相似</div>
  151.           </div>
  152.         </li>
  153.         <li class="item">
  154.           <a href=""><img src="static/images/sp/sp-5.webp" alt="" /></a>
  155.           <p>
  156.             商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍
  157.           </p>
  158.           <div class="price">
  159.             <div class="iconfont icon-rmb">138</div>
  160.             <div>看相似</div>
  161.           </div>
  162.         </li>
  163.         <li class="item">
  164.           <a href=""><img src="static/images/sp/sp-6.webp" alt="" /></a>
  165.           <p>
  166.             商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍
  167.           </p>
  168.           <div class="price">
  169.             <div class="iconfont icon-rmb">138</div>
  170.             <div>看相似</div>
  171.           </div>
  172.         </li>
  173.       </ul>
  174.     </div>
  175.     <!-- 页脚 -->
  176.     <div class="footer">
  177.       <div>
  178.         <div class="iconfont icon-home"></div>
  179.         <span>首页</span>
  180.       </div>
  181.       <div>
  182.         <div class="iconfont icon-home"></div>
  183.         <span>分类</span>
  184.       </div>
  185.       <div>
  186.         <div class="iconfont icon-home"></div>
  187.         <span>京喜</span>
  188.       </div>
  189.       <div>
  190.         <div class="iconfont icon-home"></div>
  191.         <span>购物车</span>
  192.       </div>
  193.       <div>
  194.         <div class="iconfont icon-home"></div>
  195.         <span>未登录</span>
  196.       </div>
  197.     </div>
  198.   </body>
  199. </html>

reset.css

  1. * {
  2.   margin: 0px;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  6. li {
  7.   /* 去掉前面的点 */
  8.   list-style: none;
  9. }
  10. a {
  11.   /* 去掉下划线 */
  12.   text-decoration: none;
  13.   color: #7b7b7b;
  14. }
  15. body {
  16.   background-color: #f6f6f6;
  17. }
  18. html {
  19.   font-size: 10px;
  20. }
  21. body {
  22.   font-size: 1.6rem;
  23. }
  24. @media screen and (min-width: 480px) {
  25.   html {
  26.     font-size: 12px;
  27.   }
  28. }
  29. @media screen and (min-width: 640px) {
  30.   html {
  31.     font-size: 14px;
  32.   }
  33. }
  34. @media screen and (min-width: 720px) {
  35.   html {
  36.     font-size: 16px;
  37.   }
  38. }

index.css

  1. /* @import url("reset.css"); */
  2. @import "reset.css";
  3. .header {
  4.   background-color: #e43130;
  5.   color: #fff;
  6.   height: 4.4rem;
  7.   /* 固定定位 */
  8.   position: fixed;
  9.   left: 0;
  10.   top: 0;
  11.   right: 0;
  12.   /* 保证他始终在视口的最前面 */
  13.   z-index: 100;
  14. }
  15. /* 主体绝对定位 */
  16. .main {
  17.   position: absolute;
  18.   top: 4.4rem;
  19.   left: 0;
  20.   right: 0;
  21.   bottom: 4.4rem;
  22. }
  23. .footer {
  24.   background-color: #eee;
  25.   color: #fff;
  26.   height: 4.4rem;
  27.   /* 固定定位 */
  28.   position: fixed;
  29.   left: 0;
  30.   bottom: 0;
  31.   right: 0;
  32.   z-index: 100;
  33. }

footer.css

  1. .footer {
  2.   display: flex;
  3.   justify-content: space-around;
  4.   align-items: center;
  5.   color: #666;
  6. }
  7. .footer > div {
  8.   display: flex;
  9.   flex-flow: column nowrap;
  10.   /* 主轴垂直  交叉轴水平 */
  11.   align-items: center;
  12. }
  13. .footer > div .iconfont {
  14.   font-size: 2rem;
  15. }
  16. .footer > div > span {
  17.   font-size: 1rem;
  18. }
  19. .footer > div:hover {
  20.   cursor: pointer;
  21. }

header.css

  1. /* 使用一个类作为入口，后面可以使用class或伪类来获取内部的每一个元素。 */
  2. .header {
  3.   display: flex;
  4.   flex-flow: row nowrap;
  5.   align-items: center;
  6. }
  7. .header .menu {
  8.   flex: 1;
  9.   /* 行内元素 文本居中 */
  10.   text-align: center;
  11.   font-size: 2.5rem;
  12. }
  13. .header .login {
  14.   flex: 1;
  15.   color: white;
  16.   text-align: center;
  17. }
  18. .header .search {
  19.   flex: 6;
  20.   padding: 0.5rem;
  21.   background-color: #fff;
  22.   /* 圆角 */
  23.   border-radius: 3rem;
  24.   display: flex;
  25. }
  26. .header .search .logo {
  27.   color: #e43130;
  28.   font-size: 2rem;
  29.   flex: 0 1 4rem;
  30.   text-align: center;
  31.   line-height: 2rem;
  32. }
  33. .header .search .zoom {
  34.   color: #ccc;
  35.   flex: 0 1 4rem;
  36.   text-align: center;
  37.   /* 垂直居中 */
  38.   line-height: 2rem;
  39.   border-left: 1px solid;
  40. }
  41. .header .search .words {
  42.   flex: auto;
  43.   border: none;
  44.   outline: none;
  45.   color: #aaa;
  46. }

nav.css

  1. /* 主导航区样式 */
  3. /* 图片 */
  4. .main nav img {
  5.   height: 4rem;
  6.   width: 4rem;
  7. }
  8. /* 导航区 */
  9. .main .nav {
  10.   /* border: 1px solid #000; */
  11.   padding: 1rem;
  12.   display: flex;
  13.   /* 转为多行容器 */
  14.   flex-flow: row wrap;
  15. }
  16. .main .nav li {
  17.   flex-grow: 1;
  18.   flex-shrink: 0;
  19.   flex-basis: 20%;
  20.   /* border: 1px solid #000; */
  21.   /* flex: 1 1 20%; */
  22.   display: flex;
  23.   flex-flow: column nowrap;
  24.   align-items: center;
  25. }

tj.css

  1. .main .tj {
  2.   font-size: 1.1rem;
  3.   color: #555;
  4.   display: flex;
  5.   /* 当前一行只显示两个 所以转为多行容器  允许换行 */
  6.   flex-flow: row wrap;
  7.   justify-content: center;
  8. }
  9. .main .tj .item {
  10.   flex-basis: calc(50% - 3rem);
  11.   padding: 1rem;
  12.   background-color: #fff;
  13.   display: flex;
  14.   flex-flow: column nowrap;
  16.   /* 添加外边距 */
  17.   margin-left: 1rem;
  18.   margin-bottom: 1rem;
  19.   border-radius: 1rem;
  20. }
  21. .main .th .item:nth-of-type(2n) {
  22.   margin-right: 1rem;
  23. }
  24. .main .tj .item img {
  25.   width: 100%;
  26.   height: 100%;
  27. }
  28. .main .tj .item .price {
  29.   display: flex;
  30.   justify-content: space-between;
  31. }
  32. .main .tj .item .price div:first-of-type {
  33.   color: red;
  34.   font-weight: bolder;
  35. }
  36. .main .tj .item .price div:last-of-type {
  37.   background-color: #f6f6f6;
  38.   padding: 0.2rem 1rem;
  39.   border-radius: 1rem;
  40.   color: #666;
  41. }
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