header+section+footer(底部按钮布局)_footer section怎么设置-CSDN博客

本文详细探讨了网页设计中header、section和footer的重要性和使用方法，重点讲解了如何有效地布局底部按钮，以提升用户体验和网站整体的视觉效果。通过实例解析，阐述了各部分在页面结构中的角色，以及如何利用现代CSS技术实现响应式设计。
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <meta content="telephone=no" name="format-detection">
   <meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
   <style>
      @font-face {
         font-family: 'iconfont';
         src: url('http://at.alicdn.com/t/font_1474796923_6082804.eot'); /* IE9*/
         src: url('http://at.alicdn.com/t/font_1474796923_6082804.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('http://at.alicdn.com/t/font_1474796923_6082804.woff') format('woff'), /* chrome、firefox */
         url('http://at.alicdn.com/t/font_1474796923_6082804.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
         url('http://at.alicdn.com/t/font_1474796923_6082804.svg#iconfont') format('svg'); /* iOS 4.1- */
      }
      .iconfont {
         font-family:"iconfont" !important;
         font-size:16px;
         font-style:normal;
         -webkit-font-smoothing: antialiased;
         -webkit-text-stroke-width: 0.2px;
         -moz-osx-font-smoothing: grayscale;
      }
      *{
         margin: 0;
         padding: 0;
         box-sizing: border-box;/*注意*/
      }
      html,body,#app{/*注意*/
         height: 100%;
         overflow:hidden;
      }
      header,section{
         display: block;
      }
      .header{
         position: absolute;
         left: 0;
         top: 0;
         width: 100%;
         z-index: 3;
         height: 45px;
         line-height: 45px;
         font-size: 19px;
         background: linear-gradient(to bottom, #303036, #3c3b40);
         color: #ffffff;
         text-align: center;
      }
      .footer{
         bottom: 0;
         left: 0;
         width: 100%;
         position: absolute;
         z-index: 3;
      }
      .footer:before{
         content: "";
         position: absolute;
         width: 200%;
         left: 0;
         top: 0;
         transform: scale(0.5);
         transform-origin: 0 0;
         -webkit-transform: scale(0.5);
         -webkit-transform-origin: 0 0;
         background-color: #b7b7b7;
         height: 1px;
         z-index: 2;
      }
      .content{
         padding-top: 45px;
         padding-bottom: 50px;
         overflow: hidden;
         position: relative;
         height: 100%;
      }
      .content-list{/*注意*/
         position: relative;
         height: 100%;
         overflow: auto;
      }
      .content-list li{
         padding: 15px 0;
         text-align: center;
         border-bottom: 1px solid #ddd;
      }
      nav{
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         width: 100%;
         overflow: hidden;
         height: 50px;
         padding-top: 8px;
         background: #f9f9f9;
         font-size: 12px;
      }
      dl{
         -moz-user-select: none;
         -ms-user-select: none;
         user-select: none;
         -webkit-user-select: none;
         -webkit-box-flex: 1;
         -ms-flex-positive: 1;
         flex-grow: 1;
         text-align: center;
         line-height: 1;
      }
      .iconfont{
         position: relative;
         width: 28px;
         height: 28px;
         margin: 0 auto;
         font-size: 28px;
         color: #797979;
         margin-bottom: 2px;
      }
      dd{
         color: #929292;
         -webkit-transform-origin: 50% 0;
         transform-origin: 50% 0;
         -webkit-transform: scale(0.9);
         transform: scale(0.9);
      }
      .icon-wechat:before{
         content: "\E600";
         box-sizing: inherit;
      }
      .icon-contact:before{
         content: "\E610";
         box-sizing: inherit;
      }
      .icon-find:before{
         content: "\E603";
         box-sizing: inherit;
      }
      .icon-me:before{
         content: "\E601";
         box-sizing: inherit;
      }
      ._news-count{
         position: absolute;
         font-style: initial;
         font-family: PingFang SC, Hiragino Sans GB, Arial, Microsoft YaHei, Helvetica;
         right: -9px;
         top: -5px;
         z-index: 2;
         padding: 0 4px;
         width: auto;
         min-width: 18px;
         height: 18px;
         line-height: 18px;
         border-radius: 9px;
         color: #ffffff;
         text-align: center;
         font-size: 14px;
         background-color: #f43531;
      }
      .v-link-active dt{
         color: #0bb908;
      }
   </style>
</head>
<body>

<div id="app">
   <header class="header">title</header>
   <section class="content">
      <ul class="content-list"></ul>
   </section>
   <footer class="footer">
      <nav>
         <dl class="v-link-active">
            <dt class="iconfont icon-wechat">
               <i class="_news-count">45</i>
            </dt>
            <dd>微信</dd>
         </dl>
         <dl>
            <dt class="iconfont icon-contact"></dt>
            <dd>通讯录</dd>
         </dl>
         <dl>
            <dt class="iconfont icon-find"></dt>
            <dd>发现</dd>
         </dl>
         <dl>
            <dt class="iconfont icon-me"></dt>
            <dd>我</dd>
         </dl>
      </nav>
   </footer>
</div>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
   $(function(){
      var _h=[];
      for(var i=0;i<40;i++){
         _h.push('<li>'+i+'</li>');
      }
      $('.content-list').append(_h.join(''));

      var x=0;
      $('.content-list').scroll(function() {
         console.log(x+=1)
      });
   })
</script>
</body>
</html>