用CSS实现柱状图（Bar Graph）的方法（三）——复杂柱状图的实现（2）
作者：dudo 来源：dudo博客 发布时间：2008-05-26 13:36:00
3、下面我们要对四个季度进行布局
全Q1~Q4宽度为总体宽度的1/4，即150px，高度正好填满整个ul元素，右边框虚线又进行区分。同时还要用绝对定位把它们一排列开，这只需要设定它们到左侧的距离left的值即可：
li.qtr {
width:150px;
height:300px;
border-right:1px dotted #41a3e2;
z-index:2;
}
li#q1 {left:0;}
li#q2 {left:150px;}
li#q3 {left:300px;}
li#q4 {left:450px;border-right:none;} /*最后一个不需要边框*/
点击此处查看运行效果4、对于季度分组布局完成之后，我们再对区域分组布局。
首先，根据实际情况指定柱状条的宽度，这里我们指定为34px（你可以根据自己设计的样式适当调整），并用不同的颜色区分南北两个区域（sounth和north），这里我们使用了背景图片，并用绝对定位指定left的值：
/* ul li ul */
#q-graph ul {list-style:none;}
/* ul li ul li */
li.bar {
width:34px;
color:#fff;
}
li.north {
left:36px;
background:#ddd url(/file/UploadPic/20085/26/2008526132331285.gif) no-repeat 0 0;
}
li.south {
left:80px;
background:#ddd url(/file/UploadPic/20085/26/2008526132331285.gif) no-repeat -34px 0;
}
注意，north和south样式中的left的都相对于其上一个position:relative元素而言的，这里就是第二层的ul元素。另外还要记住去除默认样式。
5、至此，我们已经基本上完成了柱状图的设计，不过还有几处小的问题要处理。
首先，我们使用了png透明图片加强视觉效果，但是这在IE6中是不起作用的；
其次，盒模型的问题，IE6对盒模型的解释存在一定的错误，因此是做一个hack；
不过这两个问题都可以用 !important来解决（请查看最终效果）。
6、加点点缀
在预览图中我们看到了背景有标尺效果，我们下面把它添加上。
首先，在原来的HTML元素中加上下面的代码
<li id="ticks">
<div class="ticks"><p>50</p></div>
<div class="ticks"><p>40</p></div>
<div class="ticks"><p>30</p></div>
<div class="ticks"><p>20</p></div>
<div class="ticks"><p>10</p></div>
</li>
注意：这段代码的位置应该位于第一个ul元素下的子元素。此外，只所以在<div />内又嵌套了<p>元素是因为我们要让这些数字位于一侧，要想对它进行定位就必须把它放在一个容器内。
7、让标尺到相应位置上去
首先让id为ticks的li元素填满整个布局，这个很简单，只需设定他的高度和宽度与父元素的ul相同（高300px、宽600px）就可以了。另外，我们要对<p>元素内的内容进行绝对定位，就必须使其父元素（div）具有position:relative属性：
/* ul li divs */
li#ticks {
left:0;
height:300px;
width:100％;
z-index:1;
}
div.ticks {
position:relative;
height:60px;
border-top:1px dotted #41a3e2;
}
div.ticks:first-child {border-top:none;} /*only4 Firefx IE 7+*/
div.ticks p {
position:absolute;
left:103％;
top:-11pt;
}
注意：为了让标尺位于柱状图的后面，我们需要设置z-index值，z-index越大说明该越靠表层。此外我们还使用了伪类 :first-child，它的作用是单独为第一个div元素设定样式，这是CSS2.1中规定伪类，不过只有在Internet Explorer 7+、Firefox、Opera等浏览器中有效。
8、至此我们的复杂柱状图就完成了，做一下总结：
和前面两篇文章一样，相对定位和绝对定位是关键技术，因此，大家一定要对盒模型的定位有一定的了解；
不同浏览器对于相同元素的默认样式并不一致，这也是为什么我们在CSS的最开始要写 * {padding:0;marging:0}；
最后，大家可以尝试使用<dd> <dt> <dl>来实现同样的布局。
最终效果及源代码：
0
投稿猜你喜欢
- 学习JQUERY就应该从最基本的学起，基本的就应该是语法了，在这里，我们有必要先温习一下JAVASCRIPT的一些知识。语法就不用说了，都是
- 一、什么是匿名函数？在Javascript定义一个函数一般有如下三种方式：函数关键字(function)语句：function f
- sql server的备份与恢复（查询分析器） 查询分析器： 命令： 1：备份数据库命令： backup database whdb1(要备
来自Six Revisions的一篇文章，作者对一些主流的浏览器进行了测试比较，测试主要针对以下几个方面进行：1.JavaScript执行速- CSS（叠层样式表）和XSL（可扩展样式语言）都可以定义XML文件的显示，这两种方式有哪些不同以及它们在使用中的具体方法，我们将在本文给予介
- 一种很常见的写法： document.write('<scr'+'ipt src=&quo
- 从CNNIC在2009年的报告中可以看到，超过80％的网民购物之前都要看评论（包括本站、其他站评论），超过80％的网民都比较信任口碑（包括网
- MySQL 数据（字段）类型在创建表的时候，要明确定义字段对应的数据类型。MySQL 主要的数据类型分为数值类型、字符串（文本）类型、时间日
- 在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗的解决方法分享。<div id='tes
- 内容摘要：除了内部性能增强和优化外，IIS6.0版本的 Active Server Pages(ASP)&nb
- 虽然今年名义上已经不再管人了，但也不得不掺和进很多人事，这里想简单说说，即使不能帮助这个行业的从业者规划职业道路，也算是把之前摸过的路小结一
- 以前大家谈了很多有关打开数据库连接安全的问题，现在我再提出一种思路：使用activex dll来保护你的代码。（既可以不用为使用共享的加密软
- 1. 用Dreamweaver 4.0轻松设计会自动弹性调整的网页 首先需要保证的是你的页面内容采用了表格的格式，然后打开你要编辑的页面，按
- 要随机生成字符串代码如下：在MySQL中定义一个随机串的方法，然后再SQL语句中调用此方法。随机串函数定义方法：CREATE DEFINER
- 导言：本文一步一步手把手教你打造一个极酷的三层分离的标准滑动门导航菜单，从思路、原理、步骤，手段可谓“无所不用其极”，即便你是菜鸟，相信你看
- 论坛上看到有人问ASP是否可以定时触发事件，我就顺便做了一个玩玩。其实做这个的原理是很简单的，只是我们当时没有仔细的去想想该怎么实现，我这里
- 一图胜“十”言：SQL Server 数据库总结 一个大概的总结 经过一段时间的学习，也对数据库有了一些认识。 数据库基本是由表，关系，操作
- 北京时间2月15日据国外媒体报道，美国知名sns网站Facebook全球活跃用户量已突破1.75亿大关。数据显示，全球20％的网民都使用Fa
- 图片缩放会失真是真理，在浏览器里也一样，貌似使用传说中的双三次插值可以让失真看起来比较不明显，但是真的想不通IE7已经实现了，却不默认打开，
- 近来在做数据库设计，有时候真弄不清SQL2000里的数据类型，所以摘了这篇文章。 (1)char、varchar、text和nchar、nv
