使用CSS打造很有亲和力的各种web2.0操作提示效果 使用CSS打造很有亲和力的各种web2.0操作提示效果
生活随笔
收集整理的這篇文章主要介紹了
使用CSS打造很有亲和力的各种web2.0操作提示效果 使用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>總結
以上是生活随笔為你收集整理的使用CSS打造很有亲和力的各种web2.0操作提示效果 使用CSS打造很有亲和力的各种web2.0操作提示效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 建站用Windows还是Linux,建站
- 下一篇： CSS3中的元素过渡属性transiti