欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

京东app页眉-推荐-页脚制作

程序员文章站 2022-03-03 23:41:19
...

京东app页眉-推荐-页脚制作

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

  • 页眉，推荐，页脚代码
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

    4. 

  4. <head>
    5. 

  5.     <meta charset="UTF-8">
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. 

  7.     <title>JD home</title>
    8. 

  8.     <link rel="stylesheet" href="static/css/jd.css">
    9. 

  9. </head>
    10. 

    11. 

  11. <body>
    12. 

  12.     <!-- 页眉 -->
    13. 

  13.     <header>
    14. 

  14.         <!-- 导航图标 -->
    15. 

  15.         <div class="menu iconfont icon-daohang"></div>
    16. 

  16.         <!-- 中间搜索框 -->
    17. 

  17.         <div class="search">
    18. 

  18.             <div class="logo">JD</div>
    19. 

  19.             <div class="zoom iconfont icon-sousuo"></div>
    20. 

  20.             <input class="words" type="text" name="search" value="超薄本" />
    21. 

  21.         </div>
    22. 

  22.         <!-- 登录链接 -->
    23. 

  23.         <div class="login"><a href="">登录</a></div>
    24. 

  24.     </header>
    25. 

  25.     <!-- 主体 -->
    26. 

  26.     <main>
    27. 

  27.         <h2>猜你喜欢</h2>
    28. 

  28.         <ul>
    29. 

  29.             <li class="item">
    30. 

  30.                 <a href=""><img
    31. 

  31.                         src="https://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/118759/27/18140/174299/5f639d55Eff2fb460/f0a383120faa5213.jpg!q70.dpg.webp"
    32. 

  32.                         alt=""></a>
    33. 

  33.                 <p>100支长绒棉欧式北欧风轻奢四件套全棉纯棉床单床笠被套酒店三件套床上用品4 梦蓝银灰 1.8m床单款四件套(被套200*230cm)</p>
    34. 

  34.                 <div class="price">
    35. 

  35.                     <div>￥ 498</div>
    36. 

  36.                     <div>看相似</div>
    37. 

  37.                 </div>
    38. 

  38.             </li>
    39. 

  39.             <li class="item">
    40. 

  40.                 <a href=""><img
    41. 

  41.                         src="https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/148010/28/8733/166712/5f65b4c5E8506b16c/71f1adfb1a49b10f.jpg!q70.dpg.webp"
    42. 

  42.                         alt=""></a>
    43. 

  43.                 <p>超媛加绒加厚中长款打底衫女冬季新款显瘦大码女装上衣立领外穿连衣裙FF-A015-C#9916你 黑色 S</p>
    44. 

  44.                 <div class="price">
    45. 

  45.                     <div>￥ 498</div>
    46. 

  46.                     <div>看相似</div>
    47. 

  47.                 </div>
    48. 

  48.             </li>
    49. 

  49.             <li class="item">
    50. 

  50.                 <a href=""><img
    51. 

  51.                         src="https://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/150600/39/11576/322314/5fdf806bE968752a7/e96be941acbffd20.jpg!q70.dpg.webp"
    52. 

  52.                         alt=""></a>
    53. 

  53.                 <p>芬腾 保暖内衣女士套装秋衣秋裤秋冬季新品棉质修身圆领少女棉毛衫长袖长裤打底衫女 浅紫（蕾丝领） M </p>
    54. 

  54.                 <div class="price">
    55. 

  55.                     <div>￥ 498</div>
    56. 

  56.                     <div>看相似</div>
    57. 

  57.                 </div>
    58. 

  58.             </li>
    59. 

  59.             <li class="item">
    60. 

  60.                 <a href=""><img
    61. 

  61.                         src="https://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/135532/8/9634/253738/5f59df91Ec8d59432/dafe418dc6f75762.jpg!q70.dpg.webp"
    62. 

  62.                         alt=""></a>
    63. 

  63.                 <p>@潮牌许刘芒1970s紫外线变色高帮手绘帆布鞋女2020春秋款百搭ulzzang日系女生板鞋 黑色(高 帮款，阳光下变色时效8小时) 39</p>
    64. 

  64.                 <div class="price">
    65. 

  65.                     <div>￥ 498</div>
    66. 

  66.                     <div>看相似</div>
    67. 

  67.                 </div>
    68. 

  68.             </li>
    69. 

  69.         </ul>
    70. 

  70.     </main>
    71. 

  71.     <!-- 页脚 -->
    72. 

  72.     <footer>
    73. 

  73.         <div>
    74. 

  74.             <div class="iconfont icon-shouye"></div>
    75. 

  75.             <span>主页</span>
    76. 

  76.         </div>
    77. 

  77.         <div>
    78. 

  78.             <div class="iconfont icon-fenlei"></div>
    79. 

  79.             <span>分类</span>
    80. 

  80.         </div>
    81. 

  81.         <div>
    82. 

  82.             <div class="iconfont icon-jingxi"></div>
    83. 

  83.             <span>京喜</span>
    84. 

  84.         </div>
    85. 

  85.         <div>
    86. 

  86.             <div class="iconfont icon-gouwuche-01"></div>
    87. 

  87.             <span>购物车</span>
    88. 

  88.         </div>
    89. 

  89.         <div>
    90. 

  90.             <div class="iconfont icon-denglu"></div>
    91. 

  91.             <span>未登录</span>
    92. 

  92.         </div>
    93. 

  93.     </footer>
    94. 

  94. </body>
    95. 

    96. 

  96. </html>
    97.
  • 引入的 static/css/jd.css 样式
    

  1. /* 导入初始化 css */
    2. 

  2. @import 'reset.css';
    3. 

    4. 

  4. /*
    5. 

  5. 导入7个字体图标
    6. 

  6. icon-shouye 首页
    7. 

  7. icon-gouwuche-01 购物车
    8. 

  8. icon-daohang 导航
    9. 

  9. icon-denglu 登录
    10. 

  10. icon-fenlei 分类
    11. 

  11. icon-jingxi 惊喜
    12. 

  12. icon-sousuo 搜索
    13. 

  13. */
    14. 

  14. @import '//at.alicdn.com/t/font_2289282_a45l8mmz4j.css';
    15. 

    16. 

  16. /* 页眉 */
    17. 

  17. header {
    18. 

  18.     position: fixed;
    19. 

  19.     top: 0;
    20. 

  20.     left: 0;
    21. 

  21.     right: 0;
    22. 

  22.     background-color: red;
    23. 

  23.     height: 4rem;
    24. 

  24.     /* flex 容器 */
    25. 

  25.     display: flex;
    26. 

  26.     /* 交叉轴居中 */
    27. 

  27.     align-items: center;
    28. 

  28.     z-index: 100;
    29. 

  29. }
    30. 

    31. 

  31. /* 左边菜单按钮 */
    32. 

  32. header .menu {
    33. 

  33.     flex: 1;
    34. 

  34.     text-align: center;
    35. 

  35.     color: white;
    36. 

  36. }
    37. 

    38. 

  38. /* 中间搜索框 */
    39. 

  39. header .search {
    40. 

  40.     flex: 6;
    41. 

  41.     display: flex;
    42. 

  42.     align-items: center;
    43. 

  43.     border-radius: 2em;
    44. 

  44.     background-color: white;
    45. 

  45.     height: 2.5rem;
    46. 

  46. }
    47. 

  47. /* logo */
    48. 

  48. header .search .logo {
    49. 

  49.     color: red;
    50. 

  50.     flex: 0 1 2em;
    51. 

  51.     font-size: 1.5rem;
    52. 

  52.     text-align: center;
    53. 

  53. }
    54. 

  54. /* 搜索图标 */
    55. 

  55. header .search .zoom {
    56. 

  56.     flex: 0 1 2em;
    57. 

  57.     text-align: center;
    58. 

  58.     border-left: 1px solid #ccc;
    59. 

  59. }
    60. 

  60. /* 输入框 */
    61. 

  61. header .search .words {
    62. 

  62.     border: none;
    63. 

  63.     outline: none;
    64. 

  64.     color: #bbb;
    65. 

  65. }
    66. 

    67. 

  67. /* 右边登录链接 */
    68. 

  68. header .login {
    69. 

  69.     flex: 1;
    70. 

  70.     text-align: center;
    71. 

  71. }
    72. 

  72. header .login a{
    73. 

  73.     color: white;
    74. 

  74.     font-size: 1.2rem;
    75. 

  75. }
    76. 

    77. 

  77. /* 主体 */
    78. 

  78. main {
    79. 

  79.     position: absolute;
    80. 

  80.     top: 4rem;
    81. 

  81.     left: 0;
    82. 

  82.     reight: 0;
    83. 

  83.     bottom: 4.5rem;
    84. 

  84. }
    85. 

  85. main h2 {
    86. 

  86.     text-align: center;
    87. 

  87.     margin: .5em 0;
    88. 

  88. }
    89. 

    90. 

  90. main ul {
    91. 

  91.     /* 转flex容器 */
    92. 

  92.     display: flex;
    93. 

  93.     /* 主轴横向，交叉轴换行 */
    94. 

  94.     flex-flow: row wrap;
    95. 

  95. }
    96. 

  96. main ul .item {
    97. 

  97.     flex: 1 1 50%;
    98. 

  98.     padding: .5em;
    99. 

  99. }
    100. 

  100. main ul .item a img {
    101. 

  101.     width: 100%;
    102. 

  102. }
    103. 

  103. main ul .item p {
    104. 

  104.     font-size: 1.25rem;
    105. 

  105.     margin:.4em 0;
    106. 

  106. }
    107. 

  107. main ul .item .price {
    108. 

  108.     display: flex;
    109. 

  109.     /* 两端对齐 */
    110. 

  110.     justify-content: space-between;
    111. 

  111. }
    112. 

  112. main ul .item .price div:first-of-type {
    113. 

  113.     color:red;
    114. 

  114.     font-size: 1.4rem;
    115. 

  115. }
    116. 

  116. main ul .item .price div:last-of-type {
    117. 

  117.     background-color: #ddd;
    118. 

  118.     border-radius: 1em;
    119. 

  119.     padding: .5em;
    120. 

  120. }
    121. 

    122. 

  122. /* 页脚 */
    123. 

  123. footer {
    124. 

  124.     position: fixed;
    125. 

  125.     bottom: 0;
    126. 

  126.     left: 0;
    127. 

  127.     right: 0;
    128. 

  128.     height: 4.5rem;
    129. 

  129.     background-color: #eee;
    130. 

  130.     /* 转flex容器 */
    131. 

  131.     display: flex;
    132. 

  132.     /* 分散对齐 */
    133. 

  133.     justify-content: space-around;
    134. 

  134.     /* 交叉轴居中 */
    135. 

  135.     align-items: center;
    136. 

    137. 

  137. }
    138. 

  138. footer > div {
    139. 

  139.     /* 将flex容器项目居中 */
    140. 

  140.     display: flex;
    141. 

  141.     flex-flow: column nowrap;
    142. 

  142.     align-items: center;
    143. 

  143. }
    144.
  • 导入的 reset.css 样式是默认的
    

  1. /* reset css */
    2. 

  2. * {
    3. 

  3.     margin: 0;
    4. 

  4.     padding: 0;
    5. 

  5.     box-sizing: border-box;
    6. 

  6. }
    7. 

  7. li {
    8. 

  8.     list-style: none;
    9. 

  9. }
    10. 

  10. a {
    11. 

  11.     color: #7b7b7b;
    12. 

  12.     text-decoration: none;
    13. 

  13. }
    14. 

  14. body {
    15. 

  15.     background-color: #F6F6F6;
    16. 

  16. }
    17. 

  17. html {
    18. 

  18.     font-size: 10px;
    19. 

  19. }
    20. 

    21. 

  21. /* 媒体查询 */
    22. 

  22. @media screen and (min-width: 480px) {
    23. 

  23.     html {
    24. 

  24.         font-size: 12px;
    25. 

  25.     }
    26. 

  26. }
    27. 

  27. @media screen and (min-width: 640px) {
    28. 

  28.     html {
    29. 

  29.         font-size: 14px;
    30. 

  30.     }
    31. 

  31. }
    32. 

  32. @media screen and (min-width: 720px) {
    33. 

  33.     html {
    34. 

  34.         font-size: 16px;
    35. 

  35.     }
    36. 

  36. }
    37.
  • 导入的阿里 iconfont 7 个字体图标

链接为 https://at.alicdn.com/t/font_2289282_a45l8mmz4j.css

  • 附上制作图

京东app页眉-推荐-页脚制作

上一篇： php如何实现购物车

下一篇： 利用html来制作一个简单美观的购物车界面

推荐阅读