自定义HTML5 Progress的样式的图文代码详解


本文摘自PHP中文网,作者黄舟,侵删。

Progress 元素是 HTML5 标准草案中新增的元素之一,W3C 关于此元素的定义请猛击这里。默认情况下,Progress 会生成一个和系统默认样式一样的进度条。Webkit 中对于 Progress 的默认样式定义在这里可以找到。在 Windows 7 和 MaxOS Lion 中的显示效果如下:

看起来貌似还不错,但是如果运行在 Windows XP 下呢?想一下就够头疼了,何况出于一致性的考虑,很多情况下我们还是想能够控制这个进度条的样式。

查看了 Webkit 项目中关于 Element Progress 的定义,Progress 在渲染时会被解析成以下结构:

1

2

3

<progress>

    ┗ <p> ::-webkit-progress-bar

         ┗ <p>::-webkit-progress-value

通过 ::-webkit-progress-bar 和 ::-webkit-progress-value 两个伪元素选择符(之前伪元素的名称是 ::-webkit-progress-bar-value,今年上半年的某个 Patch 改成了现在这样,这里可以看到 Chromium 中一个相关的 Issue),可以定义第一层和第二层的两个 p 的样式。

示例:

阅读剩余部分

相关阅读 >>

用js+HTML5实现的小游戏-- 捕鱼达人游戏

h5之scrollintoview用法详解

HTML5元素拖拽drag与拖放drop相关api的具体介绍(图文)

使用HTML5可以干什么?HTML5的优势和劣势(总结)

css3如何实现元素环绕中心点布局(代码示例)

HTML5实现一个简单的在线画板

移动端中touch事件的详解

HTML5 video视频字幕的使用和制作方法

HTML5互联网:地铁行业新模式

HTML5 menu标签的具体定义和HTML5menu标签的用法详细解析

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...