服务器之家:专注于服务器技术及软件下载分享
分类导航

DEDECMS|帝国CMS|Discuz|PHPCMS|Wordpress|ZBLOG|ECSHOP|苹果CMS|极致CMS|CMS系统|

服务器之家 - 建站程序 - ZBLOG - Z-blog默认模板的页面模型分析

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

2019-10-07 14:20zblog教程网 ZBLOG

制作Z-Blog的样式,首先要对Z-Blog的页面元素、布局要有了解,再配合CSS、图像处理等技术,就可以制作了。 Z-Blog采用了页面表现、样式与内容分离的技术,也算是Web Standards其中的一环了,好处

制作Z-Blog的样式,首先要对Z-Blog的页面元素、布局要有了解,再配合CSS、图像处理等技术,就可以制作了。

Z-Blog采用了页面表现、样式与内容分离的技术,也算是Web Standards其中的一环了,好处就是可以通过更换CSS样式表,表现出不同的外观,让你的网站显得更活泼、有趣。

页面全局的元素​布局

全局

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

为什么全局DIV块嵌套了3回,这是为了应付一些特殊的样式需求。另外,如果要列表页和单日志页产生不同的效果,就要设置body的class了。

DivPage块

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

每一个divPage块中的元素都是一样的,总共有5大块:divTop,divNavBar,divMain,divSidebar,divSidebar,divBottom,你可以在CSS中控制导航条或是工具栏等的显示与否。

翻页条放在了class=“post”的div块里,将会设置了两个class,既class=“post pagebar”

每页的发表评论框只会有一个,所以也设置了id=“divCommentPost”

日志与分栏

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

Z-Blog中的分块要属div class=“post”,ul class=“msg”,div class=“function”,将整体的页面CSS设置完,就要细化设置分块的CSS属性。

div class=“post”是日志显示部分的元素,它拥有多重class,这样可以方便的定制不同分类或是不同作者的日志显示效果。

ul class=“msg”控制显示留言和评论。

div class=“function”是工具栏上的分块,部分分块设置了id,这使得改变不同分块的显示效果变的很容易。

相关参考:默认模板右侧栏目代码整理和注释

软件与测试

样式做的好不好,是不是在通用的浏览器中显示都正常,这就需要不断的测试了,下面就推荐几个流行的浏览器:

IE

IE是龙头老大,所以样式在IE下显示一定要正常,IE6的性能是很不错的呢,唯一感觉就是跟不上标准,对CSS支持也不够好,比如first-child等。我主要是针对IE6,对于IE5基本上没什么关注。

FireFox

Mozilla FireFox是近两年最火的浏览器,想不看到它都难,更新快,支持DOM标准(IE对DOM的实现有时真让人恶心),支持CSS也很好,附带的DOM Inspector查看器是调试网页的利器,无论是JS脚本还是CSS,一定能用的上的。

下载:http://www.mozilla.org/

Opera

目前Opera 已有了长足的发展,解决了显示中文的BUG,改进了JS及CSS支持,有和FireFox一拼的实力了。

下载:http://www.opera.com/

延伸 · 阅读

精彩推荐
  • ZBLOG安装zblog程序时数据库连接失败

    安装zblog程序时数据库连接失败

    问:如图所示,之前安装过程序,现在安装程序就成这样了,安装程序时数据库连接失败 答:您好,站点 根目录下的 zb_users/ c_option.php 中的数据库配置文件...

    未知822023-05-07
  • ZBLOGz-blog插件的制作过程步骤分享

    z-blog插件的制作过程步骤分享

    有关z-blog插件的制作过程步骤,在搜索引擎里至今没有发现一篇详细的教程,官方也没有给出一个详细的实例,所以不少跃跃欲试的朋友,却找不到方向,...

    zblog教程网6522019-10-10
  • ZBLOG刚上传了个ZBLOG的打开怎么显示这样子

    刚上传了个ZBLOG的打开怎么显示这样子

    问:FTP(上传)用户名: 刚上传了个ZBLOG的打开怎么显示这样子 500InternalPrivoxyError Privoxyencounteredanerrorwhileprocessingyourrequest: Couldnotloadtemplatefileno-server-datao...

    未知842023-05-07
  • ZBLOGz-blog如何刷新和显示浏览计数

    z-blog如何刷新和显示浏览计数

    1.更新浏览计数 在打开单页日志后产生,每刷新一次,计数加1。 注意:只有在b_article-single.html有以下及第3步中介绍的代码,浏览计数才有效。 在b_articl...

    zblog教程网4022019-10-06
  • ZBLOGzblog伪静态设置教程

    zblog伪静态设置教程

    zblog默认是动态页面链接,从seo角度考虑,做成静态链接会更好一些,zblog的伪静态设置还是挺方便的,下面来看一下如何设置 ...

    万书涛8012021-07-12
  • ZBLOGzblog提示授权文件非法的解决办法

    zblog提示授权文件非法的解决办法

    本文为大家介绍zblog提示授权文件非法的解决办法,有需要的朋友可以参考下...

    zblog教程网13702021-07-12
  • ZBLOGZ-blog错误原因:未知错误ID:-2147467259

    Z-blog错误原因:未知错误ID:-2147467259

    最近很多人都碰到一个问题:在索引重建的时候出现了操作必须使用一个可更新的查询 错误原因:未知错误ID:-2147467259。 摘要: 操作必须使用一个可更新的查...

    Zblog教程网6502019-10-07
  • ZBLOGZ-Blog博客设置技巧:设置Gravatar头像无法显示的方法

    Z-Blog博客设置技巧:设置Gravatar头像无法显示的方法

    Gravatar是“全球通用头像”,在任何支持Gravatar的网站和博客中,填写填写申请注册Gravatar头像用的这个Email地址,你的头像就会出现在留言和评论系统中。...

    zblog教程网5342020-08-21