一、基础行布局
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
padding: 0;
color: #fff;
}
.container{
max-width: 800px;
width: 100%;
height: 1000px;
background: #4c77f2;
margin: 0 auto;
padding-top: 40px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
</html>
直接把div堆砌上去就行,是比较简单的。
二、列布局
1.使用浮动实现
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
padding:0;
margin:0;
}
.first{
width: 100%;
height: 40px;
background: blueviolet;}
.content{
width:100%;
height:1000px;
background:yellow;
}
.left{
background:purple;
width:25%;
float:left;
min-height: 400px;
}
.middle{
width:50%;
float:left;
min-height: 400px;
background: red;
}
.right{
background:blue;
float:right;
width:25%;
min-height: 400px;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="middle">
<div class="bb"></div>-->
</div>
<div class="right">right</div>
</body>
</html>
改变div的浮动属性即可。
2.利用定位
这里有必要做一些说明:
网页的布局的正常顺序(应该就是文档流吧,求评论告知)是从左向右的,所以最左边的使用绝对定位,只需要控制好宽度。
接下来我给中部和右边分别设置margin-left来达到目的:
问题来了,那我可不可以从右往左设置呢?比如这样设置left。
结果是错误的,因为margin-left是以同级元素作为参照物的,而此时左边还没有任何元素,故而无法实现。那么该怎么呢?容我先买个关子,在本文末尾我会给出我的探索结果。
正确代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
padding:0;
margin:0;
}
.content{
width:100%;
height:500px;
background:#ccc;
position:relative;
}
.left{
background:purple;
width:25%;
position:absolute;
height:90%;
}
.middle{
background: yellow;
width:50%;
position:absolute;
height:90%;
margin-left:25%;
}
.right{
background:blue;
width:25%;
position:absolute;
height:90%;
margin-left:75%;
}
</style>
</head>
<body>
<div class="content">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
</body>
</html>
3.圣杯
圣杯布局和双飞翼布局极为相似,(我觉得没啥区别)。
在布局中有些细节还是比较难以理解的。(大家在看下面的分析时一定要看看完整的代码)
margin-left设置负值后元素会上浮(初始状态下left、right都在middle下方),100%则保证了元素处于div-container的最左端,此时只需设置left:-200px(意思是向左移动200px,而这个200px恰好就是container的左padding)。
下面再说说右边的。
margin-left:负值的效果和上述一致。现在问题来了,-220px是什么鬼?我将去掉margin-left的代码视图放在下面:
这是去掉right的视图:
所以,我们可以很容易的发现:margin-left代码的意思是right-div移到container的最右边,right的作用与left那边的效果是一样的。而且细心的读者不难发现,margin-left的数值恰好是container的宽度!(感兴趣的读者不妨利用控制台更改margin-left的数值,会更加容易理解上边的内容)
正确代码:
<style type="text/css">
*{margin: 0;padding: 0;}
body{min-width: 700px;}
.header,
.footer{
border: 1px solid #333;
background: #ddd;
text-align: center;
height: 40px;
line-height: 40px;
}
.left,
.middle,
.right{
position: relative;
float: left;
min-height: 130px;
}
.container{
padding:0 220px 0 200px;
overflow: hidden;
}
.left{
margin-left: -100%;
left: -200px;
width: 200px;
background: #f00;
}
.right{
margin-left: -220px;
right: -220px;
width: 220px;
background: #30a457;
}
.middle{
width: 100%;
background: #1a5acd;
word-break: break-all;
}
.footer{
/*clear: both;*/
}
</style>
</head>
<body>
<div class="header">
<h4>header</h4>
</div>
<div class="container">
<div class="middle">
<h4>middle</h4>
<p>
这是页面的主体内容
</p>
</div>
<div class="left">
<h4>left</h4>
<p>
这是页面的左边
</p>
</div>
<div class="right">
<h4>right</h4>
<p>
这是页面的右
</p>
</div>
</div>
<div class="footer">
<h4>footer</h4>
</div>
4.圣杯布局(讲真,这两个好像没有区别)。
我希望读者能够对css部分的设置有足够的重视。
sub就是左边的div样式,extra是右边的div样式。这里的main-inner是中间部分。
就像是鸟的身体和双翅。
<style type="text/css">
*{margin: 0;padding: 0;}
body{min-width: 700px;}
.header,
.footer{
border: 1px solid #333;
background: #ddd;
text-align: center;
height: 40px;
line-height: 40px;
}
.sub,
.main,
.extra{
float: left;
min-height: 130px;
}
.sub{
margin-left: -100%;
width: 200px;
background: #f00;
}
.extra{
margin-left: -220px;
width: 220px;
background: #1a5acd;
}
.main{
width: 100%;
}
.main-inner{
margin-left: 200px;
margin-right: 220px;
min-height: 130px;
background: #30a457;
word-break: break-all;
}
.footer{
clear: both;
}
</style>
</head>
<body>
<div class="header">
<h4>header</h4>
</div>
<div class="main">
<div class="main-inner">
<h4>main</h4>
<p>
这是页面的主体内容
</p>
</div>
</div>
<div class="sub">
<h4>sub</h4>
<p>
这是页面的左边
</p>
</div>
<div class="extra">
<h4>extra</h4>
<p>
这是页面的右边
</p>
</div>
<div class="footer">
<h4>footer</h4>
</div>
</body>
</html>
补充:好了前面的关子买的有点久了,现在来说说我的探索成果吧!首先,读者必须明确点布局是从左往右的。(这句话很重要)
那么,首先我们需要在最右边建设一个div,作为其他两个元素的小镜子。
再来设置左边和中间的样式:
不知道大家有没有注意到middle的宽度从50%改为75%,这是因为middle的布局还是以左边为参考点的(也就是小镜子),而它在左边多出的那25%将会被我们的left光荣的覆盖。由此我们就玩成了。(实际上这只是本人钻了牛角尖,刚才发现设置右浮动更简单,呜呜~)