`
bdk82924
  • 浏览: 570075 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

CSS进度条

    博客分类：
  • Web
 
阅读更多

 

 

<!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>&nbsp;</td>
    <td>&nbsp;</td>
    <td>
 <div class="ProgressBar">
     <div style="width: 50%;"><span>50%</span></div>
</div>

</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>
 <div class="ProgressBar">
     <div style="width: 80%;"><span>80%</span></div>
</div>
 </td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>
 <div class="ProgressBar">
     <div style="width: 10%;"><span>10%</span></div>
</div>
 
 </td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

  • 大小: 1.3 KB
分享到：
| 用Java实现按字节长度截取中英文数字字符串 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    动态css进度条代码（闪烁跳动的进度条）.zip

    这个示例采用了结构性伪类选择符E:nth-child(n)，来进行对HTML元素的选择以及...相信这个伪类选择符在将来会是一个很强大的一个工具。 动态css进度条代码效果图一： 点击查看演示   动态css进度条代码效果图二：

    不可思议的纯 CSS 进度条效果（页面顶部进度条随着页面的滚动进度而变化长短）

    不可思议的纯 CSS 进度条效果（页面顶部进度条随着页面的滚动进度而变化长短）

    div+css进度条完美解决方案

    总结一下，这个"div+css进度条完美解决方案"主要包括以下步骤： 1. 使用HTML的`div`元素构建进度条的基本结构。 2. 通过CSS定义进度条的样式，包括颜色、尺寸等。 3. Java后端（Servlet）处理数据，计算进度，并将...

    css自定义进度条源码-要创建一个自定义的CSS进度条，你可以使用HTML和CSS来实现 以下是一个简单的例子

    要创建一个自定义的CSS进度条，你可以使用HTML和CSS来实现。以下是一个简单的例子： HTML: ```html ;"&gt; ``` CSS: ```css .progress-container { width: 100%; background-color: #e0e0e0; border-radius: ...

    html+js+css进度条

    在本主题"html+js+css进度条"中，我们将深入探讨如何利用原生JavaScript、HTML和CSS来创建具有交互性的进度条。下面将详细阐述这三种技术如何协同工作以实现这一功能。 首先，HTML是构建网页结构的基础。为了创建一...

    简单的js+css进度条

    本项目“简单的js+css进度条”旨在为初学者展示如何使用JavaScript和CSS创建一个基本的进度条组件。下面将详细介绍这个项目的实现原理、涉及的技术点以及代码解析。 首先，我们来看CSS部分。进度条的外观主要由CSS...

    css动态的进度条

    css动态的进度条，今天刚封装的！

    9款极具创意的HTML5/CSS3进度条动画

    今天我们要分享9款极具创意的HTML5/CSS3进度条动画，这些进度条也许可以帮你增强用户交互和提高用户...之前我们介绍过几款具有各种动画效果的CSS3进度条，我们可以在CSS3进度条栏目中查看演示和下载[......] 阅读全文&gt;&gt;

    动态css进度条（闪烁跳动的进度条）特效代码

    动态CSS进度条是一种常见且吸引用户的界面元素，它通常用于显示任务或数据加载的进度，如文件上传、视频缓冲或网络请求。在这个示例中，我们关注的是如何使用CSS来创建一个闪烁跳动的进度条效果，这可以增强用户体验...

    ASP.NET 2.0 AJAX +CSS 进度条 自己做的文件上传控件 改进版

    ASP.NET 2.0 AJAX + CSS 进度条 自己做的文件上传控件 改进版 在ASP.NET 2.0中，开发者们经常面临一个挑战：如何提供用户友好的文件上传体验，特别是当需要上传多个文件时。原始的ASP.NET控件通常只能一次处理一个...

    纯CSS3时尚进度条UI设计效果

    本教程将深入探讨如何利用纯CSS3来创建一款时尚的进度条UI设计，使你的网站在视觉上更具吸引力。 首先，CSS3是层叠样式表的第三个主要版本，它引入了许多新的特性和功能，如选择器、过渡、动画、多列布局等，使得...

    css 进度条的文字根据进度渐变的示例代码

    本文介绍了css 进度条的文字根据进度渐变的示例代码，分享给大家，具体如下： 需求 1.进度条里面的文字需要根据进度的长度而变化 原理 用两个一模一样的样式的 div 重叠起来 效果 字体开始为 蓝色，跟随进度条变为...

    css进度条（条状图表）

    在网页上很多地方会用到进度条，本实例是一个用css实现的进度条。但由于技术有限，只能做到这样，如果加上js就能实现真正的实时进度了。

    js+css编写进度条的实例

    ### 使用JS+CSS实现自定义进度条的知识点详解 #### 一、背景介绍 在Web开发中，进度条是常用的一种UI元素，用于显示任务完成的状态。通过使用JavaScript（简称JS）与Cascading Style Sheets（层叠样式表，简称CSS）...

    使用svg模式制作的Css进度条

    在本主题中，我们将深入探讨如何使用SVG（Scalable Vector Graphics）模式和CSS（Cascading Style Sheets）来创建自定义的、交互式的进度条。SVG因其可缩放性和清晰度而被广泛应用于现代Web设计，它允许我们创建矢量...

    CSS实现漂亮的进度条

    这是一款用CSS实现的进度条效果，各种颜色彰显时尚。

    css3炫酷进度条动画

    **CSS3炫酷进度条动画**是一种利用现代浏览器支持的CSS3特性来增强网页界面表现力的技术。在原生Bootstrap进度条的基础上，开发者通过添加和调整CSS3代码，可以实现更多样化、动态且视觉吸引人的进度条效果。...

    css3进度条

    在网页设计中，CSS3（层叠样式表第三版）为开发者提供了许多强大的新特性，其中之一就是进度条的实现。CSS3进度条是用于显示任务完成度或数据加载状态的一种可视化元素，它能够以优雅的方式反馈给用户某个过程的进度...

    CSS步骤条，进度条

    创建纯CSS进度条的基本步骤如下： 1. 容器：进度条的基础框架，通常是一个带有固定宽度的`&lt;div&gt;`，背景色可能为浅灰色。 2. 填充区域：表示进度的`&lt;div&gt;`，其宽度会随着进度增加，背景色通常是亮色，以突出显示进度...

Magicbox
Global site tag (gtag.js) - Google Analytics