Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 京东app页眉-推荐-页脚制作
Blogger Information
Blog 70
fans 1
comment 0
visits 53076
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
京东app页眉-推荐-页脚制作
葡萄枝子
Original
1127 people have browsed it

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

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

  • 页眉，推荐，页脚代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>JD home</title>
  8.     <link rel="stylesheet" href="static/css/jd.css">
  9. </head>
  11. <body>
  12.     <!-- 页眉 -->
  13.     <header>
  14.         <!-- 导航图标 -->
  15.         <div class="menu iconfont icon-daohang"></div>
  16.         <!-- 中间搜索框 -->
  17.         <div class="search">
  18.             <div class="logo">JD</div>
  19.             <div class="zoom iconfont icon-sousuo"></div>
  20.             <input class="words" type="text" name="search" value="超薄本" />
  21.         </div>
  22.         <!-- 登录链接 -->
  23.         <div class="login"><a href="">登录</a></div>
  24.     </header>
  25.     <!-- 主体 -->
  26.     <main>
  27.         <h2>猜你喜欢</h2>
  28.         <ul>
  29.             <li class="item">
  30.                 <a href=""><img
  31.                         src="https://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/118759/27/18140/174299/5f639d55Eff2fb460/f0a383120faa5213.jpg!q70.dpg.webp"
  32.                         alt=""></a>
  33.                 <p>100支长绒棉欧式北欧风轻奢四件套全棉纯棉床单床笠被套酒店三件套床上用品4 梦蓝银灰 1.8m床单款四件套(被套200*230cm)</p>
  34.                 <div class="price">
  35.                     <div>￥ 498</div>
  36.                     <div>看相似</div>
  37.                 </div>
  38.             </li>
  39.             <li class="item">
  40.                 <a href=""><img
  41.                         src="https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/148010/28/8733/166712/5f65b4c5E8506b16c/71f1adfb1a49b10f.jpg!q70.dpg.webp"
  42.                         alt=""></a>
  43.                 <p>超媛加绒加厚中长款打底衫女冬季新款显瘦大码女装上衣立领外穿连衣裙FF-A015-C#9916你 黑色 S</p>
  44.                 <div class="price">
  45.                     <div>￥ 498</div>
  46.                     <div>看相似</div>
  47.                 </div>
  48.             </li>
  49.             <li class="item">
  50.                 <a href=""><img
  51.                         src="https://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/150600/39/11576/322314/5fdf806bE968752a7/e96be941acbffd20.jpg!q70.dpg.webp"
  52.                         alt=""></a>
  53.                 <p>芬腾 保暖内衣女士套装秋衣秋裤秋冬季新品棉质修身圆领少女棉毛衫长袖长裤打底衫女 浅紫（蕾丝领） M </p>
  54.                 <div class="price">
  55.                     <div>￥ 498</div>
  56.                     <div>看相似</div>
  57.                 </div>
  58.             </li>
  59.             <li class="item">
  60.                 <a href=""><img
  61.                         src="https://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/135532/8/9634/253738/5f59df91Ec8d59432/dafe418dc6f75762.jpg!q70.dpg.webp"
  62.                         alt=""></a>
  63.                 <p>@潮牌许刘芒1970s紫外线变色高帮手绘帆布鞋女2020春秋款百搭ulzzang日系女生板鞋 黑色(高 帮款，阳光下变色时效8小时) 39</p>
  64.                 <div class="price">
  65.                     <div>￥ 498</div>
  66.                     <div>看相似</div>
  67.                 </div>
  68.             </li>
  69.         </ul>
  70.     </main>
  71.     <!-- 页脚 -->
  72.     <footer>
  73.         <div>
  74.             <div class="iconfont icon-shouye"></div>
  75.             <span>主页</span>
  76.         </div>
  77.         <div>
  78.             <div class="iconfont icon-fenlei"></div>
  79.             <span>分类</span>
  80.         </div>
  81.         <div>
  82.             <div class="iconfont icon-jingxi"></div>
  83.             <span>京喜</span>
  84.         </div>
  85.         <div>
  86.             <div class="iconfont icon-gouwuche-01"></div>
  87.             <span>购物车</span>
  88.         </div>
  89.         <div>
  90.             <div class="iconfont icon-denglu"></div>
  91.             <span>未登录</span>
  92.         </div>
  93.     </footer>
  94. </body>
  96. </html>
  • 引入的 static/css/jd.css 样式
  1. /* 导入初始化 css */
  2. @import 'reset.css';
  4. /*
  5. 导入7个字体图标
  6. icon-shouye 首页
  7. icon-gouwuche-01 购物车
  8. icon-daohang 导航
  9. icon-denglu 登录
  10. icon-fenlei 分类
  11. icon-jingxi 惊喜
  12. icon-sousuo 搜索
  13. */
  14. @import '//at.alicdn.com/t/font_2289282_a45l8mmz4j.css';
  16. /* 页眉 */
  17. header {
  18.     position: fixed;
  19.     top: 0;
  20.     left: 0;
  21.     right: 0;
  22.     background-color: red;
  23.     height: 4rem;
  24.     /* flex 容器 */
  25.     display: flex;
  26.     /* 交叉轴居中 */
  27.     align-items: center;
  28.     z-index: 100;
  29. }
  31. /* 左边菜单按钮 */
  32. header .menu {
  33.     flex: 1;
  34.     text-align: center;
  35.     color: white;
  36. }
  38. /* 中间搜索框 */
  39. header .search {
  40.     flex: 6;
  41.     display: flex;
  42.     align-items: center;
  43.     border-radius: 2em;
  44.     background-color: white;
  45.     height: 2.5rem;
  46. }
  47. /* logo */
  48. header .search .logo {
  49.     color: red;
  50.     flex: 0 1 2em;
  51.     font-size: 1.5rem;
  52.     text-align: center;
  53. }
  54. /* 搜索图标 */
  55. header .search .zoom {
  56.     flex: 0 1 2em;
  57.     text-align: center;
  58.     border-left: 1px solid #ccc;
  59. }
  60. /* 输入框 */
  61. header .search .words {
  62.     border: none;
  63.     outline: none;
  64.     color: #bbb;
  65. }
  67. /* 右边登录链接 */
  68. header .login {
  69.     flex: 1;
  70.     text-align: center;
  71. }
  72. header .login a{
  73.     color: white;
  74.     font-size: 1.2rem;
  75. }
  77. /* 主体 */
  78. main {
  79.     position: absolute;
  80.     top: 4rem;
  81.     left: 0;
  82.     reight: 0;
  83.     bottom: 4.5rem;
  84. }
  85. main h2 {
  86.     text-align: center;
  87.     margin: .5em 0;
  88. }
  90. main ul {
  91.     /* 转flex容器 */
  92.     display: flex;
  93.     /* 主轴横向，交叉轴换行 */
  94.     flex-flow: row wrap;
  95. }
  96. main ul .item {
  97.     flex: 1 1 50%;
  98.     padding: .5em;
  99. }
  100. main ul .item a img {
  101.     width: 100%;
  102. }
  103. main ul .item p {
  104.     font-size: 1.25rem;
  105.     margin:.4em 0;
  106. }
  107. main ul .item .price {
  108.     display: flex;
  109.     /* 两端对齐 */
  110.     justify-content: space-between;
  111. }
  112. main ul .item .price div:first-of-type {
  113.     color:red;
  114.     font-size: 1.4rem;
  115. }
  116. main ul .item .price div:last-of-type {
  117.     background-color: #ddd;
  118.     border-radius: 1em;
  119.     padding: .5em;
  120. }
  122. /* 页脚 */
  123. footer {
  124.     position: fixed;
  125.     bottom: 0;
  126.     left: 0;
  127.     right: 0;
  128.     height: 4.5rem;
  129.     background-color: #eee;
  130.     /* 转flex容器 */
  131.     display: flex;
  132.     /* 分散对齐 */
  133.     justify-content: space-around;
  134.     /* 交叉轴居中 */
  135.     align-items: center;
  137. }
  138. footer > div {
  139.     /* 将flex容器项目居中 */
  140.     display: flex;
  141.     flex-flow: column nowrap;
  142.     align-items: center;
  143. }
  • 导入的 reset.css 样式是默认的
  1. /* reset css */
  2. * {
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6. }
  7. li {
  8.     list-style: none;
  9. }
  10. a {
  11.     color: #7b7b7b;
  12.     text-decoration: none;
  13. }
  14. body {
  15.     background-color: #F6F6F6;
  16. }
  17. html {
  18.     font-size: 10px;
  19. }
  21. /* 媒体查询 */
  22. @media screen and (min-width: 480px) {
  23.     html {
  24.         font-size: 12px;
  25.     }
  26. }
  27. @media screen and (min-width: 640px) {
  28.     html {
  29.         font-size: 14px;
  30.     }
  31. }
  32. @media screen and (min-width: 720px) {
  33.     html {
  34.         font-size: 16px;
  35.     }
  36. }
  • 导入的阿里 iconfont 7 个字体图标

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

  • 附上制作图

京东app页眉推荐页脚制作

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：RMB是一个字体图标, 不是一个符号
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