WordPress主题开发教程20:宽度和布局(WordPress主题文件结构)

文章快速目录

第一步:设置页面整体宽度第二步:自动页面居中第三步:设置页眉宽度和布局第四步:设置容器宽度和布局第五步:设置侧边栏宽度和布局第六步:设置页脚宽度和布局第七步:在侧边栏中添加剩余的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显示:内嵌；}

以下是当前索引和样式文件的内容。

这几篇文章你可能也喜欢：

• WordPress主题remove_action在子主题中不起作用。
• WordPress发布文章自动添加标签TAG(WordPress主页定制)
• 3优秀的WordPress外贸网站免费视频托管服务(WordPress外贸网站建设视频教程课程从零开始)
• 添加对wordpress小工具的访问(WordPress用户中心)
• 关闭批量WordPress图片的自动链接功能。

本文由主机参考刊发，转载请注明：WordPress主题开发教程20:宽度和布局(WordPress主题文件结构) https://zhujicankao.com/86427.html