61,110
社区成员
发帖
与我相关
我的任务
分享
<!DOCTYPE html>
<html>
<head>
<title>untitled</title>
<style>
*{
margin:0px;
padding:0px;
}
#center{
width:100px;
height:100px;
margin:300px;
background:Yellow;
}
#east{
background:Cyan;
position:relative;
left:-100px;
width:100px;
height:100px;
}
#west{
background:White;
position:relative;
right:100px;
width:100px;
height:100px;
}
#south{
background:DarkRed;
position:relative;
bottom:100px;
width:100px;
height:100px;
}
#north{
background:Black;
position:relative;
top:-100px;
width:100px;
height:100px;
}
body{
background:gray;
}
</style>
</head>
<body>
<div id="center">
<div id="east">青龙</div>
<div id="west">白虎</div>
<div id="south">朱雀</div>
<div id="north">玄武</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>untitled</title>
<style>
*{
margin:0px;
padding:0px;
}
#center{
width:300px;
height:300px;
background:Yellow;
}
#east{
background:Cyan;
position:relative;
top:-100px;
left:200px;
width:100px;
height:100px;
}
#west{
background:White;
position:relative;
top:100;
left:0;
width:100px;
height:100px;
}
#south{
background:DarkRed;
position:relative;
top:-100px;
left:100px;
width:100px;
height:100px;
}
#north{
background:#ccc;
position:relative;
width:100px;
left:100px;
height:100px;
}
body{
background:gray;
}
</style>
</head>
<body>
<div id="center">
<div id="north">朱雀</div>
<div id="west">青龙</div>
<div id="east">白虎</div>
<div id="south">玄武</div>
</div>
</body>
</html>
<html>
<head>
<title>untitled</title>
<style>
*{
margin:0px;
padding:0px;
}
#center{
width:300px;
height:100px;
margin:300px;
}
#east{
background:Cyan;
width:100px;
height:100px;
float:left;
}
#west{
background:White;
float:left;
width:100px;
height:100px;
}
#south{
clear:both;
background:DarkRed;
position:relative;
width:100px;
float:left;
height:100px;
left:100px;
}
#north{
background:Black;
color:#fff;
margin-left:100px;
width:100px;
height:100px;
}
body{
background:gray;
}
#c{
width:100px;
height:100px;
float:left;
background:Yellow;
}
</style>
</head>
<body>
<div id="center">
<div id="north">玄武</div>
<div id="east">青龙</div>
<div id="c">中间</div>
<div id="west">白虎</div>
<div id="south">朱雀</div>
</div>
</body>
</html>
#north{
background:Black;
position:relative;
bottom:400px;
width:100px;
height:100px;
}
#west{
background:White;
position:relative;
left:100px;
top:-100px;
width:100px;
height:100px;
}