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

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

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

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

六、接下来，我们还可以再加点点缀

在前面的例子中，我们使用实现了比例尺的效果。这里我们两样可以实现这样的效果。在<table>元素的后面添加一个无序列表：

<FONT face=Arial><ul id="ticks">  
 <li><p>50</p></li>  
 <li><p>40</p></li>  
 <li><p>30</p></li>  
 <li><p>20</p></li>  
 <li><p>10</p></li>  
</ul></FONT>  

当然你也可以使用<div>实现这样的结构，不过语意不够好。

下面我们设置一下它的位置和样式：

ul#ticks {   
    list-style-type:none;   
 width:600px;   
  position:relative;   
    top:-300px;   
}   
ul#ticks li {   
 border-top:1px dotted #41a3e2;   
    height:59px;   
}   
ul#ticks li:first-child {   
    border:none;   
}   
ul#ticks li p {   
  position:absolute;   
    left:100％;   
}  

注意：这里我们对<ul>使用了相对定位，相对定位和绝对定位的区别就是它们定位的参照物不同，相对定位使用的是与其相邻的元素，绝对定位使用的是父元素。

我们两次使用到了伪类:first-child，如果你还不了解相关伪类的使用，你可以查看这篇文章。

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

七、最后处理

 由于IE6不能使用PNG透明效果，因此我们还针对它做一个!important的CSS hack：

table#q-graph {   
  background:#adfe12 url(fade-light.png) repeat-x scroll 0 0 !important;   
  background:#adfe12 repeat-x scroll 0 0;   
}  

针对Internet Explore错位问题：

td.bar {   
  bottom:0;  
  .bottom:2px;   
}  

不过还有一个问题，就是在Internet Explorer中无法很好解决图层的顺序问题，在Firefox下效果比较理想。

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

相关阅读：

用CSS实现柱状图（Bar Graph）的方法（一）—基于列表元素的柱状图

用CSS实现柱状图（Bar Graph）的方法（二）—基于表格元素的柱状图

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

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

猜你喜欢

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