非常实用的CSS统计图表实例

网络整理 - 07-27

建站学再次为你献上非常漂亮非常实用的一个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;

}