通知框

dabblet.css

@import url(http://img3.douban.com/css/packed_douban4234332340.css);

/* 通知框 */
.notification-popup { position:absolute;width:290px;top:100px;left:50%;background:#fff;border:1px solid #aaa; }
.notification-popup .ft { text-align:center;background:#fafafa;line-height:36px; } 
.notification-popup li, 
.notification-popup .content { overflow:hidden;zoom:1; } 
.notification-popup .pic { float:left;margin-right:10px; } 
.notification-popup li { padding:12px 10px;color:#999;border-bottom:1px solid #aaa; } 
.notification-popup .opts { float:right; } 
.notification-popup .opts a:link,
.notification-popup .opts a:visited { color:#ccc; }
.notification-popup .opts a:hover,
.notification-popup .opts a:active { background-color:#ccc;color:#fff; }

.notification-popup .hd { 
  position: absolute;
  top: -6px;
  top: -8px\9;
  left: 50%;
  margin-left: 5px;
  background: #fff;
  width: 10px;
  height: 10px;
  overflow: hidden;
  line-height: 10em;
  border-left: 1px solid #aaa;
  border-top: 1px solid #aaa;
  zoom: 1;

  -webkit-transform: rotate(45deg);  
     -moz-transform: rotate(45deg);  
     /* -ms-transform: rotate(45deg);  ie9渲染有问题*/
       -o-transform: rotate(45deg);  
          transform: rotate(45deg); 
             /* ie7 filter后面的rules失效, 应该是引号造成的所以应该加转义 */ 
             filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.707, M12=-0.707, M21=0.707, M22=0.707, sizingMethod=\'auto expand\');
}

dabblet.html

<div class="notification-popup">
<div class="hd">通知</div>
<div class="bd">
  <ul>
    <li>
    <div class="pic">
      <a href=""><img width="30" height="30" src="http://img3.douban.com/icon/u1170308-29.jpg"></a>
    </div>
    <div class="content">
      推荐<a href="">21点37</a>有了1条新回复 
    </div>
    <div class="opts">
    <a class="lnk-close" href="">不在提醒</a>
    </div>
    </li>
    <li>
    <div class="pic">
      <a href=""><img width="30" height="30" src="http://img3.douban.com/icon/u1170308-29.jpg"></a>
    </div>
    <div class="content">
      推荐<a href="">21点37</a>有了1条新回复 
    </div>
    </li>
  </ul>
</div>
<div class="ft">
  <a href="">查看全部提醒（888未读）</a>
</div>
</div>

settings.json

{"view":"split","prefixfree":"1","page":"css"}