CSS 信息框

信息框在网站开发中比较常用，它可以用来引起网站访问者的注意；并且用来转递某种信息。例如Google的个性化主页iGoogle，有时会有一个信息框停靠在页面上方的中部，用来提示用户他们新增了一些功能。信息根据其传递内容的不同大致可以分为3种:

• 1. 成功提示 (success) - 通常用绿色来表示
• 2. 错误提示 (error) - 通常用红色来表示
• 3. 通知提示 (notice) - 通常用黄色来表示

哈哈，是不是和交通灯很相似啊。这里要介绍的两套CSS/HTML信息框，或许它们可以用在你的Project里。

一. 横条型 演示

HTML 代码：

<div class="message notice">
  <div class="msg_head_img">
    <a class="close" href="#"><img src="/images/close.gif" border="0"/></a>
  </div>  
  通知提示信息<!--请用实际信息替代-->
</div>
<br />
<div class="message success">
  <div class="msg_head_img">
    <a class="close" href="#"><img src="/images/close.gif" border="0"/></a>
  </div>
  成功提示信息
</div>
<br />
<div class="message error">
  <div class="msg_head_img">
    <a class="close" href="#"><img src="/images/close.gif" border="0"/></a>
  </div>
  错误提示信息
</div>

上面的三段HTML代码分别用于显示通知、成功、错误信息。主要的CSS样式有：message、notice、sucess、error。message是共用的，其它三种分别代表不同的信息类型。具体样式表如下：

.message {
  padding: 5px;
  border: 2px solid #ddd;
  background-color: #eee;
  color: #222;
  font-size:12px;
}
.notice {
  background: #FFF6BF;
  color: #817134;
  border-color: #FFD324;
}
.success {
  background: #E6EFC2;
  color: #529214;
  border-color: #C6D880;
}
 
.error {
  background: #FBE3E4;
  color: #D12F19;
  border-color: #FBC2C4;
}

二. 框框型 演示

HTML 代码：

<div class="msg_h yellow1">
  <div class="msg_head_img">
  <a class="close" href="#"><img src="/images/close.gif" border="0"/></a>
  </div>
   <div class="msg_head_txt yellow2" >
      信息标题
  </div>
  <div class="msg_body">
     通知提示信息
  </div>
</div>
<br />
<div class="msg_h green1">
  <div class="msg_head_img">
  <a class="close " href="#"><img src="/images/close.gif" border="0"/></a> 
</div>
   <div class="msg_head_txt green2" >
      信息标题
  </div>
  <div class="msg_body">
     成功提示信息
  </div>
</div>
<br />
<div class="msg_h red1">
  <div class="msg_head_img">
  <a class="close " href="#"><img src="/images/close.gif" border="0"/></a> 
  </div>
   <div class="msg_head_txt red2" >
      信息标题
  </div>
  <div class="msg_body">
     错误提示信息
  </div>
</div>

和第一套CSS信息框不同的是，这一套包含有标题栏。CSS样式同样包含有共用的class和各自的class，具体如下：

.msg_h{border:2px solid; height:auto; width:300px;}
.msg_head_img{float:right; display:inline; padding-top:3px;}
.msg_head_txt{padding:5px; font-size:12px; font-weight:normal;}
.msg_body{padding:10px;}
.yellow1{border-color: #FFD324;}
.yellow2{background:#FFD324; color:#817134;}
.green1{border-color: #C6D880;}
.green2{background:#C6D880; color:#529214;}
.red1{border-color: #FBC2C4;}
.red2{background:#FBC2C4; color:#D12F19;}

你可能注意到在这两套CSS信息框里都用到了以下HTML代码：

<div class="msg_head_img">
  <a class="close" href="#"><img src="/images/close.gif" border="0"/></a>
</div>

这段HTML代码提供了一个可点击的图标，目的是让用户可以自由地关闭信息框。其实这可以根据实际情况改变，如果你想让信息框一直显示，那么你可以把<a>元素去掉，另外还可以换上其它小图标用于装饰。如果你想提供关闭信息框的功能，那么只要使用下面的jQuery语句就可以轻松实现：

<script type="text/javascript">
  $(document).ready(function(){
    $(".close").click(function(){
      $(this).parent().parent().fadeOut('slow');
    });
  });
</script>

演示和代码