九宫格布局练习。

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title > 九宫格练习 </ title >
< style  type ="text/css" >
* { margin : 0 ; padding : 0 ;  font-size : 12px ; }

.box { position : relative ;  overflow : hidden ;  width : 50% ;  background : #F34703 ; }
/* 上面3格定义 */
.t_l, .t_c, .t_r { position : absolute ;  top : 0 ;  height : 12px ;  z-index : 2 ; }
.t_l, .t_r { width : 12px ;  background : blue ; }
.t_l { left : 0 ; }
.t_r { right : 0 ; }
.t_c { width : 100% ;  background : orange ;  z-index : 1 ; }
/* 中间3格定义 */
.c_l, .c_r { position : absolute ;  top : 0 ;  z-index : 1 ;  background : orange ; width : 12px ; height : 2000px ; }
.c_l { left : 0 ; }
.c_r { right : 0 ; }
.c_c { width : 100% ; }
/* 下面3格定义 */
.b_l,.b_c, .b_r { position : absolute ;  height : 12px ;  bottom : 0 ; }
.b_l, .b_r { background : blue ;  width : 12px ;  z-index : 1 ; }
.b_l { left : 0 ; }
.b_r { right : 0 ; }
.b_c { width : 100% ;  background : orange ; }
</ style >
</ head >

< body >
< div  class ="box" >
    
     < div  class ="t_l" ></ div >
     < div  class ="t_c" ></ div >
     < div  class ="t_r" ></ div >
    
     < div  class ="c_l" ></ div >
     < div  class ="c_c" >
        
         < div  style ="padding:20px;" >
            九宫格布局，自由拖动浏览器，跟随浏览器拖动而调整布局。 < br  />
            九宫格布局，自由拖动浏览器，跟随浏览器拖动而调整布局。 < br  />
            九宫格布局，自由拖动浏览器，跟随浏览器拖动而调整布局。 < br  />
             < div  style ="text-align:right;" > 默默学习者练习 </ div >
         </ div >
        
     </ div >
     < div  class ="c_r" ></ div >
    
     < div  class ="b_l" ></ div >
     < div  class ="b_c" ></ div >
     < div  class ="b_r" ></ div >
    
</ div >
</ body >
</ html >

 

 

转载于:https://www.cnblogs.com/huanghai/archive/2011/04/07/2007874.html