免费模板网
当前位置: 首页>CSS代码> 使用CSS打造很有亲和力的各种web2.0操作提示效果

CSS代码

使用CSS打造很有亲和力的各种web2.0操作提示效果

分类:CSS代码 时间:2009/7/21 16:18:22 浏览:12356 次

演示效果截图

使用CSS打造很有亲和力的各种web2.0操作提示效果

用到的图片


CSS代码

<style type="text/css">
body{
font-family:Arial, Helvetica, sans-serif; 
font-size:13px;
}
.info, .success, .warning, .error, .validation {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('info.png');
}
.success {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('success.png');
}
.warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('warning.png');
}
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url('error.png');
}
</style>

HTML代码

<div class="info">提示信息 www.865171.cn</div>
<div class="success">操作成功 www.865171.cn</div>
<div class="warning">警告信息 www.865171.cn</div>
<div class="error">错误信息 www.865171.cn</div>

上一篇:7种漂亮的CSS按钮

下一篇:纯CSS实现似开心网头部下拉导航效果

站长常用工具

最新代码

热门代码

赞助商链接