CSS+DIV布局的测试实例_html/css_WEB-ITnose

最后显示效果如下图：

代码：

     Sammy Test Div title >
    
        #rtop{}{       
        margin:0 auto;
        height:30%;
        vertical-align:middle; 
        text-align:center;
        font-family:Arial; 
        font-size:x-large;
        background: #CCCC00;
        }
        
        #rbottom{}{        
        margin:0 auto;
        height:70%;
        vertical-align:middle; 
        text-align:center;
        font-family:Arial; 
        font-size:x-large;
        background: #CCee00;
        }
        
        #left{}{        
        float:left;
        height:100%;
        width:50%;    
        vertical-align:middle; 
        text-align:center; 
        font-family:Arial; 
        font-size:x-large;   
        background: #CCCCed;
        }
        
        #container{}{        
        width:600px;  
        height:300px;   
        vertical-align:middle; 
        text-align:center; 
        font-family:Arial; 
        font-size:x-large;  
        background-color:Green
        }
        
        #leftside{}{
        width:20%;
        height:60%;
        float:left;
        font-family:Arial; 
        font-size:x-large;
        vertical-align:middle; 
        text-align:center;
        background: gray;
        }
        
        #rightside{}{
        width:80%;
        height:60%;
        float:left;
        vertical-align:middle; 
        text-align:center;
        font-family:Arial; 
        font-size:x-large;
        background: #Cdfd00;
        }
        
        #foot{}{
        height:20%;
        clear:both;
        vertical-align:middle; 
        text-align:center;
        font-family:Arial; 
        font-size:x-large;
        background-color:InactiveBorder;
        }
        #header{}{
        height:20%;
        clear:both;
        vertical-align:middle; 
        text-align:center;
        font-family:Arial; 
        font-size:x-large;
        background-color:Red
        }
       

     style >
head >

    
    
        
            header   
         div >
        
          
            leftside
           div >
                    
             
                right top
              div >
             
                 
                    left
                  div >
                 
                    right
                  div >
              div >
           div >
         div >
        
            foot           
         div >
         div >
     form >
body >
html >