|
最新WordPress 主題開發(fā)教程：寬度和布局 以下是三零網(wǎng)為大家整理的最新WordPress 主題開發(fā)教程：寬度和布局的文章，希望大家能夠喜歡! 這篇將介紹如何設(shè)置每個 DIV 的寬度和布局排版，并且也會展示如何讓主題顯示正確，并同時在 Firefox 和 IE 下兼容，顯示一致。 在我們開始之前，打開Xampp Control，主題文件夾，F(xiàn)irefox瀏覽器，IE瀏覽器，index.php和style.css這兩個文件。 第1步：設(shè)置頁面總體寬度現(xiàn)在我們首先要確定的是主題的總體寬度。我們使用 750px；主題的大小取決于博客絕大多數(shù)訪問者的屏幕分辨率。需要避免的是使用過大寬度的 的主題，如果博客的讀者都大多數(shù)使用 800px × 600px 的屏幕，這樣的話，如果是使用 900px 寬的主題將會有 100多像素超出他們的屏幕，顯然這是對用戶很不友好的。 不管怎樣，我們怎么樣把主題的總體寬度設(shè)置為 750px 呢？ 我們需要把現(xiàn)在主題中的所有的東西（header，container，sidebar 和 footer）放入一個 750px 的 DIV 標(biāo)簽中。 在<body>之后增加：<div id=”wrapper”> 在</body>之前增加：</div> 在style.css文件中輸入以下代碼：
在 CSS，#號是通過id來定位頁面中的元素，而點(diǎn)號是通過class來定位頁面中的元素，如果你的代碼是<div class=”wrapper”>，那么就應(yīng)該用?.wrapper?來替代#wrapper?去定位?wrapper?這個 DIV 標(biāo)簽。 同時保存?index.php?和?style.css?文件。刷新 Firefox 和 IE 瀏覽器（按 F5）查看所做的改動。 詳細(xì)解釋： margin: 0 auto 0 auto;?意思是（注意順序）：0上頁邊空白，自動右頁面空白，0下頁邊空白和自動左頁面空白。從現(xiàn)在開始，記得設(shè)置左右頁邊空白為自動將使得居中對齊。 width: 750px;?顯而易見是 750 像素。 text-align: left;?是讓?wrapper DIV?中的文本向左對齊因?yàn)槲覀兊认乱獙?body{ text-align: left;}?改成?text-align: center; 第2步：自動頁面居中把?body{}?中的?text-align: left;?改成?text-align: center;。 為什么？（我假設(shè)你使用的是 Firefox 和 Internet Explorer 6）。你的布局可能你看起來是正確的，但對于使用早前版本的 IE 用戶可能不正確。還記得設(shè)置左邊和右邊的頁邊空白為自動是居中嗎？但是這并不是對所有的 IE 都適用，所以?body{ text-align: center; }?是讓?wrapper?DIV 居中在舊版本 IE 的一種解決方案。 （隨便說一下，在 Firefox 和 IE 中文本大小是不同的，我們稍后解決。） 第3步：設(shè)置 header 寬度和布局讓?Header?浮到左邊并且設(shè)置它的寬度為 750px：
第4步：設(shè)置 Container 寬度和布局讓?Container?浮到左邊并且寬度為 500px：
第5步：設(shè)置 Sidebar 寬度和布局讓?Sidebar?浮到左邊，寬度為240px，并且給它灰色的背景：
#ffffff 是白色而background: #eeeeee;?是非常淺的灰色。我們給側(cè)邊欄增加一個背景顏色只是去查看當(dāng)增加剩下的 10 像素之后的不同之處。 第6步：設(shè)置 Footer 的寬度和布局讓?Footer?浮到左邊，左右兩邊都沒有東西，并且寬度為：750px：
Header?和?Footer?的樣式有什么區(qū)別呢？答案是?footer{}?中有?clear: both;。它在那兒使得 Footer 不能和它上面的東西（如 Sidebar 或者 Container）連接起來。 保存并刷新瀏覽器。 第7步：給側(cè)邊欄增加其余的 10 像素給側(cè)邊欄增加其余的 10 像素的頁邊空白?，F(xiàn)在側(cè)邊欄的 CSS 應(yīng)該是：
保存并刷新瀏覽器去查看 10 像素的空白增加到側(cè)邊欄的左邊了。 margin: 0 0 0 10px;?具體的意思是：上邊空白為0，右邊空白為0，底部空白為0，左邊空白為10像素。當(dāng)大小為0的時候，px?單位不是必需的。 第8步（額外的步驟）：修正 IE 的雙倍頁邊距 bugInternet Explorer?有個雙倍頁邊距的 bug，這樣在 IE 下，我們的頁面距就是 20像素，20像素的頁邊距可能會破壞布局并把側(cè)邊欄擠到頁面的底部，因?yàn)橐粋€20像素的頁邊距使得 Container 和 Sidebar 的寬度之和為 760px 而不是 750px。為了解決這個問題，增加?display: inline;?到側(cè)邊欄?，F(xiàn)在你的側(cè)邊欄應(yīng)該是：
這里是現(xiàn)在的?index?和?style?文件的內(nèi)容。 延伸閱讀: ·WordPress主題開發(fā)教程：日志樣式化和其他雜項(xiàng) ·WordPress主題開發(fā)教程：日志元數(shù)據(jù) ·WordPress主題開發(fā)教程：編寫Header模板續(xù) ·WordPress 主題開發(fā)教程：Style.css 和 CSS 介紹 ·WordPress 主題開發(fā)教程：十六進(jìn)制顏色代碼和樣式化鏈接 ·WordPress 主題開發(fā)教程：頁面鏈接列表 ·WordPress 主題開發(fā)教程：存檔和鏈接列表 ·WordPress 主題開發(fā)教程：底部和拆分 ·WordPress 主題開發(fā)教程：樣式化側(cè)邊欄 ·WordPress 主題開發(fā)教程：模板文件介紹 ·WordPress 主題開發(fā)教程：窗體化側(cè)邊欄 ·WordPress 主題開發(fā)：尾部模板 ·WordPress 主題開發(fā)教程：驗(yàn)證 XHTML ·wordpress 主題開發(fā)入門教程 ·WordPress 主題開發(fā)教程：搜索框和日歷 |
|
|
