超酷网页 Message Box 样式集合

/* 小图标消息 */
.message {padding-bottom:5px;}
.message .style{padding:5px;border:solid 1px white;}
.message .ico{width:16px;height:16px;float:left;background:url(http://assets.taobaocdn.com/sys/common/img/msg_bg.png) no-repeat 0px 0px;margin-right:5px;}
.message .content{font-size:12px;padding-left:0px;}
.message .error{border-color:#FF9999;background:#FFF5FA;color:red;}
.message .error .ico{background-position:0px 0px;}
.message .no{border-color:#FF9999;background:#FFF5FA;color:red;}
.message .no .ico{background-position:0px -50px;}
.message .attention{border-color:#FFAA66;background:#FFF9ED;color:#FF6600;}
.message .attention .ico{background-position:0px -100px;}
.message .info{border-color:#9999FF;background:#F3FAFF;color:#3366CC;}
.message .info .ico{background-position:0px -150px;}
.message .tips{border-color:#FFAA66;background:#FFF9ED;color:#FF6600;}
.message .tips .ico{background-position:0px -200px;}
.message .ok{border-color:#9BDF70;background:#EEFFEE;color:#006F00;}
.message .ok .ico{background-position:0px -250px;}
.message .notice{border-color:#FFAA66;background:#FFF9ED;color:#FF6600;}
.message .notice .ico{background-position:0px -300px;}
.message .question{border-color:#FFAA66;background:#FFF9ED;color:#FF6600;}
.message .question .ico{background-position:0px -350px;}
.message .help{border-color:#9BDF70;background:#EEFFEE;color:#006F00;}
.message .help .ico{background-position:0px -1200px;}
/* 大图标消息 */
.xmessage {padding-bottom:5px;}
.xmessage .style{padding:5px;border:solid 1px white;}
.xmessage .ico{width:32px;height:32px;float:left;background:url(http://assets.taobaocdn.com/sys/common/img/msg_bg.png) no-repeat 0px 0px;margin-right:5px;}
.xmessage .content{font-size:30px;padding-left:0px;}
.xmessage .error{border-color:#FF9999;background:#FFF5FA;color:red;}
.xmessage .error .ico{background-position:0px -400px;}
.xmessage .info{border-color:#9999FF;background:#F3FAFF;color:#3366CC;}
.xmessage .info .ico{background-position:0px -500px;}
.xmessage .tips{border-color:#FFAA66;background:#FFF9ED;color:#FF6600;}
.xmessage .tips .ico{background-position:0px -700px;}
.xmessage .ok{border-color:#9BDF70;background:#EEFFEE;color:#006F00;}
.xmessage .ok .ico{background-position:0px -600px;}
.xmessage .question{border-color:#FFAA66;background:#FFF9ED;color:#FF6600;}
.xmessage .question .ico{background-position:0px -800px;}
/*小图标消息详情请点击样式*/
.message .error a:link, .message .error a:visited{color:red;text-decoration:underline;}
.message .error a:hover{color:#0066FF;}
.message .no a:link, .message .no a:visited{color:red;text-decoration:underline;}
.message .no a:hover{color:#0066FF;}
.message .ok a:link, .message .ok a:visited{color:#006F00;text-decoration:underline;}
.message .ok a:hover{color:red;}
.message .help a:link, .message .help a:visited{color:#006F00;text-decoration:underline;}
.message .help a:hover{color:red;}
.message .notice a:link, .message .notice a:visited{color:#FF6600;text-decoration:underline;}
.message .notice a:hover{color:red;}
.message .attention a:link, .message .attention a:visited{color:#FF6600;text-decoration:underline;}
.message .attention a:hover{color:red;}
.message .tips a:link, .message .tips a:visited{color:#FF6600;text-decoration:underline;}
.message .tips a:hover{color:red;}
.message .question a:link, .message .question a:visited{color:#FF6600;text-decoration:underline;}
.message .question a:hover{color:red;}
.message .info a:link, .message .info a:visited{color:#3366CC;text-decoration:underline;}
.message .info a:hover{color:red;}
/*大图标消息详情请点击样式*/
.xmessage .error a:link, .xmessage .error a:visited{color:red;text-decoration:underline;}
.xmessage .error a:hover{color:#0066FF;}
.xmessage .ok a:link, .xmessage .ok a:visited{color:#006F00;text-decoration:underline;}
.xmessage .ok a:hover{color:red;}
.xmessage .info a:link, .xmessage .info a:visited{color:#3366CC;text-decoration:underline;}
.xmessage .info a:hover{color:red;}
.xmessage .question a:link, .xmessage .question a:visited{color:#FF6600;text-decoration:underline;}
.xmessage .question a:hover{color:red;}
.xmessage .tips a:link, .xmessage .tips a:visited{color:#FF6600;text-decoration:underline;}
.xmessage .tips a:hover{color:red;}

小图标消息框样例：

该记录保存失败！ 详情请点击

该记录不能删除！ 详情请点击

今天是三月三的生日。 详情请点击

请按照要求填写。 详情请点击

友情提示：请认真阅读条款。 详情请点击

您的用户信息已修改成功。 详情请点击

您有新的消息 详情请点击

确定删除该记录吗？ 详情请点击

帮助 详情请点击 大图标消息框样例：

该记录保存失败！ 详情请点击

请按照要求填写。 详情请点击

友情提示：请认真阅读条款。 详情请点击

您的用户信息已修改成功。 详情请点击

帮助 详情请点击

点击下载