Chinaunix首页 | 论坛 | 博客
  • 博客访问: 189284
  • 博文数量: 62
  • 博客积分: 1477
  • 博客等级: 上尉
  • 技术积分: 475
  • 用 户 组: 普通用户
  • 注册时间: 2012-07-11 14:28
文章分类

全部博文(62)

文章存档

2012年(62)

我的朋友

分类: 系统运维

2012-07-13 11:00:42

meter标签:
此标签与标签差不多,它主要表现规定范围内的数量值,例如磁盘的食用量,对某个候选者人数占总投票人数的比例值等,如下图:
W3Cfuns.com - HTML5每日一练之meter标签的应用




meter有六个属性:
属性名称 描述
value在元素中表现出来的实际数量值。该属性缺省值为0,可以给该属性指定浮点数小数值。
min指定规定范围时允许使用的最小值,该属性缺省值为0,设置最小值时,值不可小雨0。
max指定规定范围时允许使用的最大值,如果设定该属性值小于min属性的值,那么浏览器会把min设置为最大值。max属性缺省值为1。
low规定范围的下限值,必须小于或等于high属性的值。同样的,如果low属性值小于min属性值,那么浏览器把min属性的值视为low属性的值。
high规定范围的上限值,如果该属性值小于low属性值,那么把low属性值视为high属性值,同样的,如果该属性值大于max属性值,那么把max属性值视为high属性的值。
optimum设置最佳值,属性值必须在min属性值与max属性值之间,可以大于high属性值。





案例:

点击(此处)折叠或打开

  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.         <title>HTML5每日一练meter标签的应用</title>
  6.     </head>
  7.    
  8.     <body>
  9.         <h1>W3Cfuns-HTML5每日一练meter标签的应用</h1>
  10.         <p>空间剩余大小:<meter min="0" max="1024" value="600">600/1024</meter>600/1024 GB</p>
  11.         <p>您的得分是:<meter min="0" max="100" low="60" high="90" optimum="100" value="91">91分</meter>91分</p>
  12.     </body>
  13. </html>




给meter定义样式并通过JS来控制显示的案例:
附件下载: (1.65 KB, 下载次数: 130)
阅读(1702) | 评论(0) | 转发(1) |
给主人留下些什么吧!~~