search

博客列表 >京东app页眉-推荐-页脚制作

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

葡萄枝子
葡萄枝子原创
2020年12月24日 00:44:431126浏览

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

上一条：flex容器与项目的常用属性实例演示下一条：前端CSS基础引入和选择器使用讲解
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多