实例
<!DOCTYPE html>
<html>
<head>
<title>十字架布局</title>
<meta charset="utf-8">
<style type="text/css">
body {
margin: 0;
}
.nav {
width: 600px;
height: 600px;
background-color: #f9f9f9;
position: relative;
}
.nav1 {
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
top: 0px;
left: 200px;
}
.nav2 {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 200px;
left: 0px;
}
.nav3 {
width: 200px;
height: 200px;
background-color: #0f0;
position: absolute;
top: 200px;
left: 200px;
}
.nav4 {
width: 200px;
height: 200px;
background-color: black;
position: absolute;
top: 200px;
left: 400px;
}
.nav5 {
width: 200px;
height: 200px;
background-color: #666;
position: absolute;
top: 400px;
left: 200px;
}
</style>
</head>
<body>
<div class="nav">
<div class="nav1"></div>
<div class="nav2"></div>
<div class="nav3"></div>
<div class="nav4"></div>
<div class="nav5"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
1、body默认有一个8px的距离，所以要利用margin: 0;把边距给去掉。
2、position: relative;都要将父元素设置成相对定位。但是有点搞不懂，老师说的都要这么写。
3、position: absolute;将元素设置成绝对定位，都装按照父元素来定位，以后所有的网而用，都是用绝对定位，利用相对定位是很少的，基本上用不到。
4、top和left就是设置绝对定位的一个位置。
