search

博客列表 >京东app首页布局

京东app首页布局

豌豆君
豌豆君原创
2021年03月19日 19:16:411415浏览

index.html

主页html

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>京东</title>
  7.     <!-- 字体图标 -->
  8.     <link rel="stylesheet" href="static/icon-font/iconfont.css">
  9.     <!-- 首页 -->
  10.     <link rel="stylesheet" href="static/css/index.css">
  11.     <!-- 页眉 -->
  12.     <link rel="stylesheet" href="static/css/header.css">
  13.     <!-- 广告区 -->
  14.     <link rel="stylesheet" href="static/css/banner.css">
  15.     <!-- 导航区 -->
  16.     <link rel="stylesheet" href="static/css/nav.css">
  17.     <!-- 正品直邮区 -->
  18.     <link rel="stylesheet" href="static/css/zp.css">
  19.     <!-- 秒杀区 -->
  20.     <link rel="stylesheet" href="static/css/ms.css">
  21.     <!-- 活动区 -->
  22.     <link rel="stylesheet" href="static/css/hd.css">
  23.     <!-- 推荐：猜你喜欢 -->
  24.     <link rel="stylesheet" href="static/css/tj.css">
  25.     <!-- 声明 -->
  26.     <link rel="stylesheet" href="static/css/sm.css">
  27.     <!-- 页脚 -->
  28.     <link rel="stylesheet" href="static/css/footer.css">
  29. </head>
  30. <body>
  31.     <!-- 页眉 -->
  32.     <div class="header">
  33.         <!-- 字体图标菜单 -->
  34.         <div class="menu iconfont icon-menu"></div>
  35.         <!-- 搜索框 -->
  36.         <div class="search">
  37.             <div class="logo">JD</div>
  38.             <div class="zoom iconfont icon-search"></div>
  39.             <input class="words" type="text" value="蓝牙鼠标">
  40.         </div>
  41.         <!-- 登录按钮 -->
  42.         <a href="" class="login">登录</a>
  44.     </div>
  45.     <!-- 主体 -->
  46.     <div class="main">
  47.         <!-- 主导航区 -->
  48.         <ul class="banner">
  49.             <a href=""><img src="static/images/bg/banner.jpg" alt=""></a>
  50.         </ul>
  51.         <!-- 主导航区 -->
  52.         <ul class="nav">
  53.             <!-- 第一组 -->
  54.             <li>
  55.                 <a href=""><img src="static/images/dh/nav-1.png" alt=""></a>
  56.                 <a href="">京东超市</a>
  57.             </li>
  58.             <li>
  59.                 <a href=""><img src="static/images/dh/nav-2.png" alt=""></a>
  60.                 <a href="">数码电器</a>
  61.             </li>
  62.             <li>
  63.                 <a href=""><img src="static/images/dh/nav-3.png" alt=""></a>
  64.                 <a href="">京东服饰</a>
  65.             </li>
  66.             <li>
  67.                 <a href=""><img src="static/images/dh/nav-4.png" alt=""></a>
  68.                 <a href="">京东生鲜</a>
  69.             </li>
  70.             <li>
  71.                 <a href=""><img src="static/images/dh/nav-5.png" alt=""></a>
  72.                 <a href="">京东到家</a>
  73.             </li>
  74.             <!-- 第二组 -->
  75.             <li>
  76.                 <a href=""><img src="static/images/dh/nav-6.png" alt=""></a>
  77.                 <a href="">充值缴费</a>
  78.             </li>
  79.             <li>
  80.                 <a href=""><img src="static/images/dh/nav-7.png" alt=""></a>
  81.                 <a href="">9.9元拼</a>
  82.             </li>
  83.             <li>
  84.                 <a href=""><img src="static/images/dh/nav-8.png" alt=""></a>
  85.                 <a href="">领券</a>
  86.             </li>
  87.             <li>
  88.                 <a href=""><img src="static/images/dh/nav-9.png" alt=""></a>
  89.                 <a href="">领金贴</a>
  90.             </li>
  91.             <li>
  92.                 <a href=""><img src="static/images/dh/nav-10.png" alt=""></a>
  93.                 <a href="">PLUS会员</a>
  94.             </li>
  95.         </ul>
  97.         <!-- 正品直邮区 -->
  98.         <ul class="zp">
  99.             <li class="item">
  100.                 <div class="title">
  101.                     <a href=""></a>
  102.                     <a href="">正品直邮</a>
  103.                 </div>
  105.                 <a href=""><img src="static/images/zp/zp-1.jpg" alt=""></a>
  106.             </li>
  107.             <li class="item">
  108.                 <div class="title">
  109.                     <a href="">来电好货</a>
  110.                     <a href="">3c大放价</a>
  111.                 </div>
  113.                 <a href=""><img src="static/images/zp/zp-2.jpg" alt=""></a>
  114.             </li>
  115.             <li class="item">
  116.                 <div class="title">
  117.                     <a href="">国潮风尚</a>
  118.                     <a href="">正品直邮</a>
  119.                 </div>
  120.                 <a href=""><img src="static/images/zp/zp-3.jpg" alt=""></a>
  121.             </li>
  122.             <li class="item">
  123.                 <div class="title">
  124.                     <a href=""></a>
  125.                     <a href="">都是你爱的</a>
  126.                 </div>
  127.                 <a href=""><img src="static/images/zp/zp-4.jpg" alt=""></a>
  128.             </li>
  129.         </ul>
  131.         <!-- 秒杀区 -->
  132.         <div class="ms">
  133.             <div class="ms-top">
  134.                 <div class="left">
  135.                     <div class="title">京东秒杀</div>
  136.                     <div class="notice">
  137.                         <div class="tips">22点专场</div>
  138.                         <div class="time">00:11:22</div>
  139.                     </div>
  140.                 </div>
  141.                 <div class="right">更多秒杀>></div>
  142.             </div>
  143.             <ul class="ms-body">
  144.                 <li class="item">
  145.                     <a href=""><img src="static/images/ms/ms-1.jpg" alt=""></a>
  146.                     <div class="iconfont icon-rmb">338</div>
  147.                     <div class="iconfont icon-rmb">558</div>
  148.                 </li>
  149.                 <li class="item">
  150.                     <a href=""><img src="static/images/ms/ms-2.jpg" alt=""></a>
  151.                     <div class="iconfont icon-rmb">3456</div>
  152.                     <div class="iconfont icon-rmb">4567</div>
  153.                 </li>
  154.                 <li class="item">
  155.                     <a href=""><img src="static/images/ms/ms-3.jpg" alt=""></a>
  156.                     <div class="iconfont icon-rmb">666</div>
  157.                     <div class="iconfont icon-rmb">999</div>
  158.                 </li>
  159.                 <li class="item">
  160.                     <a href=""><img src="static/images/ms/ms-4.jpg" alt=""></a>
  161.                     <div class="iconfont icon-rmb">3456</div>
  162.                     <div class="iconfont icon-rmb">4658</div>
  163.                 </li>
  164.             </ul>
  165.         </div>
  167.          <!-- 活动区 -->
  168.          <ul class="hd">
  169.             <li class="item">
  170.                 <div class="box">
  171.                     <img src="static/images/tj/tj-1.jpg" alt="">
  172.                     <img src="static/images/sd/sd-1.jpg" alt="">
  173.                     <p>嗨购不止6折</p>
  174.                     <p>进口时尚</p>
  175.                 </div>
  176.             </li>
  177.             <li class="item">
  178.                 <div class="box">
  179.                     <img src="static/images/tj/tj-2.jpg" alt="">
  180.                     <img src="static/images/sd/sd-1.jpg" alt="">
  181.                     <p>赠限量野兽派</p>
  182.                     <p>潮礼送给他</p>
  183.                 </div>
  184.             </li>
  185.             <li class="item">
  186.                 <div class="box">
  187.                     <img src="static/images/tj/tj-3.jpg" alt="">
  188.                     <img src="static/images/sd/sd-1.jpg" alt="">
  189.                     <p>9.9元特惠</p>
  190.                     <p>京东汽车</p>
  191.                 </div>
  192.             </li>
  193.             <li class="item">
  194.                 <div class="box">
  195.                     <img src="static/images/tj/tj-4.jpg" alt="">
  196.                     <img src="static/images/sd/sd-1.jpg" alt="">
  197.                     <p>每满100减50</p>
  198.                     <p>图书圣诞购</p>
  199.                 </div>
  200.             </li>
  201.         </ul>
  203.         <!-- 推荐区 -->
  204.         <h2 class="title">猜你喜欢</h2>
  205.         <ul class="tj">
  206.             <li class="item">
  207.                 <a href=""><img src="static/images/sp/sp-1.webp" alt=""></a>
  208.                 <p>商品介绍</p>
  209.                 <div class="price">
  210.                     <div class="iconfont icon-rmb">203</div>
  211.                     <div>看相似</div>
  212.                 </div>
  213.             </li>
  214.             <li class="item">
  215.                 <a href=""><img src="static/images/sp/sp-2.webp" alt=""></a>
  216.                 <p>商品介绍</p>
  217.                 <div class="price">
  218.                     <div class="iconfont icon-rmb">203</div>
  219.                     <div>看相似</div>
  220.                 </div>
  221.             </li>
  222.             <li class="item">
  223.                 <a href=""><img src="static/images/sp/sp-3.webp" alt=""></a>
  224.                 <p>商品介绍</p>
  225.                 <div class="price">
  226.                     <div class="iconfont icon-rmb">203</div>
  227.                     <div>看相似</div>
  228.                 </div>
  229.             </li>
  230.             <li class="item">
  231.                 <a href=""><img src="static/images/sp/sp-4.webp" alt=""></a>
  232.                 <p>商品介绍</p>
  233.                 <div class="price">
  234.                     <div class="iconfont icon-rmb">203</div>
  235.                     <div>看相似</div>
  236.                 </div>
  237.             </li>
  238.             <li class="item">
  239.                 <a href=""><img src="static/images/sp/sp-5.webp" alt=""></a>
  240.                 <p>商品介绍</p>
  241.                 <div class="price">
  242.                     <div class="iconfont icon-rmb">203</div>
  243.                     <div>看相似</div>
  244.                 </div>
  245.             </li>
  246.             <li class="item">
  247.                 <a href=""><img src="static/images/sp/sp-6.webp" alt=""></a>
  248.                 <p>商品介绍</p>
  249.                 <div class="price">
  250.                     <div class="iconfont icon-rmb">203</div>
  251.                     <div>看相似</div>
  252.                 </div>
  253.             </li>
  254.         </ul>
  256.         <!-- 声明区 -->
  257.         <div class="sm">
  258.             <p>本案例用于学习</p>
  259.         </div>
  260.     </div>
  261.     <!-- 页脚 -->
  262.     <div class="footer">
  263.         <div>
  264.             <div class="iconfont icon-home"></div>
  265.             <span>分类</span>
  266.         </div>
  267.         <div>
  268.             <div class="iconfont icon-layers"></div>
  269.             <span>分类</span>
  270.         </div>
  271.         <div>
  272.             <div class="iconfont icon-kehuguanli"></div>
  273.             <span>京喜</span>
  274.         </div>
  275.         <div>
  276.             <div class="iconfont icon-shopping-cart"></div>
  277.             <span>购物车</span>
  278.         </div>
  279.         <div>
  280.             <div class="iconfont icon-user"></div>
  281.             <span>未登录</span>
  282.         </div>
  283.     </div>
  284. </body>
  285. </html>

