简易两列布局与三列布局框架模版

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2013-08-31 17:27:05　-　阅:　-　评:0　-　积分:0

在笔者看来，一个网站的页面框架通常由三部分组成。笔者喜欢横向切割，将一个网页画分为上，中，下三部分，分别对应头部，中间内容，尾部。事实上，无论是大型门户网站还是小型企业网站还是个人博客，都离不开头部，内容部分，尾部这三块，虽然有些网站很个性，与众不同，但仔细寻找的话，还是能找到这三部分的。对于中间内容部分细分的话，又可以划分为一列布局，两列布局，三列布局等。通常情况下两列布局最常见，下面就附上两列布局与三列布局固定宽度的框架源码，供初学者参考。

两列布局固定宽度的框架源码

在线演示<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简易两列布局与三列布局框架模版</title>
<meta name="author" content="艺灵设计, yilingsj@gmail.com, www.yilingsj.com" />
<style type="text/css">
*{margin:0; padding:0;}
body{text-align:center;}
.head,.content,.foot{width:960px;margin:0 auto;}
.head{height:100px;background:#ccc;}
.content{height:450px;background:#333;margin:10px auto;}
.content .contnet_l{float:left; width:238px; height:100%;background:#ccc;}
.content .contnet_r{float:right; width:712px;height:100%; background:#999;}
.foot{height:100px;background:#666;}
</style>
</head>
<body>
<div class="head">头部</div>
<div class="content">
<div class="contnet_l">中间内容左区</div>
<div class="contnet_r">中间内容右区</div>
</div>
<div class="foot">尾部</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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简易两列布局与三列布局框架模版</title>
<meta name="author" content="艺灵设计, yilingsj@gmail.com, www.yilingsj.com" />
<style type="text/css">
*{margin:0; padding:0;}
body{text-align:center;}
.head,.content,.foot{width:960px;margin:0 auto;}
.head{height:100px;background:#ccc;}
.content{height:450px;background:#333;margin:10px auto;}
.content .contnet_l{float:left; width:238px; height:100%;background:#ccc;}
.content .contnet_c{float:left; width:470px;height:100%; background:#999; margin-left:10px;_display:inline;}
.content .contnet_r{float:right; width:232px;height:100%; background:#ccc;}
.foot{height:100px;background:#666;}
</style>
</head>
<body>
<div class="head">头部</div>
<div class="content">
<div class="contnet_l">中间内容左区</div>
<div class="contnet_c">中间内容中区</div>
<div class="contnet_r">中间内容右区</div>
</div>
<div class="foot">尾部</div>
</body>
</html>

注:以上只是一个页面的大致框架，并没有添加内容，仅供初学者布局用，不做其它用途！

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/div/2013-08-31/76.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！