WordPress主题开发教程二十:宽度和布局

文章快捷目录 第1步:设置页面总体宽度第2步:自动页面居中第3步:设置 header 宽度和布局第4步:设置 Container 宽度和布局第5步:设置 Sidebar 宽度和布局第6步:设置 Footer 的宽度和布局第7步:给侧边栏增加其余的 10 像素第8步(额外的步骤):修正 IE 的双倍页边距 bug这篇将介...

文章快捷目录

这篇将介绍如何设置每个 DIV 的宽度和布局排版,并且也会展示如何让主题显示正确,并同时在 Firefox 和 IE 下兼容,显示一致。

在我们开始之前,打开Xampp Control,主题文件夹,Firefox浏览器,IE浏览器,index.php和style.css这两个文件。

第1步:设置页面总体宽度

现在我们首先要确定的是主题的总体宽度。我们使用 750px;主题的大小取决于博客绝大多数访问者的屏幕分辨率。需要避免的是使用过大宽度的 的主题,如果博客的读者都大多数使用 800px × 600px 的屏幕,这样的话,如果是使用 900px 宽的主题将会有 100多像素超出他们的屏幕,显然这是对用户很不友好的。

不管怎样,我们怎么样把主题的总体宽度设置为 750px 呢?

我们需要把现在主题中的所有的东西(header,container,sidebar 和 footer)放入一个 750px 的 DIV 标签中。

在<body>之后增加:<div id=”wrapper”>

在</body>之前增加:</div>

在style.css文件中输入以下代码:#wrapper{margin: 0 auto 0 auto;width: 750px;text-align: left;}

在 CSS,#号是通过id来定位页面中的元素,而点号是通过class来定位页面中的元素,如果你的代码是<div class=”wrapper”>,那么就应该用.wrapper来替代#wrapper去定位wrapper这个 DIV 标签。

同时保存index.phpstyle.css文件。刷新 Firefox 和 IE 浏览器(按 F5)查看所做的改动。

详细解释:

margin: 0 auto 0 auto;意思是(注意顺序):0上页边空白,自动右页面空白,0下页边空白和自动左页面空白。从现在开始,记得设置左右页边空白为自动将使得居中对齐。width: 750px;显而易见是 750 像素。text-align: left;是让wrapper DIV中的文本向左对齐因为我们等下要要将body{ text-align: left;}改成text-align: center;第2步:自动页面居中

把body{}中的text-align: left;改成text-align: center;。

为什么?(我假设你使用的是 Firefox 和 Internet Explorer 6)。你的布局可能你看起来是正确的,但对于使用早前版本的 IE 用户可能不正确。还记得设置左边和右边的页边空白为自动是居中吗?但是这并不是对所有的 IE 都适用,所以body{ text-align: center; }是让wrapperDIV 居中在旧版本 IE 的一种解决方案。

(随便说一下,在 Firefox 和 IE 中文本大小是不同的,我们稍后解决。)

第3步:设置 header 宽度和布局

让Header浮到左边并且设置它的宽度为 750px:

#header{float: left;width: 750px;}

第4步:设置 Container 宽度和布局

让Container浮到左边并且宽度为 500px:

#container{float: left;width: 500px;}

第5步:设置 Sidebar 宽度和布局

让Sidebar浮到左边,宽度为240px,并且给它灰色的背景:

.sidebar{float: left;width: 240px;background: #eeeeee;}

#ffffff 是白色而background: #eeeeee;是非常浅的灰色。我们给侧边栏增加一个背景颜色只是去查看当增加剩下的 10 像素之后的不同之处。

第6步:设置 Footer 的宽度和布局

让Footer浮到左边,左右两边都没有东西,并且宽度为:750px:

#footer{clear: both;float: left;width: 750px;}

Header和Footer的样式有什么区别呢?答案是footer{}中有clear: both;。它在那儿使得 Footer 不能和它上面的东西(如 Sidebar 或者 Container)连接起来。

保存并刷新浏览器。

第7步:给侧边栏增加其余的 10 像素

给侧边栏增加其余的 10 像素的页边空白。现在侧边栏的 CSS 应该是:

.sidebar{float: left;width: 240px;background: #eeeeee;margin: 0 0 0 10px;}

保存并刷新浏览器去查看 10 像素的空白增加到侧边栏的左边了。

margin: 0 0 0 10px;具体的意思是:上边空白为0,右边空白为0,底部空白为0,左边空白为10像素。当大小为0的时候,px单位不是必需的。

第8步(额外的步骤):修正 IE 的双倍页边距 bug

Internet Explorer有个双倍页边距的 bug,这样在 IE 下,我们的页面距就是 20像素,20像素的页边距可能会破坏布局并把侧边栏挤到页面的底部,因为一个20像素的页边距使得 Container 和 Sidebar 的宽度之和为 760px 而不是 750px。为了解决这个问题,增加display: inline;到侧边栏。现在你的侧边栏应该是:

.sidebar{float: left;width: 240px;background: #eeeeee;margin: 0 0 0 10px;display: inline;}

这里是现在的index和style文件的内容。

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
豆包可以帮你高效完成AI问答、AI对话、提供软件相关教程以及解决生活中遇到的各种疑难杂症,还能帮助你进行AI写作、AI绘画等等,提高你的工作学习效率。
!
你也想出现在这里?立即 联系我们吧!
信息
个人中心
购物车
优惠劵
今日签到
搜索