Heim > Artikel > Web-Frontend > CSS+DIV布局的测试实例_html/css_WEB-ITnose
CSS+DIV布局的测试实例_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:32:32980Durchsuche
最后显示效果如下图：
代码：
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 >