昨天看到某个博客是用的首字下沉效果，网上找了找资料，都说是用CSS来实现的，大体就是定义first-letter的大小颜色等值，写进CSS文件就可以。
但是我用的是Z-BLOG，CSS文件的写法以及调用方式都和网上给出的方法有所不同。况且我是用的阿喳修改的风格，CSS文件和官方的又不同。在Z-BLOG官方论坛发贴一天了都没有朋友给个参考意见。只好自己搞了。
我仔细看了下Z-blog的CSS文件，找到post-body那一段，部分代码如下：
div.post div.post-body{/*日志内容区*/margin:0;padding:10px 5px 10px 5px;font-size:14px;word-break:break-all;text-align:left;line-height:180%;overflow:hidden;}

首先，我是这把网上找的代码加到这后面，但是没有效果。可能是调用的时候定义问题，于是，单独把代码命名为“FB”，然后找到日志页源代码，把div class的定义由以前的post-body改为“div class=post-body fb”，以为同时调用两个定义就可以，结果当然失败了。这就是没学CSS的下场啊。
后来，终于找到一段新的代码，如下：
.post-body p:first-letter {font-size : 300%;font-weight : bold;color : #FF0C58;float : left;margin-right: 3px;}

把它直接放到post-body后面，这样，调用post-body时自然就读取了后面首字下沉效果代码。
有个小问题就是，这个效果读取的是”p”标记，即当日志源代码里出现一个

标记，那么这段文字第一个字符就会“下沉”，如果一篇日志有多个P标记，会造成多个下沉字符效果，不太美观。建议发表日志时检查下源代码，把P代码删掉，换成<br/>这个换行代码。

本页面PR为: 0

本文地址：http://www.wysls.com/2007/02/09/zblog-css.html

Trackback地址：http://www.wysls.com/2007/02/09/zblog-css.html/trackback

某年的今天，我还写了：

• 2008年： 这姑娘长得挺好看的
• 2008年： 最好的新年礼物

随机文章

必须跨过这道坎

旁听一件网络影视作品侵权案件

看图说话

干了这么多天 终于湿了

重医的英语讲座