reset.css

公共初始化css

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5. }
  7. li {
  8.     list-style: none;
  9. }
  11. a {
  12.     color: #7b7b7b;
  13.     text-decoration: none;
  14. }
  16. body {
  17.     background-color: #f6f6f6;
  18. }
  20. html {
  21.     font-size: 10px;
  22. }
  24. /* 媒体查询 */
  25. @media screen and (min-width: 480px) {
  26.     html {
  27.         font-size: 12px;
  28.     }
  29. }
  31. @media screen and (min-width: 640px) {
  32.     html {
  33.         font-size: 14px;
  34.     }
  35. }
  37. @media screen and (min-width: 720px) {
  38.     html {
  39.         font-size: 16px;
  40.     }
  41. }

index.css

首页css

  1. /* 导入公共初始化样式表 */
  2. @import 'reset.css';
  4. /* 页眉 */
  5. .header {
  6.     /* 基础 */
  7.     background-color: #c43130;
  8.     color: white;
  9.     height: 4.4rem;
  11.     /* 固定定位 */
  12.     position: fixed;
  13.     top: 0;
  14.     left: 0;
  15.     right: 0;
  16.     z-index: 100;
  18.     font-size: 1.4rem;
  19. }
  21. /* 页脚 */
  22. .footer {
  23.     /* 基础 */
  24.     color: #666;
  25.     background-color: #fafafa;
  26.     box-shadow: 0 0 3px #999;
  27.     height: 4.4rem;
  29.     /* 固定定位 */
  30.     position: fixed;
  31.     bottom: 0;
  32.     left: 0;
  33.     right: 0;
  34.     z-index: 100;
  36.     font-size: 1.4rem;
  37. }
  39. /* 主体 */
  40. .main {
  41.     /* 绝对定位 */
  42.     position: absolute;
  43.     top: 4.4rem;
  44.     bottom: 4.4rem;
  45.     left: 0;
  46.     right: 0;
  47.     /* background-color: yellow; */
  49.     font-size: 1.4rem;
  50. }

