WP Theme 教程 #11:寬度和布局

【轉載自我愛水煮魚

這篇將涉及如何設置每個 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 文件的內容.

下一篇:WP Theme 教程 #12:日志樣式化和其他雜項

請查看教程目錄:WordPress 主題教程系列

翻譯自:WP Theme Lesson #11: Widths and Floats

創建 WordPress 主題系列教程均為本站翻譯,如要轉載,請注明:轉載自我愛水煮魚和本文地址。


想在手機閱讀更多Wordpress資訊?下載【香港矽谷】Android應用
分享到Facebook
技術平台: Nasthon Systems