由于一些局限性，CSS不能够实现矢量绘图功能。因此不能够实现如同excel中的各种3d及饼状图的显示，但是CSS的对象是基于盒状的显示模式，因此可以利用CSS来实瓔见柱状图功能的，结合一些精心设计的背景，天津网站建设，天津网站制作，天津网络公司“也有可能实现3D钓柱状图效果，有了上上面的两个例子，相信对CSS在控制对象宽高来显示柱状图应该不是问题，我们这一节就将使用CSS来制作一个完整的柱状图表。在上面的几张flash图表之中，对于第一个曲线图表而言CSS是没办法实现的，不过对于后两种flash图表效果，使用CSS实现则相当简单，在编码上甚至比flash程序实现要简单得多，而且更主要的是，我们的CSS柱图表基于的是一段XHTML代码，XHTMI中的信息我们都可以完全保留。根据实际情况回复到原始显示方式，我们来看一下用于显示准备的。
我们为柱状图使用了两个基本元素，dlV用于显看专柱状图整体的显示区域及背景，ul用柱状中的数据，其中每一个柱列都将是一个li对象，为了使得每一列有颜色区分，我们分别对每一个li定义了不同的class，下一步就是为#ver编写一段样式让其有足够的空间来放置柱状图。其余代码主要是用哥整个区域的颜色设计，position:rclati的作用主要在后面，我们继续编写剩余的样式，是通过行间样式表设定每个柱列的高度。每个柱列都有自身的高度，我们可以用CSS急将其分配到不同的位置。
在li的样式设定中，又使用了厂position" absolute;为什么使用绝对定位呢？原因在于；bottom:Opx,就是让对象距下边为Opx; CSS本身的vertical-align属性虽然有bosom值，但是浏览器并没有提供良好的支持，因此如果我们希望柱状图显示在区域的最下面，只好使用position:absoult;加上bottom:Opx;这样的组合方式。但是如果我们直接使用position:absoult;1i对象将会对IE窗口的左上角进行相对定位，而不是上一个div对象，因此将上一个div对象设置为position: relative;这样div对象就是一个相对定位对象，而在其下面的li对象就会以div对象为参照物进行position:absoult;这样就能够让bottom:Opx;起作用了，然后再对每一个柱列的位置进行1eR值的设定，使其显示在不同位置之上，预览一下目前的效果。柱状图初具规模了，不过工作还没有缉结束，这样的柱状图在视觉样式上还略显单簿，我们将继续使用背景技术改善柱状图的显示效果，我们准备了新的背景图片，用于柱列的背景及整个图表的背景，并且为图表增加一个表头hl对象，然后着手改善样式表代码。我们在XTML中增加了hl疆对紂象用于放置图表的表头，在样式中有相应的样式设置。同样，根据背景定位的经验，我们采用了一张背景bg.jpg作为柱列的显示，在每每一列中三显不同的局部，这样就使得每一个柱列都有了不同的渐变颜色，为了使图表更便于观看，我对整个div也应用了一个平铺的背景，使得图表的背景出现了坐标线，更利用于尸阅读垂，终的显示效果如图。