CSS网页布局

布局：又称版式布局，是网页UI设计师将有限的视觉元素进行有机排列组合。

网页设计特点：可以自适应宽度；高度可无限延长。

 

经典布局：一列，二列，三列，混合布局

 

前端：艺术+技术 完美融合

一列布局：

.main,.footer{ width:960px;margin:0 auto;}
.head{ width:100%; height:100px; background:#ccc}
.main{ height:600px; background:#FCC}
.footer{ height:50px; background:#9CF}

<div class="head">head</div>
<div class="main">main</div>
<div class="footer">footer</div>

 脱离文档流方法：float+position：absolute

 

二列自适应布局：

.main{ width:960px; height:600px; margin:0 auto}
.left{ width:300px; height:600px; background:#ccc; float: left;}/*左浮动样式*/
.right{ width:660px; height:600px; background:#FCC; float: right;}/*右浮动样式*/

<div class="main">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

左侧固定宽度，右侧自适应的两列布局：

<div class="left"></div>
<div class="main"></div>

.left {
    float: left;
    margin-right: 10px;
    width: 100px;
}
.main {
    overflow: hidden; //或overflow：auto
}

三列布局：

.left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0}
.main{ height:600px; margin:0 310px 0 210px; background:#9CF}
.right{ height:600px; width:300px; position:absolute; top:0;right: 0; background:#FCC;}

<div class="left">left</div>
 <div class="main">设计首页的第一步是设计版面布局。 </div>
 <div class="right">right</div>

三列中栏流动布局：

<div id="main_wrapper">
           <header>
                   <!-- 页眉 -->
                   header header header header headerheader header header header headerheader header  
           </header>
    <div id="threecolwrap"> <!-- 三栏外包装，包住全部三栏 -->
        <div id="twocolwrap"> <!-- 两栏外包装，包围左栏和中栏 -->
            <nav>
                <!-- 左栏 -->
                nav nav nav nav nav nav nav nav nav nav nav nav nav nav nav nav nav nav nav nav nav 
            </nav>
            <article> 
                <!-- 中栏 -->
                article article article article article article article article article article 
            </article>
        </div>
        <aside> 
            <!-- 侧栏 -->
            aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside 
        </aside>
    </div>
    <footer>
        <!-- 页脚 -->
        footer footer footer footer footer footer footer footer footer footer footer footer footer 
    </footer>
</div>

* {margin:0; padding:0;}
body {font:1em helvetica, arial, sans-serif;}
div#main_wrapper{
    min-width:600px; max-width:1100px;/*超过最大布局时，居中布局*/
    margin:0 auto;
    background:url(images/bg_tile_150pxw.png) repeat-y #eee;/*背景图片默认从左上角开始拼接*/
}
header {
    padding:5px 10px;
    background:#3f7ccf;
}
div#threecolwrap {
    float:left;width:100%;/*浮动强制它包围浮动的栏*/
    background:url(images/bg_tile_210pxw.png) top right repeat-y;/*背景图片右对齐*/
}
div#twocolwrap {
    float:left;/*浮动强制它包围浮动的栏*/
    width:100%;
    margin-right:-210px;/*把右栏拉到区块外边距腾出的位置上*/
}
nav {
    float:left;
    width:150px;
    background:#f00;
    padding:20px 0;
}
nav > * {margin:0 10px;}/*让子元素与栏边界保持一定的距离*/
article {
    width:auto;
    margin-left:150px; 
    margin-right:210px; /*在流动居中的栏右侧腾出空间*/
    background:#eee;
    padding:20px 0;
}
article > * {margin:0 20px;} /*让子元素与栏边界保持一定的距离*/
aside {
    float:left;
    width:210px;
    background:#ffed53;
    padding:20px 0;
}
aside > * {margin:0 10px;} 
footer {
    clear:both; /*清除浮动*/
    width:100%; 
    text-align:center; background:#999;
}

混合布局：

.top{height:100px; background:#ccc}
.main{height:500px;background-color: red;}
.left{ width:200px; height:500px; background:blue; position:absolute;}
.right{ margin-left:210px;height:500px; background:#9C9;position:absolute;width: 100%}
.foot{ height:50px; background:#F63 }

<div class="top">top</div>
<div class="main">
    <div class="right">right</div>
    <div class="left">left</div>
</div>
<div class="foot">foot</div>