短代码分享

一直想要wordpress里的短代码,但是一直没有找到这方面的代码和素材,今天在EMLOG论坛里有个同学发了一个这样的贴子,我就试了下,还不错,就分享给大家用!

先看一下效果:

这里是测试,请在这里输入字—【提示信息】
这里是测试,请在这里输入字—【严重警告】
这里是测试,请在这里输入字—【推荐信息】
这里是测试,请在这里输入字—【显示信息】
这里是测试,请在这里输入字—【引用资料】

使用方法:把CSS文件放进模板里的CSS文件里,把图片素材放入模板默认images里

调用:直接在写文章里,调用下面字样;

灰色的短代码框,常用来引用资料什么的,调用代码为 <div class=”gray”>输入文字</div>

黄色的短代码框,常用来做提示,引起读者注意。<div class=”yellow”>输入文字</div>

红色的短代码框,用于严重警告什么的。调用代码为 <div class=”red”>输入文字</div>

浅蓝色的短代码框,用于显示一些信息。调用代码为 <div class=”blue”>输入文字</div>

绿色的短代码框,显示一些推荐信息。调用代码为 <div class=”green”>输入文字</div>


CSS代码:

/*短代码*/
.gray {margin:20px 0px;padding:15px 15px 15px 70px;font-size:12px;background:url(images/demo/checklist.png) no-repeat 20px 20px #f6f5f5;border:1px solid #cccccc;color:#555;border-radius:8px} 
.yellow {margin:20px 0px;padding:15px 15px 15px 70px;font-size:12px;background:url(images/demo/warning.png) no-repeat 20px 20px #fff9c6;border:1px solid #fbe951;color:#cba200;border-radius:8px}
.green {margin:20px 0px;padding:15px 15px 15px 70px;font-size:12px;background:url(images/demo/yes.png) no-repeat 20px 20px #EBF6E0;border:1px solid #b7ec82;color:#649505;border-radius:8px} 
.blue {margin:20px 0px;padding:15px 15px 15px 70px;font-size:12px;background:url(images/demo/info.png) no-repeat 20px 20px #c3e5ff;border:1px solid #8accff;color:#0d70bb;border-radius:8px} 
.red {margin:20px 0px;padding:15px 15px 15px 70px;font-size:12px;background:url(images/demo/noway.png) no-repeat 20px 20px #FFE9E9;border:1px solid #ffacac;color:#bd0000;border-radius:8px}
.blockquote {background:#f9f9f9;font-size:12px;border:1px solid #d6d6d6;border-left:4px solid #ccc;padding:0.5em 10px;} .pre{margin:15px auto;padding:0 15px;border:1px solid #d6d6d6;background:#fbfbfb url(images/prebg.png) repeat;white-space:pre-wrap;word-wrap:break-word;letter-spacing:0;font:12px/20px Arial,Microsoft JhengHei;line-height:19px;border-left-width:4px;color:#000} code{background-color:#F7F7F9;border:1px solid #d6d6d6;border-radius:4px;color:#DD1144;padding:2px 4px;font:12px Arial,Microsoft JhengHei;} .post-navigation{clear:both;overflow:hidden;margin-top:20px}


图片素材下载地址:http://yunpan.cn/QNbigpBz2hdCV  访问密码 abaa

短代码分享》有17个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注