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

最后显示效果如下图：

代码：

Sammy Test Div

#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
}








header



leftside



right top



left


right





foot

查看更多关于CSS+DIV布局的测试实例_html/css_WEB-ITnose的详细内容...