荆棘鸟's Blog

There is a legend about a bird which sings just once in its life ...

推荐两款Flash反编译软件 »« 看看现在几点了

仿“毅博客”的“源码示例”效果

一直很心仪“毅博客”那种“源码示例”的效果,看上去整个页面整齐规范、有一种专业的感觉。经过反复研究,参考“毅博客”源码,再加上小毅指点,采用手工编辑“源代码”的方法,终于实现了这种效果。

具体效果请看,“一些网摘代码的收集 ”。

现在说说具体方法,

1、拿下面这段代码为例,首页在文章中贴出代码,其原始样式如下:

div.post-body div.code{
 margin:20px;
 padding:10px;
 background-color:#F6FCF0;
 border:1px solid #EEEEEE;
 border-left:8px;
 color:#6488AA;
}

2、接下来,选中这段代码,应用编辑器里的“格式”列表框中的段落(DIV),给这段源码外面加上DIV。如果你的“z-blog”用的不是FCKeditor编辑器,请手工编辑文章的html代码,加上DIV。

3、然后点击文章编辑器的“源代码”按钮,给这段DIV加上样式code,<div class="code"> 

4、给code,写样式表,编辑样式表文件,我这里是stlye目录下的green.css,添加蓝色部分的代码,注意CSS名称是大小敏感的,我就是没注意到这点,反复调试,没有效果。

保存后,索引重建,文件重建。刷新一下博客,看到没有,最终就得到下面这样效果。

 div.post-body div.code{
 margin:20px;
 padding:10px;
 background-color:#F6FCF0;
 border:1px solid #EEEEEE;
 border-left:8px;
 color:#6488AA;
}

我的这种样式,是通过DIV加code样式,分析一下“毅博客”,它有的几种样式,有加Pre、DD、OL的。也就是通过不同代码,应用于不同场合。你也可以根据你的喜好,做出你的“源码示例”效果。你也可以根据你的喜好,做出你的“源码示例”样式。

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

帮助他人 - 快乐自己

Search

最新评论及回复

订阅我的博客

  • 订阅荆棘鸟的  RSS 2.0 新闻聚合

图标汇集

Powered By Z-Blog 1.8 Spirit Build 80710

Auto Publisher © 2007-2008 zfnn.com. 版权所有 皖ICP备07503469号