引用、代码、可运行代码框样式演示

Saturday, July 04, 2009 吉光片羽 1

引用、代码、可运行代码框样式演示@吉光片羽一直用着PJBlog,比较满意的是它的UBB框,特别是可运行的HTML框。现在用着ZBlog,没有这些功能,或者说表现不完善,总觉得不满。很有冲动要把PJ的移植过来,具体的修改制作方法会在后期写出来,这里只做一个演示。

值得一提的是,我的灵机一现,让CODE代码能像代码表一样显示内容。这个也是在看到EVIO同学的博客里的代码框有这个功能,才冲动的做的。不知道他是怎么实现的,但有JQuery,我什么都不怕!

这里是一个简单型引用框:
值得一提的是,我的灵机一现,让CODE代码能像代码表一样显示内容。这个也是在看到EVIO同学的博客里的代码框有这个功能,才冲动的做的。不知道他是怎么实现的,但有JQuery,我什么都不怕!

这里是一个引自型引用框:
引自 吉光片羽说的
一直用着PJBlog,比较满意的是它的UBB框,特别是可运行的HTML框。现在用着ZBlog,没有这些功能,或者说表现不完善,总觉得不满。很有冲动要把PJ的移植过来,具体的修改制作方法会在后期写出来,这里只做一个演示。

这里是一个简单代码片段框:

objRegExp.Pattern="(\[CODE\](<br\/>)?)(.+?)(\[\/CODE\])"
      strContent=objRegExp.Replace(strContent,"<div class=""code""><code>$3</code></div>")


这里是一个带类型标题的代码片段框:
CSS样式表
*{
  font-size:12px;
}

body{
  margin:0;
  padding:0;
  color: #000000;
  font-size:12px;
  background:#FFFFFF;
  font-family:"宋体","黑体";
}
h1,h2,h3,h4,h5,h6{
  font-size:18px;
  padding:0;
  margin:0;
}

这里是一个可执行代码框:
HTML :\ Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行 运行此代码

演示完毕,请大家多多指教,以进一步完善!

点击这里获取该日志的TrackBack引用地址

日志标签: 原创  css  xhtml  演示  

已有人对此文发表了评论

  1. 引用该评论 深蓝 4/10/2011 1:44:13 AM 回复
    请问实现方法呢?我没有网页编程基础,不太会!求详细方法。

发表评论:

邮箱网址为选填;若您注册了GRAVATAR,请填写邮箱(不会公开),否则最好不填,您可在提交评论前选择表情头像;点击他人头像可引用其评论。插入UBB

About me

Name: KandyTang
Age: 20+
Location: Guilin, China
QQ: 121885959
Email: KandyT@qq.com

My Works

中文酷博聚合 汽车手绘·视频·教程 史努比(中文)网 免费的PJBlog皮肤 淘宝创意导购 桂林{摄影}品牌

Gallery

Unnamed Album

Unnam... (4)

复线文字LOGO设计

复线文字L... (10)

订书钉的创意-微型城市

订书钉的创... (4)

2010元宵烟火

2010元宵烟火 (7)

国外贺卡设计欣赏

国外贺卡设计欣赏 (20)