MorFans Dev
折腾 - 开发 - 分享

大图标提示框代码,短代码实现!-worpress教程

大图标提示框代码,短代码实现!-worpress教程

之前介绍过:[lhb href=’https://morfans.cn/archives/427′]传送门[/lhb]
这次带来的是另一种风格,暂称为大图标提示框。

效果:

sshot-61

1.素材

使用方法:将图标上传至你的主题的images目录下,请到此下载:[lhb href=’http://pan.baidu.com/s/1o63lZFc’]传送门[/lhb]
链接失效请回复

代码

/*大图标提示框  */
.shortbox{
    margin:20px;
    padding:15px 15px 15px 70px;
    box-shadow:0 1px 2px rgba(0,0,0,0.1);
    font-size:12px;
}
.boxattention{
    border:1px solid #FFDEAD;
    background:url( "images/attention.png ") no-repeat scroll 20px center #FFEFD5;
    color:#FF7F50;
}
.boxbag{
    border:1px solid #B0E0E6;
    background:url( "images/bag.png ") no-repeat scroll 20px center #E0EEE0;
    color:#3370CC
}
.boxcalendar {
    border:1px solid #ddd;
    background:url( "images/calendar.png ") no-repeat scroll 20px center #EFEFEF;
    color:#999;
}
.boxbonus {
    border:1px solid #EBA8A8;
    background:url( "images/bonus.png ") no-repeat scroll 20px center #FADCD8;
    color:#CC6666;
}
.boxdelete {
    border:1px solid #EBA8A8;
    background:url( "images/delete.png ") no-repeat scroll 20px center #FADCD8;
    color:#CC6666;
}
.boxlove {
    border:1px solid #EBA8A8;
    background:url( "images/love.png ") no-repeat scroll 20px center #FADCD8;
    color:#CC6666;
}
.boxcheck {
    border:1px solid #AFC76C;
    background:url( "images/check.png ") no-repeat scroll 20px center #EFF4D4;
    color:#779B39;
}
.boxflag {
    border:1px solid #AFC76C;
    background:url( "images/flag.png ") no-repeat scroll 20px center #EFF4D4;
    color:#779B39;
}
.boxtag {
    border:1px solid #AFC76C;
    background:url( "images/tag.png ") no-repeat scroll 20px center #EFF4D4;
    color:#779B39;
}
.boxhelp {
    border:1px solid #A4D3EE;
    background:url( "images/help.png ") no-repeat scroll 20px center #E0FFFF;
    color:#1E90FF;
}
.boxinformation {
    border:1px solid #A4D3EE;
    background:url( "images/information.png ") no-repeat scroll 20px center #E0FFFF;
    color:#1E90FF;
}
.boxedit {
    border:1px solid #EAC946;
    background:url( "images/edit.png ") no-repeat scroll 20px center #FFF0B5;
    color:#B09E56;
}

H代码

直接插入文章!

attention
attention
bag
bonus
calendar
check
delete
edit
flag
help
information
love
tag
赞赏
魔帆博客,版权所有 | 如未注明,均为原创
本站均采用 BY-NC-SA 协议进行授权。
转载请注明来自本站文章:大图标提示框代码,短代码实现!-worpress教程(https://www.morfans.cn/archives/444)

Super Paxxs

文章作者

一只初中狗,对网站建设和编程非常感兴趣。

发表评论

textsms
account_circle
email

大图标提示框代码,短代码实现!-worpress教程
之前介绍过:[lhb href='https://morfans.cn/archives/427']传送门[/lhb] 这次带来的是另一种风格,暂称为大图标提示框。 效果: 1.素材 使用方法:将图标上传至你的主题的images目…
扫描二维码继续阅读
2015-08-26