• 作者:SuperPaxxs扶摇直上九万里,绝云气,负青天,不知图哪了,正在努力搜索中..
    • 请在Chrome、Firefox等现代浏览器浏览本站。 有事 点击这里 联系博主
    • 想在魔帆博客投稿? 点击这里 联系博主
    • [ 既然来了就多看两篇文章嘛,你好意思走么? ]
    • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏魔帆博客吧

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

目录
[隐藏]

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

效果:

大图标提示框代码,短代码实现!-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>

魔帆博客 , 版权所有丨如未注明 , 均为原创丨本网站均采用BY-NC-SA协议进行授权 , 转载请注明大图标提示框代码,短代码实现!-worpress教程
喜欢 (3)
[]
分享 (0)
Super Paxxs
关于作者:
一只初中狗,对网站建设和编程非常感兴趣。
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
×
订阅图标按钮