51可用代码模板网站

咨询热线:

181-1164-6936
  • 1
CSS样式
当前位置:首页>实用代码>CSS样式>

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

时间:2017-08-16 14:32点击:

代码如下   请自行跟换图片地址


<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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(http://img5.imgtn.bdimg.com/it/u=2554275582,1619979161&fm=26&gp=0.jpg) repeat-y 20% 0; }
#content ul.graph li.percent40 { background: url(http://img5.imgtn.bdimg.com/it/u=2554275582,1619979161&fm=26&gp=0.jpg) repeat-y 40% 0; }
#content ul.graph li.percent60 { background: url(http://img5.imgtn.bdimg.com/it/u=2554275582,1619979161&fm=26&gp=0.jpg) repeat-y 60% 0; }
#content ul.graph li.percent80 { background: url(http://img5.imgtn.bdimg.com/it/u=2554275582,1619979161&fm=26&gp=0.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.51kydm.com/">http://www.51kydm.com/</A></div>

</body>
</html> 

51可用模板(代码)网站专为广大站长朋友提供精品模板与代码,同时免费提供网站收录。
本站域名: WWW.51KYDM.COM    联系方式:QQ:182468923    手机:18111646936
本站关键词:网站链接收录网址收录入口网站免费提交收录网站收录提交入口    网站地图
51可用模板
展开