CSS+DIVのテスト例layout_html/css_WEB-ITnose

最終表示効果如下図：

代码：

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



< html xmlns ="http://www.w3.org/1999/xhtml" >


#rtop{}{
margin:0 auto;
高さ: 30%;
vertical-align:middle; 
text-align:center;
フォントファミリー:Arial; 
font-size:x-large;
背景: #CCCC00;
}

#rbottom{}{
margin:0 auto;
高さ: 70%;
vertical-align:middle; 
text-align:center;
フォントファミリー:Arial; 
font-size:x-large;
背景: #CCee00;
}

#left{}{
float:left;
高さ:100%;
幅: 50%;    
vertical-align:middle; 
text-align:center; 
フォントファミリー:Arial; 
font-size:x-large;   
背景: #CCCCed;
}

#コンテナ{}{
width:600px;  
高さ:300ピクセル;   
vertical-align:middle; 
text-align:center; 
フォントファミリー:Arial; 
font-size:x-large;  
背景色:緑
}

#leftside{}{
幅: 20%;
高さ: 60%;
float:left;
フォントファミリー:Arial; 
font-size:x-large;
vertical-align:middle; 
text-align:center;
背景: グレー;
}

#rightside{}{
        幅:80%;
高さ: 60%;
float:left;
vertical-align:middle; 
text-align:center;
フォントファミリー:Arial; 
font-size:x-large;
背景: #Cdfd00;
}

#foot{}{
高さ:20%;
クリア: 両方;
vertical-align:middle; 
text-align:center;
フォントファミリー:Arial; 
font-size:x-large;
背景色:InactiveBorder;
}
#header{}{
高さ:20%;
クリア: 両方;
vertical-align:middle; 
text-align:center;
フォントファミリー:Arial; 
font-size:x-large;
背景色:赤
}







ヘッダー



左側

         

右上



左


右




        
足