登录  /  注册
首页 > 博客列表 > 京东app页眉-推荐-页脚制作
博主信息
博文 70
粉丝 1
评论 0
访问量 50882
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
京东app页眉-推荐-页脚制作
葡萄枝子
原创
1078人浏览过

京东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页眉推荐页脚制作

批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：RMB是一个字体图标, 不是一个符号
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 精品班

  • 技术支持

  • 技术咨询

  • 学习群

  • 会员优惠

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录