header.css

页眉css

  1. .header {
  2.     display: flex;
  3.     align-items: center;
  4. }
  5. /* 页眉中的三个部分比例 1：6：1 */
  6. .header .login {
  7.     color: #fff;
  8.     flex: 1;
  9.     text-align: center;
  10. }
  12. .header .menu {
  13.     flex: 1;
  14.     text-align: center;
  15.     font-size: 2.5rem;
  16. }
  18. .header .search {
  19.     flex: 6;
  20.     padding: 0.5rem;
  21.     background-color: #fff;
  22.     border-radius: 3rem;
  24.     display: flex;
  25. }
  27. /* logo */
  28. .header .search .logo {
  29.     color: #e43130;
  30.     flex: 0 1 4rem;
  31.     font-size: 2rem;
  32.     /* 水平垂直居中 */
  33.     text-align: center;
  34.     line-height: 2rem;
  35. }
  37. /* 放大镜 */
  38. .header .search .zoom {
  39.     color: #ccc;
  40.     flex: 0 1 4rem;
  42.     border-left: 1px solid;
  43.     /* 水平垂直居中 */
  44.     text-align: center;
  45.     line-height: 2rem;
  46. }
  48. /* 搜索文本框 */
  49. .header .search .words {
  50.     flex: auto;
  51.     border: none;
  52.     outline: none;
  53.     color: #aaa;
  54. }

