首页 - 文章 - (X)HTML/CSS - (X)HTML/CSS小技巧

用 CSS 修饰你的提示信息

作者: CodeBit     来源: CodeBit.cn     时间: 2007-05-14 08:29:00
摘要: 本文所指的“提示信息”并非 Javascript 中的 alert()，而是直接放在页面中的想要引起访问者关注的区域，比如在注册页面我们会在表单上方放置一条提示：“为了能够更好的给您提供服务，请详细填写您的个人信息！”。在重视用户体验的今天，我们也要让这些提示信息更加准确、快速、形象的传递给用户。
归类: (X)HTML/CSS,

关键词: CSS, 信息, 提示,


本文所指的“提示信息”并非 Javascript 中的 alert()，而是直接放在页面中的想要引起访问者关注的区域，比如在注册页面我们会在表单上方放置一条提示：“为了能够更好的给您提供服务，请详细填写您的个人信息！”。在重视用户体验的今天，我们也要让这些提示信息更加准确、快速、形象的传递给用户。


--------------------------------------------------------------
点此浏览示例文件
--------------------------------------------------------------


我们可以先创建一个上下边框为 2 象素的 DIV ，因为我们要用到一个16象素的小图标，所以我们加上 padding：
CSS:
  1.  
  2. <style type="text/css"> 
  3. div.alertMessage { 
  4.     border-top:2px solid; 
  5.     border-bottom:2px solid; 
  6.     padding:5px 15px 5px 45px; 
  7.     text-align:left; 
  8. } 
  9. </style> 
  10.  



为了让用户更加容易的区分出提示信息的性质，我们可以分别给不同的信息创建不同的样式，比如警告信息我们可以将颜色设置为黄色，然后再加上一个象征警告的小图标：
CSS:
  1.  
  2. <style type="text/css"> 
  3. div.exclamation { 
  4.     background:#FFF7C0 url('exclamation.gif') no-repeat 15px center; 
  5.     border-color:#FED626; 
  6. } 
  7. </style> 
  8.  



按照这样的方法我们还可以创建很多其他的信息提示样式：
CSS:
  1.  
  2. <style type="text/css"> 
  3. div.information { 
  4.     background:#F8FAFC url('information.gif') no-repeat 15px center; 
  5.     border-color:#B5D4FE; 
  6. } 
  7. </style> 
  8.  



这篇文章基于 
http://www.bioneural.net/2006/04/01/create-a-valid-css-alert-message/  （英文）

本文将公共部分独立，通过修改两个属性来实现更多效果。


相关文章
发表评论 有想法？点此发表评论？
推荐链接：(联系 QQ ：326801485)