纯css的标签背景

分类：Html_Css| 发布：camnprbubuol| 查看：882 | 发表时间：2013/4/24

兼容IE7+、Chrome、FireFox！

例子截图：

HTML代码如下：

01<div class="span8">
02     <div class="event-status-tips event-status-1">
03         <div class="event-status">
04             <div class="event-status-text"><span class="upcoming"> 即将举行 </span></div>
05             <div class="event-status-pointer top"> </div>
06             <div class="event-status-pointer bottom"> </div></div>
07         <div class="event-status-ribbon"> </div></div></div>
08 
09 <div class="span8">
10     <div class="event-status-tips event-status-3">
11         <div class="event-status">
12             <div class="event-status-text"><span class="doing"> 正在举行 </span></div>
13             <div class="event-status-pointer top"> </div>
14             <div class="event-status-pointer bottom"> </div></div>
15         <div class="event-status-ribbon"> </div></div></div>
16 
17 <div class="span8">
18     <div class="event-status-tips event-status-2">
19         <div class="event-status">
20             <div class="event-status-text"><span class="past"> 已经举行 </span></div>
21             <div class="event-status-pointer top"> </div>
22             <div class="event-status-pointer bottom"> </div></div>
23         <div class="event-status-ribbon"> </div></div></div>

CSS代码如下：

span8 { width:580px;border-right: 1px solid #DDD;background-color:#FFFFFF;-moz-border-radius: 4px 0px 0px 4px;
02-webkit-border-radius: 4px 0px 0px 4px;border-radius: 4px 0px 0px 4px;float:left;clear:both;margin-bottom:10px;min-height:120px }
event-status-tips { width:100%;height:50px;position:relative }
event-status { position: absolute;color:#FFFFFF;top:16px;left:-6px }
event-status-text { font-size: 14px;line-height: 20px;height: 20px;padding: 5px 15px 5px 17px;color: #ffffff!important;background: #88CBFB;}.event-status-pointer { width: 0;height: 0;border-left: 16px solid #ad0000;border-right: 0 none;position: absolute;right: -14px;border-left-color: #88CBFB; }
06 
event-status-pointer.top { border-top: 0 solid transparent;border-bottom: 16px solid transparent;top: 0; }
event-status-pointer.bottom { border-top: 16px solid transparent;border-bottom: 0 solid transparent;bottom: 0; }
event-status-ribbon { width: 0;height: 0;border-left: 0;border-right: 5px solid #3e0012;border-top: 0;border-bottom: 5px solid transparent;border-right-color: #5E8CAD;position:absolute;bottom:0px;left:-6px}
10 
event-status-tips.event-status-3 .event-status-text { background:#F2710E }
event-status-tips.event-status-3 .event-status-pointer.top { border-left-color:#F2710E }
event-status-tips.event-status-3 .event-status-pointer.bottom { border-left-color:#F2710E }
event-status-tips.event-status-3 .event-status-ribbon { border-right-color:#b9560a }
event-status-tips.event-status-2 .event-status-text { background:#cccccc }
event-status-tips.event-status-2 .event-status-pointer.top { border-left-color:#cccccc}
event-status-tips.event-status-2 .event-status-pointer.bottom { border-left-color:#cccccc }
event-status-tips.event-status-2 .event-status-ribbon { border-right-color:#8a8a8a }
event-status-tips.event-status-1 .event-status-text { background:#69B93B }
event-status-tips.event-status-1 .event-status-pointer.top { border-left-color:#69B93B }
event-status-tips.event-status-1 .event-status-pointer.bottom { border-left-color:#69B93B }
event-status-tips.event-status-1 .event-status-ribbon { border-right-color:#3b8113 }

365据说看到好文章不转的人，服务器容易宕机！

标签：CSS

原创文章如转载，请注明：转载自郑州网建-前端开发　http://camnpr.com/
本文链接：http://camnpr.com/archives/633.html

纯css的标签背景

相关文章

关注本站

一条新消息

小编推荐

热门文章

想你所想爱你所爱

纯css的标签背景

相关文章

关注本站

一条新消息

小编推荐

热门文章

想你所想 爱你所爱

想你所想爱你所爱