你的位置:首页 > 网页设计

[网页设计]CSS平铺背景图片实现百分比图表


<html <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 >
<li >20%</li>
<li >40%</li>
<li >60%</li>
<li >80%</li>
<li >100%</li>
</ul>
</div>
<div>http://www.999jiujiu.com/</div>

</body>
</html>