Z-blog网站默认模板的页面模型分析

在制作Z-Blog的样式之前，首先需要了解Z-Blog的页面元素和布局，并结合CSS、图像处理等技术，才能有效地进行样式设计。

Z-Blog采用了页面表现、样式与内容分离的技术，这也是Web标准的一部分。通过更换CSS样式表，您可以轻松改变网站的外观，使其更加活泼和有趣。

页面全局元素布局

• 全局布局

全局DIV块嵌套了三层，这是为了满足某些特殊的样式需求。如果您希望列表页和单日志页呈现不同的效果，需要设置`body`的class。

• DivPage块

每个`divPage`块中的元素都是相同的，总共有五大块：`divTop`、`divNavBar`、`divMain`、`divSidebar`和`divBottom`。您可以通过CSS控制导航条或工具栏的显示与否。

1. 翻页条放置在`class=”post”`的div块中，因此设置了两个class：`class=”post pagebar”`。
2. 每页的发表评论框只有一个，因此设置了`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，这使得改变不同分块的显示效果变得更加简单。

• 相关参考

默认网站模板右侧栏目代码整理与注释：https://www.cmszc.com/cms/zblog/570.html

样式的好坏在于其在主流浏览器中的显示效果，因此需要不断进行测试。以下是几个流行的浏览器推荐：

• Internet Explorer (IE)

IE是市场上的主导浏览器，因此样式在IE下的显示必须正常。IE6的性能相对较好，但对标准的支持不足，尤其是在CSS方面，例如对`first-child`的支持。我主要关注IE6，对于IE5的兼容性则关注较少。

• Mozilla Firefox

Mozilla Firefox是近年来最受欢迎的浏览器，更新迅速，支持DOM标准（相较于IE对DOM的实现，Firefox的表现更佳），对CSS的支持也很好。附带的DOM Inspector调试工具是调试网页的利器，无论是JS脚本还是CSS，都能派上用场。

下载地址：[Mozilla Firefox] http://www.mozilla.org/

• Opera

Opera浏览器近年来发展迅速，解决了中文显示的BUG，改进了JS和CSS的支持，具备与Firefox一较高下的实力。

下载地址：Opera http://www.opera.com/

如果您对Z-Blog的页面模型分析有更多的兴趣，欢迎访问 站长营地（CmsZc.com） 获取更多相关教程和资源。