[聚合文章] 网页布局

  1. 首页
  2. 聚合文章
  3. 文章详情
CSS 1900-01-01 14 阅读
原文链接: https://www.jianshu.com/p/2f7f6c8d1c9f
1.png

5、经典的行布局

<!DOCTYPE html><html><head>    <title></title>    <style type="text/css">        body{            margin: 0;            padding: 0;            color: #fff;            text-align: center;            font-size: 16px;        }        .header{            width: 800px;            height: 50px;            background:#333;            margin: 0 auto;            line-height: 50px;        }        .banner{            /*width: 800px;*/            width: 100%; /*多行布局某部分自适应*/            height: 300px;            background:#30a457;            margin: 0 auto;            line-height: 300px;        }        .container{            width: 800px;            height: 1000px;            background: #4c77f2;            margin: 0 auto;        }        .footer{            width: 800px;            height: 100px;            background: #333;            margin: 0 auto;            line-height: 100px;        }    </style></head><body>    <div class="header">这是页面的头部</div>    <div class="banner">这是页面的banner图</div>    <div class="container">这是页面的内容</div>    <div class="footer">这是页面的底部</div></body></html>

需求：要求导航栏随着页面滚动固定在顶部：

.header{    width: 100%;    height: 50px;    background:#333;    margin: 0 auto;    line-height: 50px;    position: fixed;/*使其固定在顶端*/}.banner{    width: 800px;    /*width: 100%; */    height: 300px;    background:#30a457;    margin: 0 auto;    line-height: 300px;    padding-top: 50px;/* 防止header覆盖banner*/}
                
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。