DIV+CSS 百分比进度条

最新推荐文章于 2024-07-19 15:32:49 发布

hou_jian_yong

最新推荐文章于 2024-07-19 15:32:49 发布

阅读量174

点赞数

CC 4.0 BY-SA版权

分类专栏： html & css 文章标签： xhtml

本文链接：https://blog.youkuaiyun.com/hou_jian_yong/article/details/84228289

html & css 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用CSS来创建动态的、可自定义宽度的条形图的方法。通过HTML和CSS结合，可以轻松地为网站添加视觉效果良好的进度条或状态指示器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Graph</title>
<style>
.graph {
float:left;
margin:0px;
background-color:#cecece;
position:relative;
width:100px;
padding:0
}

.graph .bar {
display:block;
position:relative;
background-image:url(images/bargraph.gif);
background-position:right center;
background-repeat:repeat-x;
border-right:#538e02 1px solid;
text-align:center;
color:#fff;
height:19px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:1.9em
}

.graph .bar span {
position:absolute;
left:1em
}
</style>
</head>
<body>
<div class="graph"><strong class="bar" style="width:70%;">70%</strong></div>
</body>
</html>