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

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

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

现在说说具体方法,

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

热门文章

随机推荐

卓越新书

Top

Powered By Z-Blog 1.8 Walle Build 100427

© 2007-2011 zfnn.com. 皖ICP备07503469号