文章快速目录
第一步:设置页面整体宽度第二步:自动页面居中第三步:设置页眉宽度和布局第四步:设置容器宽度和布局第五步:设置侧边栏宽度和布局第六步:设置页脚宽度和布局第七步:在侧边栏中添加剩余的10个像素第八步(多余的一步):修复IE的双倍边距bug它会介绍如何设置每个DIV的宽度和布局， 并且还会展示如何让主题正确显示，同时在Firefox和IE下兼容一致。
在我们开始之前，打开Xampp控件，主题文件夹，火狐浏览器，IE浏览器，index.php和style.css
第一步:设置页面的整体宽度
现在，我们首先需要确定的是主题的整体宽度。我们用750px；主题的大小取决于绝大多数博客访问者的屏幕分辨率。需要避免的是使用宽度过大的主题。如果博客的大部分读者使用800px × 600px的屏幕，在这种情况下，如果使用900px宽的主题，就会超过他们的屏幕100多个像素。显然，这对用户来说是非常不友好的。
反正我们怎么把主题的整体宽度设置成750px呢？
我们需要将当前主题中的所有内容(页眉、容器、侧栏和页脚)放入一个750px的DIV标签中。
在
在
在style.css文件中输入以下代码:# wrapper { margin:0 auto 0 auto；宽度:750pxtext -align:left；}
在CSS中，#符号通过id定位页面中的元素，而点符号通过类定位页面中的元素。如果您的代码是
保存index.php和style.css文件。刷新Firefox和IE浏览器(按F5)以查看更改。
详细解释:
边距:0自动0自动；含义(注意顺序):0上边距，自动右边距，0下边距，自动左边距。从现在开始，记住将左右边距设置为自动，这样会使居中对齐。宽度:750px明明是750像素。text -align:left；就是将包装器DIV中的文本靠左对齐，因为我们要对齐正文{ text -align:left；}改为text -align:center；步骤2:自动页面居中
将text-align: left放入正文{ }；Text-align:居中；。
为什么？(我假设你用的是火狐和ie 6)。你的布局对你来说可能看起来是正确的，但对使用早期版本的IE用户来说可能不正确。记得把左右页边距设置成自动居中？但这并不适用于所有IE，所以body { text -align:center；}是在旧版本IE中居中wrapperDIV的解决方案。
(对了，火狐和IE中的文字大小是不一样的。我们以后再解决。)
步骤3:设置页眉宽度和布局
让标题向左浮动，并将其宽度设置为750像素:
# header { float:left；宽度:750px}
步骤4:设置容器的宽度和布局。
让容器向左浮动，宽度为500像素:
#容器{ float:left；宽度:500px}
步骤5:设置边栏宽度和布局
让边栏向左浮动，宽度为240像素，背景为灰色:
。侧栏{ float:left；宽度:240px背景:# eeeeee}
#ffffff是白色和背景:# eeeeee它是非常浅的灰色。我们给侧边栏添加了一个背景色，只是为了看看添加了剩余的10个像素后的区别。
步骤6:设置页脚的宽度和布局。
让页脚向左浮动，两边什么都没有，宽度为:750px:
# footer { clear:both；浮动:左；宽度:750px}
页眉页脚的样式和页眉页脚有什么区别？答案很明确:都在页脚{ }；。在那里，它使页脚无法与它上面的东西(如侧边栏或容器)连接。
保存并刷新浏览器。
第7步:将剩余的10个像素添加到侧边栏
将剩余的10个像素的边距添加到边栏中。现在侧边栏的CSS应该是:
。侧栏{ float:left；宽度:240px背景:# eeeeee边距:0 0 0 10px}
保存并刷新浏览器，看到10像素的空白已经添加到侧边栏的左侧。
边距:0 0 0 10px上边距为0，右边距为0，下边距为0，左边距为10个像素。当大小为0时，不需要px单位。
第八步(额外步骤):修复IE的双倍边距bug
Internet Explorer有一个双倍边距的错误，所以在IE下，我们的页面间距是20像素。20像素的边距可能会破坏布局，并将侧栏挤到页面底部，因为20像素的边距使得容器和侧栏的宽度之和为760px，而不是750px。要解决这个问题，添加display:inline；到侧边栏。现在你的边栏应该是:
。侧栏{ float:left；宽度:240px背景:# eeeeee边距:0 0 0 10px显示:内嵌；}
以下是当前索引和样式文件的内容。
