wordpress 主题一步步制作教程!第20课 宽度和布局(图解)

这篇将涉及如何设置每个 DIV 的宽度和布局排版。同样也会向你展示如何让你的主题显示正确,并同时在 Firefox 和 IE 显示相同。

在我们开始之前,打开下面这些东东:Xampp Control主题文件夹Firefox 浏览器,IE 浏览器,index.phpstyle.css这两个文件。

 

第1步:

第一件你要去做的事情就是你要决定你主题的总体宽度。我们使用 750px(750 像素);每个 100 像素是1英寸。你的主题取决于你绝大多数博客访问者的查看规格。你需要避免的是使用 900px 的主题,如果你的读者都大多数使用 800px × 600px 的屏幕,这样的话,你的 900px 主题将会有 100px 超出他们的屏幕。那是无法接受的。

不管怎样,你怎么样把你总体宽度设置为 750px 呢?
你需要把所有的东东放入一个 750px 盒子中或者 DIV 标签。所有东西是指包括:header,container,sidebar 和 footer。

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

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

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

在 CSS,具体是在 style.css 中, # 号是你用来指向跟着 id 的 DIV。而点号是用来指向跟着 class的 DIV。举个 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 浮到左边并且设置它的宽度为 750px:

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

第4步:

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

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

第5步:

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

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

注意,你没有使用 # 号去指出 Sidebar DIV,而是使用点号。#ffffff 是白色而background: #eeeeee; 是非常浅的灰色。你给侧边栏增加一个背景颜色只是去查看当增加剩下的 10 像素之后的不同之处。

第6步:

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

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

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

保存并刷新浏览器。

第7步:

给侧边栏增加其余的 10 像素的页边空白。现在你的侧边栏应该是下面这个样子:

.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步(额外的步骤):

这是为了一旦你使用了20像素的页边距而不是10像素。20像素的页边距可能会破坏你的布局并把侧边栏挤到页面的底部,因为一个20像素的页边距使得 Container 和 Sidebar 的宽度之和为 760px 而不是 750px。这额外的步骤是 Internet Explorer 的错,这个使得双倍页边距的 bug 在 Firefox 中并不存在。

为了解决这个问题,增加 display: inline; 到侧边栏。现在你的侧边栏应该是:

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

这篇到此为止,如果你有什么问题就请大胆问吧,我会进自己最大努力帮你的,不要让你仅仅成为只是来这里逛逛的常客。

这里是我的现在的 indexstyle 文件的内容.

 

本文转自“我爱水煮鱼”

原文地址:http://fairyfish.net/2007/06/21/wp-theme-lesson-11-widths-and-floats/

About sosel

发表评论

电子邮件地址不会被公开。 必填项已用*标注