用CSS实现基本条状图表效果

2024-08-10 15:27:12

CSS条状图表是我们在网页设计中常常会遇到的一种形式。条状图表可以将数量，以条状图形的形式直观的表示出来。
　　CSS基本条状图表的实现方法是什么？我们看下面的实例介绍：

代码如下:

这是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 { position: absolute; left: 1em; }

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

.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 { position: absolute; left: 1em; }

24%

60%

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

用CSS实现基本条状图表效果

CSS条状图表是我们在网页设计中常常会遇到的一种形式.条状图表可以将数量,以条状图形的形式直观的表示出来. CSS基本条状图表的实现方法是什么?我们看下面的实例介绍: 复制代码代码如下: <div class="graph"> <strong class="bar" style="width: 24%;">24%</strong> </div> 这是xhtml代码,定义了一个容器,应
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】

本文实例讲述了jQuery插件FusionCharts绘制的2D条状图效果.分享给大家供大家参考,具体如下: 1.设计思路 (1)了解条状图的一些特性和共性,掌握其特性: (2)根据FusionCharts设计条理,设置静态页面和数据源: (3)引入条状图,设置其属性. 2.设计步骤 (1)设计生成条状图的脚本 $(function(){ var bar2D = new FusionCharts( "FusionCharts/Bar2D.swf", "myChartId&qu
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】

本文实例讲述了jQuery插件HighCharts实现的2D堆条状图效果.分享给大家供大家参考,具体如下: 1.HighCharts之2D堆条状图源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D堆条状图</title> <script type="text/javascript" src
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】

本文实例讲述了jQuery插件HighCharts实现的2D条状图效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D条状图</title> <script type="text/javascript" src="js/jquery
jQuery实现自定义右键菜单的树状菜单效果

本文实例讲述了jQuery实现自定义右键菜单的树状菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery的自定义右键菜单,在树状结构的子节点(下级没有节点)上单击右键才会弹出自定义菜单,而且菜单是自动根据鼠标位置来定位的.当鼠标在菜单以外的任意空白处单击一下后会自动消失.这里想特别说明一点所谓的"菜单以外",可以有两种解剖方式--1.除了鼠标在菜单区域内的所有位置:2.如下图所示的A.B.C.D四个区域.显然用第一种方法来剖析会更简单直接一点.源码中的!IsInArea就
vue项目实战之圆柱状水波效果实现

目录 1.先在data中定义有关参数和引入数据请求接口 1.字data中定义需要用到的参数 2.引入数据请求接口 2.再进行真实数据的获取 3.核心代码(主要是html和CSS代码) HTML代码: CSS代码块: 4.需要的图片素材 5.最终效果总结 1.先在data中定义有关参数和引入数据请求接口 1.字data中定义需要用到的参数 specialList: [ { value: 0, height: 0, markKey: '' }, { value: 0, height: 0, mar
js+css简单实现网页换肤效果

本文实例讲述了js+css简单实现网页换肤效果.分享给大家供大家参考,具体如下: 这里做了3套外观,分别使用不同文件夹下的同名css文件,那么怎样实现js替换加载呢? 3个按钮如下: <a id="skin1" href="javascript:void(0)" class="easyui-linkbutton" onclick="changeCss('default')">蓝色皮肤</a><br
JS+CSS实现简易的滑动门效果代码

本文实例讲述了JS+CSS实现简易的滑动门效果代码.分享给大家供大家参考.具体如下: 看了很多的滑动门和滑动菜单的资料,总算写出来了一个像样的滑动门,虽然外观不怎么样,但可以兼容火狐,还请老前辈们不要笑话,以后有好多西再请大家批评. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-hdtx-demo-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1
使用html+js+css 实现页面轮播图效果(实例讲解)

html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=
JS+CSS实现的经典tab选项卡效果代码

本文实例讲述了JS+CSS实现的经典tab选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款经典的JavaScript+CSS tab选项卡代码,由以前的一款改写而成,自认为不错的东西,发上来分享吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jd-tab-cha-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio

用CSS实现基本条状图表效果

相关推荐

随机推荐