CSS+DIV布局的测试实例_html/css_WEB-ITnose
代码:
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 >
推荐阅读
-
Bootstrap栅格布局系统的特点_html/css_WEB-ITnose
-
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
-
前端基础??CSS+DIV布局_html/css_WEB-ITnose
-
ajax实现的点击数目加1代码实例_html/css_WEB-ITnose
-
再发-关于CSS+DIV首页的问题(入门级别)_html/css_WEB-ITnose
-
响应式布局及bootstrap(实例)_html/css_WEB-ITnose
-
div+css布局实例淘宝分析(三)(2)_html/css_WEB-ITnose
-
移动端自适应布局的高效方法,欢迎批评或指正_html/css_WEB-ITnose
-
CSS3 Columns:比table更好用的分列式布局方法_html/css_WEB-ITnose
-
DIV+CSS布局的几点建议_html/css_WEB-ITnose