Z-Blog实现摘要图文混排效果的方法
作者:williamlong 来源:月光博客 时间:2009-02-23 13:54:00
有些使用Z-Blog的用户询问我,怎么实现我的月光博客首页上这种自动图文混排的版式效果,今天我就详细介绍一下在Z-Blog中实现这种图文混排的方法。
实现这种版式的前提条件是,每篇文章有且只能有一个Tag,每个Tag都有一个对应的图片文件,如果没有图片,可以使用一个1像素的GIF图片来代替。
有了这些之后,打开Z-Blog的文件夹,编辑TEMPLATE/b_article_tag.html文件,修改为如下内容:
<img src="<#ZC_BLOG_HOST#>logo/<#article/tag/intro#>.gif"
alt="<#article/tag/name#>" class="thumb" />
如果想在图片上增加链接,修改上面的内容,加入超级连接即可。
修改TEMPLATE/b_article-multi.html文件,将原来的
<div class="post-body"><#article/intro#></div>
修改为
<div class="post-body"><#template:article_tag#><#article/intro#></div>
进入Tags管理,给每个Tags增加一个摘要,内容为一个英文单词,用于图片文章名。
然后,在Blog的根下建立一个名为logo的目录。将上面命名的文件名增加.gif后缀后复制到这个目录下。
修改STYLE目录下的CSS文件,增加如下内容:
div.post-body img.thumb {
float: right;
margin: 4px 4px 4px 4px;
padding: 0px;
border: 0px;
padding: 0px;
max-width: 500px;
max-height:500px;
overflow:hidden;
clear:both;
}
以上的CSS代码在IE和FireFox下测试均显示正常。如果使用表格方式插入图片可能会引起FireFox不兼容的现象。
最后,重建所有文件。
这时候,你就可以得到和我的博客一样的显示效果。
标签:z-blog,图文,摘要,tag
0
投稿
猜你喜欢
各个版本IE合集下载,共存无冲突
2007-11-29 13:12:00
IE8的一些CSS hack
2008-03-17 13:08:00
MYSQL教程:如何选择正确的数据列类型
2009-02-27 16:05:00
Div的浮动+循环(描述的不清楚,请看图)
2008-09-22 20:21:00
5种禁用html页面的缓存方法
2007-09-30 12:12:00
Google首页的CSS Sprite
2007-09-29 21:36:00
图片放大镜,多图片放大(已更新)[可调整倍数、区域大小、展示区域位置]
2011-06-16 20:43:07
无图片CSS圆角的五个实例
2008-08-02 12:18:00
专家教你安装 MySQL的与MySQL GUI Tools
2012-01-29 17:59:05
ASP操作XML文件的完整实例
2007-09-26 12:05:00
ASP环境下邮件列表功能的实现
2007-10-03 14:25:00
asp获取完整url地址代码
2010-03-22 14:25:00
关于document.createDocumentFragment()
2009-04-05 16:04:00
ASP 获取文件扩展名函数getFileExt()
2011-03-11 11:18:00
PHP中的MYSQL常用函数
2010-09-30 14:49:00
支持鼠标拖拽的简单目录树代码
2011-07-01 12:34:09
如何实现表单提交时提示正在发送
2008-12-23 13:30:00
使用字符串建立查询能加快服务器的解析速度吗?
2010-07-14 21:03:00
如何利用ASP实现邮箱访问
2007-09-29 12:27:00
如何获取SQL Server数据库元数据的方法
2009-01-19 14:00:00