CSS+DIV布局的测试实例

最后显示效果如下图：

代码：

<% @ Page Language="C#" AutoEventWireup="true" CodeFile="SammyDiv.aspx.cs" Inherits="Buying_SammyDiv"  %>

<! 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  runat ="server" >
     < title > Sammy Test Div </ title >
     < style  type  ="text/css" >
        #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 >
< body >
     < form  id ="formtest"  runat ="server" >
     < div   id ="container" >
         < div  id ="header" >
            header   
         </ div >
         < div  id ="midbody" >
           < div  id ="leftside" >
            leftside
           </ div >
           < div  id ="rightside" >          
              < div  id ="rtop" >
                right top
              </ div >
              < div  id ="rbottom" >
                  < div  id ="left" >
                    left
                  </ div >
                  < div  id ="right" >
                    right
                  </ div >
              </ div >
           </ div >
         </ div >
         < div  id ="foot" >
            foot           
         </ div >
         </ div >
     </ form >
</ body >
</ html >

转载于:https://www.cnblogs.com/songsh96/archive/2007/02/28/659645.html