CSS平铺背景图片实现百分比图表

CSS平铺背景图片实现百分比图表,第1张

概述&lthtml xmlns="http://www.w3.org/1999/xhtml"&gt&lthead&gt&ltmeta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt&lttitle&gt使用背景图片百分比创建图表&lt/title&gt&ltst <HTML xmlns="http://www.w3.org/1999/xhtml">
<head><Meta http-equiv="Content-Type" content="text/HTML; charset=gb2312" />
<Title>使用背景图片百分比创建图表</Title>
<style type="text/CSS" media="screen">
#content ul.graph
{
margin: 0;
padding: 0;
List-style-type: none;
}

#content ul.graph li
{
margin-bottom: .5em;
padding: .2em;
background: #600;
color: #fff;
}
#content ul.graph li.percent20 { background: url(graph20.jpg) repeat-y 20% 0; }
#content ul.graph li.percent40 { background: url(graph40.jpg) repeat-y 40% 0; }
#content ul.graph li.percent60 { background: url(graph60.jpg) repeat-y 60% 0; }
#content ul.graph li.percent80 { background: url(graph80.jpg) repeat-y 80% 0; }
</style>
</head>
<body>
<div ID="content">
<h2>
<strong>使用背景图片百分比创建图表</strong>
</h2>


<ul class="graph">
<li class="percent20">20%</li>
<li class="percent40">40%</li>
<li class="percent60">60%</li>
<li class="percent80">80%</li>
<li class="percent100">100%</li>
</ul>
</div>
<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>
</body>
</HTML> 总结

以上是内存溢出为你收集整理的CSS平铺背景图片实现百分比图表全部内容,希望文章能够帮你解决CSS平铺背景图片实现百分比图表所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1017263.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-23
下一篇 2022-05-23

发表评论

登录后才能评论

评论列表(0条)

保存