论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

CSS基本条状图表的实现方法是什么?

文章类别:div+css布局 | 发表日期:2008-9-26 11:27:41

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

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<div class=\"graph\">
<strong class=\"bar\" style=\"width: 24%;\">24%</strong>
</div>

  这是xhtml代码,定义了一个容器,应用类graph,其中包括了一个xhtml元素strong,并且对这个元素应用类bar。
  我们看下面的CSS定义:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
.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%;\",定义了所设置的区域既大小。这样一个基本的条状图表就完成了!
  我们看最终的运行效果:

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

  
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058