制作Z-Blog的樣式，首先要對Z-Blog的頁面元素、布局要有了解，再配合CSS、圖像處理等技術，就可以制作了。

Z-Blog采用了頁面表現(xiàn)、樣式與內容分離的技術，也算是Web Standards其中的一環(huán)了，好處就是可以通過更換CSS樣式表，表現(xiàn)出不同的外觀，讓你的網站顯得更活潑、有趣。

頁面全局的元素布局

全局

為什么全局DIV塊嵌套了3回，這是為了應付一些特殊的樣式需求。另外，如果要列表頁和單日志頁產生不同的效果，就要設置body的class了。

DivPage塊

每一個divPage塊中的元素都是一樣的，總共有5大塊：divTop,divNavBar,divMain,divSidebar,divSidebar,divBottom，你可以在CSS中控制導航條或是工具欄等的顯示與否。

1. 翻頁條放在了class=“post”的div塊里，將會設置了兩個class，既class=“post pagebar”
2. 每頁的發(fā)表評論框只會有一個，所以也設置了id=“divCommentPost”

日志與分欄

Z-Blog中的分塊要屬div class=“post”,ul class=“msg”,div class=“function”，將整體的頁面CSS設置完，就要細化設置分塊的CSS屬性。

1. div class=“post”是日志顯示部分的元素，它擁有多重class，這樣可以方便的定制不同分類或是不同作者的日志顯示效果。
2. ul class=“msg”控制顯示留言和評論。
3. div class=“function”是工具欄上的分塊，部分分塊設置了id，這使得改變不同分塊的顯示效果變的很容易。

相關參考：默認模板右側欄目代碼整理和注釋

軟件與測試

樣式做的好不好，是不是在通用的瀏覽器中顯示都正常，這就需要不斷的測試了，下面就推薦幾個流行的瀏覽器:

IE

IE是龍頭老大，所以樣式在IE下顯示一定要正常，IE6的性能是很不錯的呢，唯一感覺就是跟不上標準，對CSS支持也不夠好，比如first-child等。我主要是針對IE6，對于IE5基本上沒什么關注。

FireFox

Mozilla FireFox是近兩年最火的瀏覽器，想不看到它都難，更新快，支持DOM標準（IE對DOM的實現(xiàn)有時真讓人惡心），支持CSS也很好，附帶的DOM Inspector查看器是調試網頁的利器，無論是JS腳本還是CSS，一定能用的上的。

下載：http://www.mozilla.org/

Opera

目前Opera 已有了長足的發(fā)展，解決了顯示中文的BUG，改進了JS及CSS支持，有和FireFox一拼的實力了。

下載：http://www.opera.com/

最新評論