页脚css

  1. .footer {
  2.     display: flex;
  3.     justify-content: space-around;
  4. }
  6. .footer > div {
  7.     display: flex;
  8.     flex-flow: column nowrap;
  9.     align-items: center;
  10. }
  12. .footer > div > .iconfont {
  13.     font-size: 2rem;
  14. }
  16. .footer > div >span {
  17.     font-size: 1rem;
  18. }

banner.css

广告区css

  1. /* 广告区 */
  3. .main .banner {
  4.     padding: 1rem 1rem;
  5. }
  7. .main .banner img {
  8.     width: 100%;
  9.     border-radius: 1rem;
  10. }

nav.css

导航css

  1. /* 主导航区 */
  3. .main .nav {
  4.     /* background-color: #fff; */
  5.     padding: 1rem;
  7.     display: flex;
  8.     /* 允许换行 */
  9.     flex-flow: row wrap;
  10. }
  12. .main .nav img {
  13.     height: 4rem;
  14.     width: 4rem;
  15. }
  17. .main .nav li {
  18.     /* 每一行显示5个，按100%来分配，应该是20% */
  19.     flex: 1 1 20%;
  21.     display: flex;
  22.     flex-flow: column nowrap;
  23.     align-items: center;
  24. }

ms.css

秒杀css

  1. /* 秒杀 */
  2. .main .ms {
  3.     background-color: #fff;
  4.     padding: 1rem;
  5.     margin: 1rem;
  6. }
  8. .main .ms .ms-top {
  9.     font-size: 1.3rem;
  10.     height: 3rem;
  11.     display: flex;
  12.     justify-content: space-between;
  13. }
  15. .main .ms .ms-top .left {
  16.     display: flex;
  17. }
  19. .main .ms .ms-top .left .notice{
  20.     font-size: 1.1rem;
  21.     height: 2rem;
  22.     border: 1px solid #e43130;
  23.     border-radius: 1rem;
  24.     margin-left: 1rem;
  26.     display: flex;
  27.     justify-content: center;
  28.     align-items: center;
  29. }
  31. .main .ms .ms-top .left .notice .tips{
  32.     background-color: #e43130;
  33.     color: #fff;
  34.     border-radius: 1rem;
  35.     padding: 0.3rem 0.5rem;
  36. }
  38. .main .ms .ms-top .left .notice .time{
  39.     padding: 0.3rem 0.5rem;
  40. }
  42. .main .ms .ms-top .right{
  43.     color: #e43130;
  44. }
  46. /* 主体区 */
  47. .main .ms .ms-body{
  48.     display: flex;
  49.     justify-content: space-between;
  50. }
  52. .main .ms .ms-body li {
  53.     /* 每一行显示5个，按100%来分配，应该是20% */
  54.     flex: 1 1 20%;
  56.     display: flex;
  57.     flex-flow: column nowrap;
  58.     align-items: center;
  59. }
  61. .main .ms .ms-body img{
  62.     height: 8rem;
  63.     width: 8rem;
  64. }
  66. /* 秒杀价 */
  67. .main .ms .ms-body .item div:first-of-type{
  68.     color: #e43130;
  69.     font-weight: bolder;
  70. }
  73. /* 原价 */
  74. .main .ms .ms-body .item div:last-of-type{
  75.     color: #666;
  76.     text-decoration: line-through;
  77.     text-decoration-color: #666;
  78. }

