用div+css架设页面框架

教大家怎么用div+css架设页面框架

• |
• 浏览：25247
• |
• 更新：2013-06-04 17:45

在用div+css 进行架设页面框架的时候 主要用到的属性为:float,clear,overflow,height,background,width

float:用来设置框架左右位置

height:用来设置框架所占高度.

width:用来设置框架所占宽度.

background:用颜色来填充区域,这个看起来比较明显 了然.

clear:用来清除浮动效果的影响.

overflow:来用确保框架不会因溢出内容而打乱布局.

下面通过实例来讲解怎么进行架设页面框架:

我们把这分为3个大块区 上 、 中、 下 三块   中间区域划分为： 上（红），左（黄），右（紫）.在架设页面框架时先得把页面的划分成几个不同的区域,然后在根据所划分的区域来布置相对应的html框架 然后相应的框架属性用来控制框架的并要保证不会因为里面的内容来溢出.

对应的HTML结构可为：

<div id="h">

<!--头 -->

</div>

<div id="c">

    <div id="c1">

     <!--上 -->

    </div>

    <div id="c2">

     <!--左 -->

    </div>

    <div id="c3">

    <!--右-->

    </div>

    <div class="clear"></div>  <!-- 清除左右浮动 -->

</div>

<div id="f">

<!--尾 -->

</div>

对应的样式为:

*{

    margin:0px;

    padding:0px;

    /*清队所有标签的内外边距*/}.clear{

    clear:both;}

#h{

    background: none repeat scroll 0 0 #062C65;

    border-bottom: 2px solid #F59C24;

    height: 40px;}

#c{    margin: 10px auto 0;    width: 980px;}

#c1 {    background: none repeat scroll 0 0 #F75559;    height: 100px;    overflow:hidden;}

#c2{    background: none repeat scroll 0 0 #F38611;    float: left;    height: 700px;    margin-top: 10px;    width: 260px;    overflow:hidden;}

#c3 {    background: none repeat scroll 0 0 #9287D6;    float: right;    height: 700px;    margin-top: 10px;    width: 700px;    overflow:hidden;}

#f {    background: none repeat scroll 0 0 #CABF84;    height: 132px;    margin-top: 10px;    overflow:hidden;}