1,完整代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
#ronqi{
width:400px;
height:170px;
/*background-color:#bbb;*/
position:absolute;
left:50%;
top:50%;
margin-left: -200px;
margin-top: -85px;
}
div[class]{
border-radius:50%;
width:100px;
height:100px;
}
#top{
width:400px;
height:120px;
/* background-color:#bbb;*/
/*position:relative;*/
}
.yuan1{
border:10px solid #0000ff;
float:left;
}
.yuan2{
border:10px solid #000000;
float:left;
margin:0 20px;
}
.yuan3{
border:10px solid #ff0000;
float:right;
}
#botton{
width:260px;
height:120px;
/*background-color:#99ffff;*/
position:absolute;
top:55px;
left:70px;
}
.yuan4{
border:10px solid #ffff00;
float:left;
}
.yuan5{
border:10px solid #00ff00;
float:right;
}
</style>
</head>
<body>
<div id="ronqi">
<div id="top">
<div class="yuan1"></div>
<div class="yuan2"></div>
<div class="yuan3"></div>
</div>
<div id="botton">
<div class="yuan4"></div>
<div class="yuan5"></div>
</div>
</div>
</body>
</html>
2、效果（自适应，水平垂直居中）
245
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
