非常实用的CSS统计图表实例
建站学再次为你献上非常漂亮非常实用的一个CSS统计图表实例,希望对大家有用处:
下面是CSS代码部分,实例中用到的图片大家可以用Photoshop制作一个,具体的可以参考建站学的Photoshop教程栏目。
td.value {
background-image: url(gridline58.gif);
background-repeat: repeat-x;
background-position: left top;
border-left: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
padding:0;
border-bottom: none;
background-color:transparent;
}
td {
padding: 4px 6px;
border-bottom:1px solid #e5e5e5;
border-left:1px solid #e5e5e5;
background-color:#fff;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 80%;
}
td.value img {
vertical-align: middle;
margin: 5px 5px 5px 0;
}
th {
text-align: left;
vertical-align:top;
}
td.last {
border-bottom:1px solid #e5e5e5;
}
td.first {
border-top:1px solid #e5e5e5;
}
.auraltext
{
position: absolute;
font-size: 0;
left: -1000px;
}
table {
background-image:url(bg_fade.png);
background-repeat:repeat-x;
background-position:left top;
width: 33em;
}
caption {
font-size:90%;
font-style:italic;
}