感谢 大龙 的分享,本站今天也启用了“素雅三栏”作为默认的模板。不过,这个模板(可能我之前的TriBlue也是)都有一个小问题。在IE 6.0中,公告栏的文字如果稍长,将出现著名的 IE6 Peekaboo/Guillotine Bug。
关于IE6 Peekaboo/Guillotine Bug的情况,请看这篇文章。而 Nicky 也写了很精彩的两篇文章讲述这个BUG(链接一 和 链接二)。引用一下最重点的地方:
另外,Nicky也给了我们一个演示。可以使用IE 6访问这个演示。
关于IE6 Peekaboo/Guillotine Bug的情况,请看这篇文章。而 Nicky 也写了很精彩的两篇文章讲述这个BUG(链接一 和 链接二)。引用一下最重点的地方:
引用自 Nicky's Blog
Guillotine Bug出现的条件:
1、一个container(容器)
2、一个漂浮在container(容器)里面的元素(无论左右)
3、紧跟后面有一个没有漂浮的内容,里面包含链接
4、链接的a:hover样式有变化时,改变链接颜色除外。
(尤其以background、padding、border、Text Style这些属性效果最为明显。)
5、漂浮的元素比没有漂浮的内容高,不然就不存在切断了。
1、一个container(容器)
2、一个漂浮在container(容器)里面的元素(无论左右)
3、紧跟后面有一个没有漂浮的内容,里面包含链接
4、链接的a:hover样式有变化时,改变链接颜色除外。
(尤其以background、padding、border、Text Style这些属性效果最为明显。)
5、漂浮的元素比没有漂浮的内容高,不然就不存在切断了。
另外,Nicky也给了我们一个演示。可以使用IE 6访问这个演示。
这个模块插件已经更新。这次的改进是:
- 可体现当前模板。页面打开后下拉列表自动选中当前模板。
- 可恢复blog设定的默认模板。
- 多语言支持。安装时可自动识别简体与繁体。(其它语言则显示为简体中文)
原先已经安装这个模块项目的,请删除后重装一次。
插件名:侧边模板更换
插件类型:模块项目
插件位置:侧边栏
适用版本:2.0.1 RC 1以上
简介:
该插件可以在您的侧边栏增加一个选择模板的选择列表。
同时也说明了模块项目如何使用PHP代码。
下载后解压到您的硬盘,然后在后台 模块配置 - 新增/编辑项目 - 2. 自动添加项目 中,选择这个文件的位置,点击安装即可。
演示:见本站
下载文件
- 可体现当前模板。页面打开后下拉列表自动选中当前模板。
- 可恢复blog设定的默认模板。
- 多语言支持。安装时可自动识别简体与繁体。(其它语言则显示为简体中文)
原先已经安装这个模块项目的,请删除后重装一次。
插件名:侧边模板更换
插件类型:模块项目
插件位置:侧边栏
适用版本:2.0.1 RC 1以上
简介:
该插件可以在您的侧边栏增加一个选择模板的选择列表。
同时也说明了模块项目如何使用PHP代码。
下载后解压到您的硬盘,然后在后台 模块配置 - 新增/编辑项目 - 2. 自动添加项目 中,选择这个文件的位置,点击安装即可。
演示:见本站
下载文件
这个模板探讨了实现三栏的可能性和可行性,旨在抛砖引玉,让模板的制作者能根据自己的喜好设计出更漂亮的三栏模板来。
随着1024*768以及更高的分辨率成为主流(从我的在线统计信息来看,分辨率在1024*768以上的超过了所有访问者人数的95%),三栏、宽屏的页面布局逐渐增多了起来。三栏式的设计能够大大地提高屏幕区域的利用率,显得大方而得体。
这个模板就是本着这样一个目的,对三栏式模板进行的一次探索。
模板使用时需注意一点,这个模板自动将“最新日志”这个项目以及其后的所有项目放入侧边栏二,之前的项目则留在侧边栏一的位置。因此,您可能需要对侧边栏的项目进行排序,以尽量维持两个侧边栏的疏密有致。
以下内容供模板制作者参考:
如果您打开这个模板的 elements.php ,您就会发现,三栏的实现原理很简单。那就是(1)先自定义出“最新日志”这个项目,即该文件中的 $elements['sideblock_entries'] 。顺便一提,如果elements.php没有对某个侧边栏项目的定义,则所有侧边栏项目都会采用默认的定义(即 $elements['sideblock']),而一旦有了针对某个侧边项目的定义,那么在输出这个侧边栏项目时就会采用这个定义。
随着1024*768以及更高的分辨率成为主流(从我的在线统计信息来看,分辨率在1024*768以上的超过了所有访问者人数的95%),三栏、宽屏的页面布局逐渐增多了起来。三栏式的设计能够大大地提高屏幕区域的利用率,显得大方而得体。
这个模板就是本着这样一个目的,对三栏式模板进行的一次探索。
模板使用时需注意一点,这个模板自动将“最新日志”这个项目以及其后的所有项目放入侧边栏二,之前的项目则留在侧边栏一的位置。因此,您可能需要对侧边栏的项目进行排序,以尽量维持两个侧边栏的疏密有致。
以下内容供模板制作者参考:
如果您打开这个模板的 elements.php ,您就会发现,三栏的实现原理很简单。那就是(1)先自定义出“最新日志”这个项目,即该文件中的 $elements['sideblock_entries'] 。顺便一提,如果elements.php没有对某个侧边栏项目的定义,则所有侧边栏项目都会采用默认的定义(即 $elements['sideblock']),而一旦有了针对某个侧边项目的定义,那么在输出这个侧边栏项目时就会采用这个定义。
(接上,第三部分继续)
2. CSS详解
下面介绍主要的CSS类的用途和一些说明。请参考整体框架图阅读。
2.1 整体框架
#wrapper - 整个页面的框架。
#innerWrapper - 内嵌在wrapper里的整个页面的框架。
2.2 顶部框架
#header - 整个顶部框架
#innerHeader - 内嵌在header里的框架。
.blog-header - 包含blog标题和描述。
h1 - blog的标题。
.blog-desc - blog的描述语。
menu - blog的顶部模块(导航条)。
2.3 主体框架
#mainWrapper - 整个主体部分的框架,包含了侧边栏和主内容这两个框架。
2.4 侧边栏框架
.sidebar - 整个侧边栏框架。
#innerSidebar - 内嵌在sidebar内的框架。
.sidebar-hide - 当侧边栏关闭时的侧边栏样式。(display: none;)
.panel - 具体到某一个侧边栏项目的总框架。
.panel h5 - 侧边栏项目的抬头部分。
.panel-content - 侧边栏项目的主要内容区域。
.panel-content li - 侧边栏包含列表项的样式。
.panel-content li.indent - 侧边栏列表项缩进后的样式(如链接前的列表符号)。
2. CSS详解
下面介绍主要的CSS类的用途和一些说明。请参考整体框架图阅读。
2.1 整体框架
#wrapper - 整个页面的框架。
#innerWrapper - 内嵌在wrapper里的整个页面的框架。
2.2 顶部框架
#header - 整个顶部框架
#innerHeader - 内嵌在header里的框架。
.blog-header - 包含blog标题和描述。
h1 - blog的标题。
.blog-desc - blog的描述语。
menu - blog的顶部模块(导航条)。
2.3 主体框架
#mainWrapper - 整个主体部分的框架,包含了侧边栏和主内容这两个框架。
2.4 侧边栏框架
.sidebar - 整个侧边栏框架。
#innerSidebar - 内嵌在sidebar内的框架。
.sidebar-hide - 当侧边栏关闭时的侧边栏样式。(display: none;)
.panel - 具体到某一个侧边栏项目的总框架。
.panel h5 - 侧边栏项目的抬头部分。
.panel-content - 侧边栏项目的主要内容区域。
.panel-content li - 侧边栏包含列表项的样式。
.panel-content li.indent - 侧边栏列表项缩进后的样式(如链接前的列表符号)。






