网络编程
位置：首页>> 网络编程>> 网页设计>> 用CSS实现柱状图（Bar Graph）的方法（四）—table实现复杂柱状图（2）

用CSS实现柱状图（Bar Graph）的方法（四）—table实现复杂柱状图（2）

作者：dudo　来源：dudo博客　发布时间：2008-05-28 12:55:00　

标签：柱状图,Bar,Graph,table,表格,css

二、定义总体样式

首先还是设定等宽字体、字号、默认空白等

* {margin:0; padding:0;}   
  body {padding:0;margin:40px;font-size:9pt;font-family:Helvetica,Geneva,sans-serif;}  

这段代码的意思很简单，不用过多解释。

和前面几节一样，我们应用的重点还是相对定位和绝对定位的知识。首先我们设定整体table的样式：

table#q-graph {   
   width:600px;   
  height:300px;   
 caption-side:top;   
 border:2px solid #0063be;   
 background:#adfe12 url(fade-light.png) repeat-x scroll 0 0;   
   position:relative;   
    border-collapse:collapse;   
 display:block;  /*for Firefox*/  
}  

这段代码很简单，没有特殊要说明的地方，只不过在Firefox对Table进行相对定位后需要设置display:block,Internet Explore下不存在这样的问题。同时border-collapse:collapse;设置相邻单元格共用一个边框。

此外，对于table的默认样式，Firefox和Internet Explorer的解释是不同的，包括他们的位置和宽度都，因此要统一设置：

table#q-graph caption {   
   width:100％;   
   position:absolute;   
    top:-20px;   
}  

注意：在Internet Explore中，这实际上无法改变caption的位置（只接受正的top值），我们只是让Firefox中的caption和IE中效果相同。

查看演示页面：Bar-Graph-1.htm

第一页 上一页 1
2
3 4 下一页
0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com