好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

DIV+CSS网页布局之:混合布局_html/css_WEB-ITnose

1、混合布局

  在了解了一列、两列和三列布局之后,混合布局也就不难理解了,混合布局也可以叫综合型布局,那么混合布局就可以在一列布局的基础之上,分为两列布局,三列布局,网页布局的结构普遍都是三列布局,但是在三列布局的基础上,可以根据实际需求,对网页再进行划分。

 1   2   3   4       5      混合布局  6   7 *{margin:0;padding:0;} 8 #header{ 9     height:50px;10     background:blue;11 }12 #main{13     width:100%;14     overflow:hidden;15 }16 #main .main-left{17     width:20%;18     height:800px;19     background:lightgreen;20     float:left;21 }22 #main .main-right{23     width:80%;24     height:800px;25     float:right;26 }27 #main .main-right .right-l{28     width:80%;29     height:800px;30     background:yellow;31     float:left;32 }33 #main .main-right .right-r{34     width:20%;35     height:800px;36     background:pink;37     float:right;38 }39 #footer{40     height:50px;41     background:gray;42 }43  44  45  46 

查看更多关于DIV+CSS网页布局之:混合布局_html/css_WEB-ITnose的详细内容...

  阅读:38次