网页设计 CSS条状图表形式的实现方法

ZDNet软件频道 时间:2008-09-21 作者: | 网友推荐 我要评论()
本文关键词:条状图表 CSS 网页设计 软件
CSS条状图表是我们在网页设计中常常会遇到的一种形式。条状图表可以将数量,以条状图形的形式直观的表示出来。
CSS条状图表是我们在网页设计中常常会遇到的一种形式。条状图表可以将数量,以条状图形的形式直观的表示出来。

CSS基本条状图表的实现方法是什么?我们看下面的实例介绍:

 
下是引用片段:

<div class="graph">

    <strong class="bar" style="width: 24%;">24%</strong>

</div>

这是xhtml代码,定义了一个容器,应用类graph,其中包括了一个xhtml元素strong,并且对这个元素应用类bar。

我们看下面的CSS定义:

以下是引用片段:

.graph { 

        position: relative; /* IE is dumb */

        width: 200px; 

        border: 1px solid #B1D632; 

        padding: 2px; 

    }

    .graph .bar { 

        display: block;

        position: relative;

        background: #B1D632; 

        text-align: center; 

        color: #333; 

        height: 2em; 

        line-height: 2em;            

    }

    .graph .bar span 

通过上面的边框,颜色的定义,我们勾勒出了一个条状的图形,我们在xhtml代码中style="width: 24%;",定义了所设置的区域既大小。这样一个基本的条状图表就完成了!

全部代码:

以下是引用片段:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>homepage.yesky.com</title>

<style type="text/CSS">

    .graph { 

        position: relative; /* IE is dumb */

        width: 200px; 

        border: 1px solid #B1D632; 

        padding: 2px; 

    }

    .graph .bar { 

        display: block;

        position: relative;

        background: #B1D632; 

        text-align: center; 

        color: #333; 

        height: 2em; 

        line-height: 2em;            

    }

    .graph .bar span 

</style>

</head>

<body>

<div class="graph">

    <strong class="bar" style="width: 24%;">24%</strong>

</div>

<br />

<div class="graph">

    <strong class="bar" style="width: 60%;">60%</strong>

</div>

</body>

</html>

 
 

条状图表

CSS

网页设计

软件


百度大联盟认证黄金会员Copyright© 1997- CNET Networks 版权所有。 ZDNet 是CNET Networks公司注册服务商标。
中华人民共和国电信与信息服务业务经营许可证编号:京ICP证010391号 京ICP备09041801号-159
京公网安备:1101082134