相关文章
什么是Dreamweaver?有哪些常用的网页..
北京网站设计深入学习网页技术CSS，再谈div、span的困惑！
北京网站设计专题管理
网站建设利用weblogic的POOL（连接池）连接数据库
北京网页设计子类列表生成多余的DIV代码的解决办法
北京网站设计[css]简明教程 SPAN和DIV的区别
网站制作CSS滤镜属性详解
网站设计活用DW的数据导入、排序与美化
网站设计FLASH MX 2004视频教程: 乌龟赛跑3
网页设计Flash视频教程：1.5 椭圆工具
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网站制作 >> www.qitongnet.com北京网站设计网页设计中CSS条状图表形式的实现方法
www.qitongnet.com北京网站设计网页设计中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>北京网站建设
</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 企通互联全部选择 提示：你可先修改部分代码，再按运行