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

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



< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title > Sammy Test Div
< 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
}




< body >
< form id ="formtest" runat ="server" >
< div id ="container" >
< div id ="header" >
header

< div id ="midbody" >
< div id ="leftside" >
leftside

< div id ="rightside" >
< div id ="rtop" >
right top

< div id ="rbottom" >
< div id ="left" >
left

< div id ="right" >
right




< div id ="foot" >
foot