WordPress基础教程

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

发布时间:2022-04-22 10:16:49

本文作者:

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

在我们开始之前,打开 Xampp Control主题文件夹Firefox 浏览器,IE 浏览器,index.phpstyle.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.php 和 style.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; } 是让 wrapper DIV 居中在旧版本 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 文件的内容。

本站所提供的文章资讯、软件资源、素材源码等内容均为作者提供、网友推荐、互联网整理而来(部分报媒/平媒内容转载自网络合作媒体),仅供学习参考,如有侵犯您的版权,请联系我们,本站将在三个工作日内改正。

小兽wordpress凭借多年的wordpress企业主题制作经验,坚持以“为用户而生的wordpress主题”为宗旨,累计为10万多家客户提供品质wordpress建站服务,得到了客户的一致好评。我们一直用心对待每一个客户,我们坚信:“善待客户,将会成为终身客户”。小兽wordpress能坚持多年,是因为我们一直诚信。我们明码标价(wordpress做网站需要多少钱),从不忽悠任何客户,我们的报价宗旨:“拒绝暴利,只保留合理的利润”。如果您有网站建设、网站改版、网站维护等方面的需求,请立即咨询右侧在线客服或拨打咨询热线:18907337671,我们会详细为你一一解答你心中的疑难。

相关文章

为什么选择小兽WordPress

哪怕不计成本的时间投入,也绝不辜负任何一个客户。
成就客户成就自我的同时,把这个世界变得再美好一点。

我们的故事

小兽WordPress是2011年开始接触互联网,在这期间用WordPress搭建了一个博客叫小兽WordPress,专门学习WordPress建站。

我们的使命

我们希望用WordPress这款优秀的建站程序帮助每个人搭建一个属于自己的网站,高效率低成本做好互联网营销。

我们的文化

我们专注于把客户的事情最好并且做对,这意味着我们在做决定时会考虑到结果,最重要的是,我们力求真实。

我们的未来

我们将在不久的未来成为国内最好的WordPress工作室,小兽WordPress希望和每一个客户成为朋友,一起见证这个美好未来。

为什么选择小兽WordPress

告诉我你是谁,为你量身定做建站方案

我们深知不同的人做网站的阶段不一样,有的是新手,有的是老手。
我们清楚不同的人做网站的目的不一样,有的是展示,有的是营销。

选择如何让自己的业务更上一层楼

还没有WordPress网站

还没有WordPress网站

不管你从事什么行业,WordPress都会为你提供一个专业的主题模板。在WordPress市场上有成千上万的免费主题,适合很多中小企业。

查看所有模板
已经有WordPress网站

已经有WordPress网站

小兽WordPress诚邀你一起学习WordPress,愿与各方携手升级改善您的WordPress网站,一起交流网站加速,网站优化等问题。

马上交个朋友
微信联系
chat 扫码联系
模板建站
挑选模板
网站定制
免费诊断
咨询热线
咨询热线

18907337671

返回顶部