div css布局html实例画圆,CSS+DIV布局的测试实例_html/css_WEB-ITnose

最后显示效果如下图：

代码：

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

< head runat ="server" >

< title > Sammy Test Div title >

< 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

}

style >

head >

< body >

< form id ="formtest" runat ="server" >

< div id ="container" >

< div id ="header" >

header

div >

< div id ="midbody" >

< div id ="leftside" >

leftside

div >

< div id ="rightside" >

< div id ="rtop" >

right top

div >

< div id ="rbottom" >

< div id ="left" >

left

div >

< div id ="right" >

right

div >

div >

div >

div >

< div id ="foot" >

foot

div >

div >

form >

body >

html >

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网