说到网页布局，相信大家都了解。具体怎么进行网页布局的，可能大家之前使用过软件直接布局，而不知道或者不理解代码的含义，今天小慕简单讲一下网页布局中的一列布局，所谓一列布局，就是从上到下都没有分歧的页面，一般是上中下格式。嗯，看个小慕写的小例子吧，代码如下：
<!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>
<style>
*{padding:0px;margin:0px;}
body{font-size:13px;color:#333333;}
#header{width:980px;height:120px;background:#009999;margin:0px auto;padding:10px;}
#center{width:970px;height:400px;border:5px solid #006699;background:#990099;margin:10px auto;padding:10px;}
#footer{width:1000px;height:120px;background:#999900;margin:0px auto;}
.bs{font-size:60px;color:#FFFFFF;text-align:center;}
</style>
</head>
<body>
<div id="header">这是header盒子，是网页内容头部,无上下外边距，内填充为10px，宽度为980px。左右边距自动使得div盒子居中显示。<br/><span class="bs">上</span></div>
<div id="center">这是center盒子，是网页内容头部，上下外边距为10px，体现在和上下两个盒子有一定的缝隙出现，内填充为10px，宽度为970px，边框宽度5px，由于是左右两个边，所以加起来显示的和上下的盒子等宽。左右边距自动使得div盒子居中显示。<br/><span class="bs">中</span></div>
<div id="footer">这是footer盒子，是网页内容头部，无上下外边距，无内填充，文字和边框的距离为0，紧挨着出现了，宽度为1000px，因为没了左右填充宽度依然和上边保持一致。左右边距自动使得div盒子居中显示。<br/><span class="bs">下</span></div>
</body>
</html>
网页访问效果如下：
小慕在上边的例子里对于关键的效果都有简单的说到，下面小慕就具体总结下。
1、通过给div等标签的ID和class属性赋值可以通过样式表对拥有该ID和CLASS的div等标签进行样式设定，这里给予id和CLASS效果并没有什么区别，但要注意ID的唯一性，名称不能重复，CLASS则可以对多个标签设置样式，例子中.bs就对三个span标签设置了同一个样式，这个小慕在CSS样式表的语法格式和选择器简介有具体讲过，这里小慕就不重复了。
2、盒子在网页中的占用空间是外边距+边框宽度+内部填充+宽度（内容宽度），从例子中的三个div盒子模型就可以看出来，这点在上边小慕说得文章里也介绍过。
3、盒子的居中显示，.box{margin:0px auto;}，没错就是这个，给盒子模型边距设置上下为0px左右自动的样式就可以使该盒子剧中显示，额有的人不理解margin的这种写法，这里需要解释下为什么可以这样写呢？当margin后边写四个参数的时候就有{margin:上 右 下 左;}，当写三个参数的时候是{margin:上 左右 下;}，当写两个参数时是{margin:上下左右;}，写一个参数的话大家应该都能理解了就是{margin:上下左右;}，这样可以避免每个边距不同时写很多代码出来，以后这种写发还有很多，比如内部填充padding就是可以这样写，4个参数一次是上右下左。
4、由于html默认很多标签都有边距和填充，所以为了方便我们的设计，小慕一般会在开头设置*{padding:0px;margin:0px;}意思就是把标签的填充和边距都设置成0px；之后某个标签盒子需要设置的时候再单独设置单独设置填充和边距，还有字体大小由于系统和浏览器众多，可能会出现大小问题，而导致网页会出现排版问题，这里小慕建议在body进行默认设置{font-size:13px;}，当然字体大小可自行设定，当然其他的一些影响排版的也可以都写在样式表先行设置。比如去掉列表前的符号标志，超链接的下划线等等。
5、网页的宽度可以是小慕上边例子中设置的固定宽度，也可以按照外部盒子宽度而定义的占比格式，格式是.box{width:80%;}；当然在当盒子直接在body里那他所占的百分比就是相对浏览器的宽度，宽度会随着浏览器的宽度变化而变化。
---
转载请注明本文标题和链接：《网页布局之一列布局》