为了优先加载主界面内容,进行利用margin的负值使左右模块浮在主要内容的上面
注意不是左中右的块级书写顺序,先写主再是左右
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
*{
padding: 0;
margin: 0;
}
.main,.left,.right{
float: left;
height: 200px;
}
.main{
width: 100%;
background-color: red;
}
.left{
width: 20%;
background-color: yellow;
margin-left: -100%;
}
.right{
width: 20%;
background-color: blue;
margin-left: -20%;
}
.zhong{
margin: 0 20% 0 20%;
}
</style>
<title>Title</title>
</head>
<body>
<div class="zhu">
<div class="main">77777
<div class="zhong">666666666</div>
</div>
<div class="left">zuo</div>
<div class="right">you</div>
</div>
</body>
</html>