大图标提示框代码，短代码实现！-worpress教程

之前介绍过：传送门
这次带来的是另一种风格，暂称为大图标提示框。

效果：

1.素材

使用方法：将图标上传至你的主题的images目录下，请到此下载：传送门
链接失效请回复

代码

/*大图标提示框  */
.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代码

直接插入文章！

<div class="shortbox boxattention">attention </div>  
<div class="shortbox boxattention">attention </div>  
 <div class="shortbox boxbag">bag </div>  
 <div class="shortbox boxbonus">bonus </div>  
 <div class="shortbox boxcalendar">calendar </div>  
 <div class="shortbox boxcheck">check </div>  
 <div class="shortbox boxdelete">delete </div>  
 <div class="shortbox boxedit">edit </div>  
 <div class="shortbox boxflag">flag </div>  
 <div class="shortbox boxhelp">help </div>  
 <div class="shortbox boxinformation">information </div>  
 <div class="shortbox boxlove">love </div>  
 <div class="shortbox boxtag">tag </div>

喜欢 (3)赏

[]

分享 (0)