hd.css

活动css

  1. /* 活动 */
  2. .main .hd {
  3.     background-color: #fff;
  4.     padding: 1rem;
  6.     display: flex;
  7. }
  9. .main .hd .item  {
  10.     height: 12rem;
  11.     /* 每一行显示5个，按100%来分配，应该是25% */
  12.     flex: 1 1 25%;
  13. }
  15. .main .hd .item .box  {
  16.     /* 绝对定位 */
  17.     position: absolute;
  18. }
  20. .main .hd .item  img:first-of-type {
  21.     width: 6rem;
  23.     /* 绝对定位 */
  24.     position: absolute;
  25.     top: 0.5rem;
  26.     bottom: 0rem; 
  27.     left: 1rem;
  28.     right: 0;
  29. }
  30. .main .hd .item  img:last-of-type {
  31.     width: 8rem;
  32.     /* 绝对定位 */
  33.     position: absolute;
  34.     top: 0rem;
  35.     bottom: 0rem; 
  36.     left: 0;
  37.     right: 0;
  38. }
  40. .main .hd .item  p:first-of-type {
  41.     width: 8rem;
  42.     font-size: 0.8rem;
  43.     font-weight: bolder;
  44.     text-align: center;
  45.     color: white;
  46.     /* 绝对定位 */
  47.     position: absolute;
  48.     top: 6.8rem;
  49.     bottom: 0rem; 
  50.     left: 0rem;
  51.     right: 0;
  52. }
  53. .main .hd .item  p:last-of-type {
  54.     width: 8rem;
  55.     font-size: 1rem;
  56.     font-weight: bolder;
  57.     text-align: center;
  58.     color: white;
  59.     /* 绝对定位 */
  60.     position: absolute;
  61.     top: 9rem;
  62.     bottom: 0rem; 
  63.     left: 0rem;
  64.     right: 0;
  65. }

tj.css

推荐css

  1. /* 推荐区 */
  2. .main .title {
  3.     height: 4rem;
  4.     color: #555;
  5.     font-weight: 500;
  6.     text-align: center;
  7. }
  9. .main .tj  {
  10.     font-size: 1rem;
  11.     display: flex;
  12.     /* 允许换行 */
  13.     flex-wrap: wrap;
  14. }
  16. .main .tj .item {
  17.     flex: 1 1 calc(50% - 2rem);
  18.     background-color: #fff;
  20.     overflow: hidden;
  22.     display: flex;
  23.     flex-flow: column nowrap;
  25.     margin-left: 1rem;
  26.     margin-bottom: 1rem;
  27.     padding-bottom: 1rem;
  28.     border-radius: 1rem;
  29. }
  31. .main .tj .item img{
  32.     width: 100%;
  33.     height: 100%;
  34. }
  36. .main .tj .item .price {
  37.     display: flex;
  38.     justify-content: space-between;
  39. }
  41. .main .tj .item .price div:first-of-type {
  42.     color: red;
  43. }
  45. .main .tj .item .price div:last-of-type {
  46.     color: #666;
  47.     background-color: #f6f6f6;
  48.     border-radius: 1rem;
  49.     padding: 0.2rem 1rem;
  50. }

zp.css

正品直邮区css

  1. .main .zp {
  2.         background-color: #fff;
  3.         padding: 1rem;
  5.         display: flex;
  6. }
  8. .main .zp .item  {
  9.     padding: 1rem;
  10.     /* 每一行显示5个，按100%来分配，应该是25% */
  11.     flex: 1 1 25%;
  13.     display: flex;
  14.     flex-flow: column wrap;
  15.     justify-content: space-between;
  16.     align-items: flex-start;
  17. }
  19. /* 标题 */
  20. .main .zp .item .title {
  21.     height: 4rem;
  23.     display: flex;
  24.     flex-flow: column wrap;
  25.     justify-content: flex-end;
  26. }
  28. .main .zp .item .title  a:first-of-type{
  29.     color: black;
  30.     font-weight: bolder;
  31. }
  33. .main .zp .item .title  a:last-of-type{
  34.     color: #666;
  35. }
  37. .main .zp .item img{
  38.     width: 8rem;
  39.     height: 8rem;
  40. }

sm.css

声明区css

  1. /* 声明区 */
  2. .main .sm {
  3.     height: 10rem;
  4. }

效果图1

效果图2

效果图3

上一条：DOM型漏洞测试下一条：第一篇php博客hehe
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多