首页手记 “横向两列布局”扩展-博客页面布局

“横向两列布局”扩展-博客页面布局

标签：

Html5 CSS3

   根据课程“网页布局基础”中“横向两列布局”的讲解中，自我实践，扩展了原视频代码的内容，实现布局样式在浏览器不同尺寸窗口下保持头部尾部样式不变的美观性。

![图片描述][1]


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>
            横向两列布局
        </title>
        <style type="text/css">

            *{
                margin: 0;
                padding: 0;
                font-family: 微软雅黑;
                font-size: 20px;
            }
            #wrap{
                width: 90%;
                margin: 0 auto; /*最外层嵌套一个div设置整个布局为居中对齐*/
            }
            #head{
                background-color: blue;
                width: 90%;
                position: fixed;/*使用fixed固定尾部一直处于窗口下面，在浏览器窗口改变大小时也能保证布局的美观*/
                height: 60px;
                top: 0;
            }
            #mainbody{
                background-color: ;
                overflow: hidden; /*当主干部分和尾部排成一排时，需要清除浮动，使用clear:both;没有作用，这里使用overflow属性。*/
                margin:70px 0; /*因为头尾部均设置高度为60px且脱离文档流，为了避免主体内容被头尾遮盖以及布局美观性，在这里设置上下外边距为70px*/

                height: 500px;
            }
            .left{
                background-color: green;
                width: 70%;
                height: inherit;/*一般在设计布局时，主干部分不要设置高度，让高度随主干内容自适应*/
                float: left;
            }
            .right_1{
                background-color: pink;
                width: 28%;
                height: 200px;
                margin-top:; 
                float: right;
            }
            .right_2{
                background-color: gray;
                width: 28%;
                height: 500px; /*如果要设置贴到父容器底部，则设置高度足够大即可实现*/
                float: right;
                margin-top: 20px;
                bottom: 0px;
            }
            #footer{
                background-color: red;
                height: 60px;
                width: inherit; /*脱离文档流后宽度不受父容器限制，需要重新设定*/
                position: fixed;/*使用fixed固定尾部一直处于窗口下面，在浏览器窗口改变大小时也能保证布局的美观*/
                bottom: 0; /*保证紧贴窗口底部*/
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="head">
                头部
            </div>
            <div id="mainbody">
                <!-- 主干 -->
                <div class="left">主体左边区域</div>
                <div class="right_1">主体右上边区域</div>
                <div class="right_2">主体右下边区域</div>

            </div>
            <div id="footer">
                尾部
            </div>
        </div>
    </body>
</html>```

  [1]: http://img1.sycdn.imooc.com//56fbf3be0001b54a13660678.jpg

点击查看更多内容