search

博客列表 >flex 京东页眉 和 页脚

flex 京东页眉 和 页脚

心
心原创
2020年12月24日 14:56:33902浏览
  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>京东</title>
  8.     <style>
  9.          /* 重置公共样式 */
  10.         * {
  11.             padding: 0;
  12.             margin: 0;
  13.             box-sizing: border-box;
  14.         }
  16.         body{
  17.             background-color:#f6f6f6 ;
  18.         }
  20.         a {
  21.             text-decoration: none;
  22.             color:#7b7b7b;
  23.         }
  25.         li{
  26.             list-style:none;
  27.         }
  29.         html{
  30.             font-size:10px;
  31.         }
  33.         @media screen and (min-width:300px){
  34.             html{
  35.                 font-size: 5px;
  36.             }
  37.         }
  39.         @media screen and (min-width:600px){
  40.             html{
  41.                 font-size: 14px;
  42.             }
  43.         }
  45.         @media screen and (min-width:800px){
  46.             html{
  47.                 font-size: 20px;
  48.             }
  49.         }
  50.          @charset 'UTF-8';
  51.  @import 'reset.css';
  53.  header {
  54.      height: 4.4rem;
  55.      background-color: #e43130;
  56.      position:fixed;
  57.      top:0;
  58.      left:0;
  59.      right: 0;
  60.      z-index: 100;
  61.      color:#ffffff;
  62.      font-size:3rem;
  63.      display: flex;
  64.      align-items: center;
  65.      text-align: center;
  66.  }
  67.     header .herder-icon-santiaoxian{
  68.         text-align: center;
  69.         flex:1;
  70.     }
  71.     header .herder-icon-santiaoxian .iconfont{
  72.         font-size: 4rem;
  73.     }
  74.     header .logo-icon-work{
  75.         flex:6;
  76.         text-align: center;
  77.         background-color: #ffffff;
  78.         border-radius: 3rem;
  79.         color:red;
  80.         display: flex;
  81.         align-items: center;
  82.         padding: 0.5rem;
  83.     }
  84.     header .logo-icon-work .logo{
  85.         flex:0  0 5rem;
  86.         /* border: 1px solid red; */
  87.     }
  88.     header .logo-icon-work .iconfont{
  89.         /* border: 1px solid red; */
  90.         flex:0 0 4rem;
  91.         text-align: 2.1rem;
  92.         border-left:1px solid #ccc;
  93.         color:#ccc;
  94.         font-size:2rem;
  95.         /* margin:0.4rem; */
  96.     }
  97.     header .logo-icon-work input{
  98.         flex:auto;
  99.         border: none;
  100.         outline: none;
  101.         color:#ccc;
  102.         line-height: 2rem;
  103.     }
  104.     header .login{
  105.         flex: 1;
  106.     }
  107.     header .login a{
  108.         color:#ffffff;
  109.         text-align: center;
  110.     }
  113.      main{
  114.         position:absolute;
  115.         top:4.4rem;
  116.         left:0;
  117.         right: 0;
  118.         bottom:4.4rem;
  120.     }
  122.      footer{
  123.          height: 4.4rem;
  124.          background-color:#fafafa;
  125.          box-shadow: 0 0 3px #999;
  126.          position:fixed;
  127.          bottom: 0;  
  128.          left: 0;
  129.          right: 0;
  130.          z-index: 100;
  131.          color:#666;
  132.          font-size: 1rem;
  133.          display: flex;
  134.          flex-direction: space-between;
  135.      }
  136.      footer div {
  137.         flex:auto;
  138.         align-items: center;
  139.         justify-content: center;
  140.         display: flex;
  141.         text-align: center;
  142.      }
  144.      footer div .iconfont{
  145.          font-size:2rem ;
  146.      }
  148.      footer div a{
  149.         display: flex;
  150.         flex-direction: column;
  151.         text-align: center;
  152.      }
  155.      footer div:first-child a{
  156.          color:#e43130;
  157.      }
  160.     </style>
  161. </head>
  163. <body>
  164.     <!-- 页眉 -->
  165.     <header>
  166.         <div class='herder-icon-santiaoxian'><span class='iconfont icon-santiaoxian'></span></div>
  167.         <div class='logo-icon-work'>
  168.             <span class='logo'>JD</span>
  169.             <span class='iconfont icon-sousuokuang'></span>
  170.             <input type="work" value="笔记本硬盘">
  171.         </div>
  172.         <div class='login'>
  173.             <a href="">登录</a>
  174.         </div>
  175.     </header>
  176.     <!-- 主体 -->
  177.     <main>
  179.     </main>
  180.     <!-- 页脚 -->
  181.     <footer>
  182.         <div>
  183.             <a href="#">
  184.                 <span class="iconfont icon-jingdonglogo"></span>
  185.                 <span>首页</span>
  186.             </a>
  187.         </div>
  188.         <div>
  189.             <a href="#">
  190.                 <span class="iconfont icon-category"></span>
  191.                 <span>分类</span>
  192.             </a>
  193.         </div>
  194.         <div>
  195.             <a href="#">
  196.                 <span class="iconfont icon-laiyuanICON_fuzhi-06"></span>
  197.                 <span>京喜</span>
  198.             </a>
  199.         </div>
  200.         <div>
  201.             <a href="#">
  202.                 <span class="iconfont icon-che"></span>
  203.                 <span>购物车</span>
  204.             </a>
  205.         </div>
  206.         <div>
  207.             <a href="#">
  208.                 <span class="iconfont icon-denglu-1"></span>
  209.                 <span>未登录</span>
  210.             </a>
  211.         </div>
  212.     </footer>
  213. </body>
  215. </html>

京东页眉和页脚

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

相关文章

查看更多