信息框在网站开发中比较常用，它可以用来引起网站访问者的注意；并且用来转递某种信息。例如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>
演示和代码 标签： CSS, HTML, Jquery
