相关文章
网站设计常用CSS缩写语法总结及缩写的原因
北京网站制作构建自己的HTML工具
北京网站建设投票管理视频演示
北京网页设计Dreamweaver构建Blog(5):分栏及回复的实现2
北京网站建设DreamweaverMX Ultradev探索(3-2)
北京网页设计教程/dreamweaver/入门 DreamWeaver经典50问(六)
网站设计制作简单实用的FLASH导航菜单（1）
网页设计FLASH8新功能体验：第四章 4.效果——展开
www.qitongnet.comDreamweaver你未必了解的5个小技巧
北京网站设计HTML组件之:最顶级页面(1)
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网站制作 >> 网站制作网站建设网页设计中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 #fffd11; 北京网页设计
padding: 2px; 北京网页设计 网页设计
}北京网站设计
.graph .bar { 北京网页设计
display: block;企通互联
position: relative;北京网站设计
background: #ff0000;
text-align: center; 网站制作
color: #333; 北京网站建设
height: 2em; 北京网站建设
line-height: 2em; 企通互联
} 北京网站制作网页设计
.graph .bar span { position: absolute; left: 1em; }
通过上面的边框，颜色的定义，我们勾勒出了一个条状的图形，我们在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>www.chinahtml.com</title> 北京网页设计北京网站设计
<style type="text/css">网页设计
.graph { 北京网站制作
position: relative; /* IE is dumb */北京网页设计
width: 200px; 网站制作
border: 1px solid #fffd11; 企通互联
padding: 2px; 北京网页设计
}网页设计
.graph .bar { 北京网站建设北京网站建设
display: block;网页设计
position: relative;北京网站建设
background: #ff0000; 北京网站设计 网站建设
text-align: center; 北京网页设计
color: #333; 网站建设
height: 2em; 北京网页设计
line-height: 2em; 北京网站制作
}北京网页设计
.graph .bar span { position: absolute; left: 1em; }网页设计
</style> www.qitongnet.com网站建设
</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>
Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行
上一篇：北京网页设计div中class与id的区别及应用
下一篇：北京网页设计CSS布局中如何组织样式表以便于简化、维护?