WordPress美化:12款提示框美化代码,可用作短代码实现!

微饭网官方微信

微饭前面也介绍过:WordPress美化:短代码实现提示框功能 ,这次带来的是另一种风格,暂称为大图标提示框,可以参照前面的文章添加到短代码。

短代码提示框

代码演示

attention WordPress多彩提示框美化演示 微Fan'天空 Www.Weeiy.Com
bag WordPress多彩提示框美化演示 微Fan'天空 Www.Weeiy.Com
bonus WordPress多彩提示框美化演示 微Fan'天空 Www.Weeiy.Com
calendar WordPress多彩提示框美化演示 微Fan'天空 Www.Weeiy.Com
check WordPress多彩提示框美化演示 微Fan'天空 Www.Weeiy.Com
delete WordPress多彩提示框美化演示 微Fan'天空 Www.Weeiy.Com
edit WordPress多彩提示框美化演示 微Fan'天空 Www.Weeiy.Com
flag WordPress多彩提示框美化演示 微Fan'天空 Www.Weeiy.Com
help WordPress多彩提示框美化演示 微Fan'天空 Www.Weeiy.Com
information WordPress多彩提示框美化演示 微Fan'天空 Www.Weeiy.Com
love WordPress多彩提示框美化演示 微Fan'天空 Www.Weeiy.Com
tag WordPress多彩提示框美化演示 微Fan'天空 Www.Weeiy.Com

图片素材

使用方法:将图标上传至你的主题的images目录下,请到此下载:http://pan.baidu.com/s/1hqINoag

CSS代码

/* WordPress多彩提示框美化 微Fan'天空 Www.Weeiy.Com */
.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;
}

 

 HTML代码

 

/* WordPress多彩提示框美化 微Fan'天空 Www.Weeiy.Com */  

<div class="shortbox boxattention">attention WordPress多彩提示框美化 微Fan'天空 Www.Weeiy.Com</div>  

<div class="shortbox boxbag">bag WordPress多彩提示框美化 微Fan'天空 Www.Weeiy.Com</div>  

<div class="shortbox boxbonus">bonus WordPress多彩提示框美化 微Fan'天空 Www.Weeiy.Com</div>  

<div class="shortbox boxcalendar">calendar WordPress多彩提示框美化 微Fan'天空 Www.Weeiy.Com</div>  

<div class="shortbox boxcheck">check WordPress多彩提示框美化 微Fan'天空 Www.Weeiy.Com</div>  

<div class="shortbox boxdelete">delete WordPress多彩提示框美化 微Fan'天空 Www.Weeiy.Com</div>  

<div class="shortbox boxedit">edit WordPress多彩提示框美化 微Fan'天空 Www.Weeiy.Com</div>  

<div class="shortbox boxflag">flag WordPress多彩提示框美化 微Fan'天空 Www.Weeiy.Com</div>  

<div class="shortbox boxhelp">help WordPress多彩提示框美化 微Fan'天空 Www.Weeiy.Com</div>  

<div class="shortbox boxinformation">information WordPress多彩提示框美化 微Fan'天空 Www.Weeiy.Com</div>  

<div class="shortbox boxlove">love WordPress多彩提示框美化 微Fan'天空 Www.Weeiy.Com</div>  

<div class="shortbox boxtag">tag WordPress多彩提示框美化 微Fan'天空 Www.Weeiy.Com</div>

 

发表评论
加载中...

相关文章