css常见的布局

最新推荐文章于 2024-10-05 16:51:11 发布

前进的胖子

最新推荐文章于 2024-10-05 16:51:11 发布

阅读量79

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_44593999/article/details/108637097

版权

上中下 - 栏式

  .wap{
                width: 900px;
                margin: 0 auto;
            }
            #header{
                height: 100px;
                background: blanchedalmond;
            }
            #section{
                height: 700px;
                background: blue;
            }
            #footer{
                height: 100px;
                background: greenyellow;
            }
 <body>
        <header id='header' class='wap'></header>
        <section id='section' class="wap"></section>
        <footer id='footer' class="wap"></footer>
    </body>

左右两栏式（浮动+默认/浮动/定位父级相对子级绝对）

左右两栏加页眉页脚

  
  <header id='header' ></header>
        <section id='main'>
            <aside id='left'></aside>
            <div id='right'></div>
        </section>
        <footer id='footer'></footer>

左中右三栏（浮动的时候中间的是块级会单独占一行所以放到下面）

   .wrap{
                margin: 0 auto;
                width: 80%;
            }
            #left{
                width: 100px;
                height: 500px;
                background: lawngreen;
               float: left;
            }
            #main{
                height: 500px;
                background: royalblue;
                margin: 0 210px;
            }
            #right{
                width: 100px;
                height: 500px;
                background: black;
                float: right;
            }
 <div class="wrap">
            <aside id='left'></aside>
            <section id="right"></section>
            <aside id='main'></aside>
        </div>

左中右三栏之双飞翼

<style>
            .warp{
                margin: 0 auto;
                width: 100%;
            }
            #header{
                height: 100px;
                background: blue;
            }
            #main{
                height: 500px;
                background: blueviolet;
            }
            #footer{
                height: 100px;
                background: brown;
            }
            #middle{
                width: 100%;
                float: left;
            }
            #left{
                width: 200px;
                height: 100%;
                background: black;
                float: left;
                margin-left: -100%;
            }
            #right{
                width: 200px;
                height: 100%;
                background: black;
                float: right;
                margin-right: -100px;
                /* margin-left: -200%; */
            }
            .content{
                height: 500px;
                margin: 0 200px;
            }
        </style>
<body>
        <header id='header' class='warp'>header</header>
        <section id='main' class='warp'>
            <section id='middle'>
                <div class="content">content</div>
            </section>
            <aside id='left'>left</aside>
            <aside id='right'>right</aside>
        </section>
        <footer id='footer' class='warp'>footer</footer>
    </body>