预览效果http://www.fmme.cn/
首先,我们需要小小的改动一下我们的模板,把Template/b_article-multi.html中的
复制内容到剪贴板
代码:
<div class="post-body"><#article/intro#></div>改成<div class="post-intro"><#article/intro#></div> ,这样可以让Zblog首页的文章摘要和文章全文的样式区分开来,以免造成摘要图片或者文章图片的混乱.第一步很简单,需要做的只是改这几个字母而已.
然后呢,我们需要特别的定义一下这个post-intro的样式了.一定要注意到我们的更改只是用post-intro换下了post-body而已,所以在当前样式的样式表中找到如下一段:
div.post div.post-body{
float:left;
width:538px;
margin:0 0 0 0;
padding:0 0 0 5px;
font-size:12px;
word-break:break-all;
text-align:left;
line-height:150%;
background:#fff;
}
注意:绿色部分看具体样式表而定,但是div.post div.post-body在默认的样式表中有,如果是自己定义的主题,可以找到相应的部分.然后复制这一部分,直接放在样式表的最后面就是了,注意把body改成intro.另外复制相应的下面一部分到文件最后.
div.post-body img{
padding:4px 4px 4px 4px;
border:0;
clear : both;
float : none;
}
准备工作完成,下面第三步修改样式表使其呈现我们想要的效果.
先在
post-intro中添加clear:both;然后在div.post-intro img中将float : none;改为float:left;这样,摘要中的图片就会居左显示了,至于图片居右,把left改成right就可以了.ohyeah!雕虫小技而已~~~~~
哦，别忘了重建文件。
当然,要使其出现效果还要在摘要中加入你的图片才行,至于方法,我不说了
月光博客Z-Blog实现摘要图文混排效果的方法
http://www.williamlong.info/archives/754.html
[
本帖最后由 跑调 于 2007-5-29 21:29 编辑 ]
