Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex 京东页眉 和 页脚
Blogger Information
Blog 19
fans 0
comment 1
visits 14095
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
flex 京东页眉 和 页脚
心
Original
903 people have browsed it
  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>

京东页眉和页脚

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：直难看, 字号控制不住吗?
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