• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧
您的位置:首页 > CMS教程 >z-blog > Z-blog默认模板的页面模型分析

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

作者:jb51 字体:[增加 减小] 来源:互联网 时间:2017-05-13

jb51 向大家介绍了h5页面模板,登录页面模板,微信公众号页面模板,注册页面html模板,微信页面模板等相关知识,希望对您有所帮助
关键字描述:模型 分析 页面 模板 默认 class CSS &ldquo 显示 设置

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

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

页面全局的元素布局

全局

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

DivPage块

每一个divPage块中的元素都是一样的,总共有5大块:divTop,divNavBar,divMain,divSidebar,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,这使得改变不同分块的显示效果变的很容易。

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

软件与测试

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

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/


</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

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

相关文章

  • 2017-05-13z-blog 留言板倒序显示的修改方法
  • 2017-05-13z-blog用CSS定义分类RSS订阅图标
  • 2017-05-13Z-Blog 博客评论用户无url链接跳转网站修改方法
  • 2017-05-13zblog文章发布默认浏览数修改方法
  • 2017-05-13z-blog评论加入Gravatar头像功能
  • 2017-05-13Z-Blog 文件复制插件
  • 2017-05-13Zblog中ZTI文件上传失败解决方法
  • 2017-05-13Z-Blog文章列表区标签与特殊标签说明
  • 2017-05-13zblog二次回复不显示在侧栏最新评论里的修改方法
  • 2017-05-13zblog2.2实现首页显示指定的分类技巧

文章分类

  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧

最近更新的内容

    • z-blog让导航突出显示当前页链接条目
    • zblog php版本如何修改后台默认登录地址
    • Z-Blog 博客评论用户无url链接跳转网站修改方法
    • z-blog分页条中的上下分页调用
    • z-blog的目录、留言、引用标签教程
    • Z-Blog 留言评论显示IP地址和性能优化
    • Z-blog错误原因:未知错误ID:-2147467259
    • 去掉zblog留言编辑后留下的“最后编辑”那句提示文字的方法
    • Z-Blog 文件复制插件
    • z-blog如何刷新和显示浏览计数

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有