用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
投稿猜你喜欢
- 在写代码的时候，免不了要使用变量。但程序中的一个变量并不一定是在哪里都可以被使用，根据情况不同，会有不同的“有效范围”。看这样一段代码：de
- 记住以下几点:直接子类化内置类型(如dict,list或str)容易出错,因为内置类型的方法通常会忽略用户覆盖的方法,不要子类化内置类型,用
如下所示：import numpy as npfrom torchvision.transforms import Compose, ToT- 线性回归在整个财务中广泛应用于众多应用程序中。在之前的教程中，我们使用普通最小二乘法（OLS）计算了公司的beta与相对索引的比较。现在，我
- 省市级联这东西基本是网注一份，而且基本是全是js写的，js写唯一坏处就是JS无效时不可用，我所说的js无效包括不支持js，js加载未完成或者
- 首先学习两个函数1.substring 返回字符、binary、text 或 image 表达式的一部分。基本语法:SUBSTR
- SAX将dd.xml解析成html。当然啦，如果得到了xml对应的xsl文件可以直接用libxml2将其转换成html。#!/usr/bin
- 1、使用好处提高性能：由于减去了大量新建终止线程的费用，重用了线程资源；适用场景：适用于处理大量突发请求或需要大量线程完成任务，但实际任务处
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&
- 一、前言1.1.环境python版本：3.6Django版本：1.11.61.2.预览效果最终搭建的blog的样子，基本上满足需求了。框架搭
- 本文实例讲述了Python按行读取文件的实现方法。分享给大家供大家参考，具体如下：小文件：#coding=utf-8#author: wal
- numpy中有两个函数可以用来读取文件，主要是txt文件, 下面主要来介绍这两个函数的用法第一个是loadtxt, 其一般用法为numpy.
- 大家好，给大家分享下如何使用Python脚本操作Excel实现批量替换。使用的工具Openpyxl，一个处理excel的python库，处理
- #!/usr/bin/env python2#-*- coding:utf-8 -*-__author__ = 'jalright&
- 问题你想在使用范围内执行某个代码片段，并且希望在执行后所有的结果都不可见。解决方案为了理解这个问题，先试试一个简单场景。首先，在全局命名空间
- 本文实例为大家分享了梅尔倒谱系数实现代码，供大家参考，具体内容如下""" @author: zoutai@fi
- 最近经常遇到xmlHttp组件的问题, 今天终于有空将解决过程中的经验整理下来了! ^o^一、在运用xmlhttp组件编
- 前言最近在项目中遇到这样一个需求：需要在数据表中检索包含指定内容的结果集，该字段的数据类型为text，存储的内容是json格式，具体表结构如
- 目录项目地址功能概述效果图模块安装提交环境为python3.7 pyqt5==5.13.2 win10 一切正常!说一说大概的思路吧项目地址
- 引言第一次了解python的WSGI,可能描述的不太准确。本篇文章所依赖的python环境为:什么是WSGIWSGI也称之为web服务器通用
