建站学 - 轻松建站从此开始!

建站学-个人建站指南,网页制作,网站设计,网站制作教程

当前位置: 建站学 > 网页设计 > css教程 >

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

时间:2011-04-03 14:19来源:建站学整理 作者: 点击:
建站学再次为你献上非常漂亮非常实用的一个CSS统计图表实例,希望对大家有用处:   下面是CSS代码部分,实例中用到的图片大家可以用Photoshop制作一个,具体的可以参考建站学的Photoshop教程栏目。 td.value { background-image: url(gridline58.gif);

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

}

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片