DIV+CSS网页布局之：混合布局-彼岸时光

1、混合布局

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

  1     DOCTYPE html  > 
  2     html  > 
  3     head  > 
  4         meta   charset  ="UTF-8"  > 
  5         title  > 混合布局   title  > 
  6     style  > 
  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     style  > 
 44     head  > 
 45     body  > 
 46     div   id  ="header"  > 头部   div  > 
 47     div   id  ="main"  > 
 48         div   class  ="main-left"  > 左边   div  > 
 49         div   class  ="main-right"  > 
 50             div   class  ="right-l"  > 右-左   div  > 
 51             div   class  ="right-r"  > 右-右   div  > 
 52         div  > 
 53     div  > 
 54     div   id  ="footer"  > 页脚   div  > 
 55     body  > 
 56     html  >  

查看更多关于DIV+CSS网页布局之：混合布局-彼岸时光的详细内容...