strick-footer 粘边布局

1	`当网页缩小，缩放到一定高度时（这个高度就是页面内容高度）footer的页尾自动消失,这个就叫做粘边布局`

strick-footer 粘边布局基本思路:

主体{
　　height:100%;    
}
内容体{
　　min-height:100%;
　　margin-bottom:50px;
}
 
要在内容体最后加一个div 标签
div{
　　height:50px;
}
最后在 footer类高 = 属性等于margin-bottom = 内容体的最后一个div
 
footer{
　　height:50px;
}

　　代码html

  1 <html>
  2 
  3 <head>
  4     <title>alif_nav</title>
  5     <style>
  6         /*主体*/
  7         .container { 
  8             height: 100%;
  9         }
 10         /*内容*/
 11         .content {
 12             min-height: 100%;
 13             margin-bottom: -50px;
 14         }
 15         /*内容后的加最后一个div标签*/
 16         .push {
 17             height: 50px;
 18         }
 19         /*底部footer*/
 20         footer {
 21             height: 50px;
 22             border: 1px solid red;
 23 
 24         }
 25 
 26         .logo {
 27             margin: 0 auto;
 28             height: 100px;
 29             width: 1000px;
 30 
 31         }
 32 
 33         .head {
 34             height: 70px;
 35             width: 100%;
 36             background: url('./static/images/img/body_bg.jpg') repeat;
 37         }
 38 
 39         .nav {
 40             margin: 0 auto;
 41             height: 70px;
 42             width: 1000px;
 43 
 44 
 45         }
 46 
 47         .ul-left {
 48             float: left;
 49         }
 50 
 51         li {
 52             float: left;
 53             width: 100px;
 54             text-align: center;
 55             list-style: none;
 56             font-size: 20px;
 57             font-weight: 700;
 58 
 59         }
 60 
 61         li:hover {
 62             height: 55px;
 63             color: red;
 64             background: white;
 65         }
 66 
 67         .tag {
 68             float: left;
 69         }
 70 
 71         .ul-right {
 72             float: right;
 73         }
 74 
 75         .img2 {
 76             position: relative;
 77             top: 25px;
 78             left: 100px;
 79         }
 80 
 81     </style>
 82 </head>
 83 
 84 <body>
 85     <div class="container">
 86         <div class="content">
 87             <div class="logo">
 88                 <img src="./static/images/img/logo.jpg" alt="">
 89             </div>
 90             <div class="head">
 91                 <div class="nav clearfix">
 92                     <ul class="ul-left">
 93                         <li>首页</li>
 94                         <li>原材料</li>
 95                         <li>小商品</li>
 96                         <li>食品</li>
 97                         <li>VIP批发</li>
 98                     </ul>
 99                     <div class="tag">
100                         <img class="img2" src="./static/images/img/line.jpg" alt="">
101                     </div>
102                     <ul class="ul-right">
103                         <li>登入</li>
104                         <li>注册</li>
105                         <li>个人信息</li>
106                     </ul>
107                 </div>
108             </div>
109             <p>你好</p>
110             <p>你好</p>
111             <p>你好</p>
112             <p>你好</p>
113             <p>你好</p>
114             <p>你好</p>
115 
116             <div class="push"></div>
117         </div>
118         <footer>
119         </footer>
120     </div>
121 
122 </body>
123 
124 </html>
125

posted @ 2018-12-06 09:14 TY520 阅读(26176) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

取法其上，得乎其中

伸手摘星，即便一无所获，也不至于满手污泥

strick-footer 粘边布局

公告

最新随笔

积分与排名

随笔分类 (124)

阅读排行榜