<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style>
body {
font-size: 12px;
}
.ProgressBar {
position: relative;
width: 200px; /* 宽度 */
border: 1px solid #B1D632;
padding: 1px;
}
.ProgressBar div {
display: block;
position: relative;
background: #B1D632;
color: #333333;
height: 20px; /* 高度 */
line-height: 20px; /* 必须和高度一致,文本才能垂直居中 */
}
.ProgressBar div span {
position: absolute;
width: 200px; /* 宽度 */
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<table width="100%" border="1">
<tr>
<td>1</td>
<td>盛大的萨阿桑</td>
<td>进度</td>
<td>fdfdfds</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>
<div class="ProgressBar">
<div style="width: 50%;"><span>50%</span></div>
</div>
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>
<div class="ProgressBar">
<div style="width: 80%;"><span>80%</span></div>
</div>
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>
<div class="ProgressBar">
<div style="width: 10%;"><span>10%</span></div>
</div>
</td>
<td> </td>
</tr>
</table>
</body>
</html>
- 大小: 1.3 KB
分享到:
相关推荐
这个示例采用了结构性伪类选择符E:nth-child(n),来进行对HTML元素的选择以及...相信这个伪类选择符在将来会是一个很强大的一个工具。 动态css进度条代码效果图一: 点击查看演示 动态css进度条代码效果图二:
不可思议的纯 CSS 进度条效果(页面顶部进度条随着页面的滚动进度而变化长短)
css动态的进度条,今天刚封装的!
使用svg模式制作的Css进度条
今天我们要分享9款极具创意的HTML5/CSS3进度条动画,这些进度条也许可以帮你增强用户交互和提高用户...之前我们介绍过几款具有各种动画效果的CSS3进度条,我们可以在CSS3进度条栏目中查看演示和下载[......] 阅读全文>>
简单的js+css进度条,代码简单,供初学者查看!
一个javaweb资源,使用div+css完美解决进度条,后天传输list,jsp就能生成进度条。
主要介绍了css 进度条的文字根据进度渐变的示例代码,介绍了进度条里面的文字需要根据进度的长度而变化,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
这是一款纯CSS3时尚进度条UI设计效果。给进度条使用bootstrap网格进行布局,通过简单的CSS代码和animation动画来制作带动画效果的进度条。
这个示例采用了结构性伪类选择符E:nth-child(n),来进行对HTML元素的选择以及控制输出。相信这个伪类选择符在将来会是一个很强大的一个工具。 动态css进度条代码效果图一: 点击查看演示
在网页上很多地方会用到进度条,本实例是一个用css实现的进度条。但由于技术有限,只能做到这样,如果加上js就能实现真正的实时进度了。
原生js+css写的进度条,js交互性比较强
CSS步骤条,进度条,纯css,挺舒服的,可惜不能传图片
这是一款用CSS实现的进度条效果,各种颜色彰显时尚。
这是一款css3炫酷进度条动画特效。高css3炫酷进度条动画在原生bootstrap进度条的基础上,通过少量的CSS3代码,将进度条美化为箭头样式,并制作动画效果。
js+css编写进度条的实例,样式可以自己修改
超炫酷的CSS3进度条动画 背景色渐变
CSS3 彩色进度条加载动画 带进度百分比
这次我们要来分享一款CSS3进度条动画,这款进度条是垂直放置的,在进度加载的时候,进度条的背景会出现一个快速移动的箭头动画,并且随着进度条的移动,数字百分比也将随着进度实时更新,直至进度完成,完成后进度条...