演示效果截圖

用到的圖片

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>

總結

以上是生活随笔為你收集整理的使用CSS打造很有亲和力的各种web2.0操作提示效果 使用CSS打造很有亲和力的各种web2.0操作提示效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。