切换为不分页显示
【首页】 【建站杂谈】 主题:CSS横向条状图表演示代码
字体:    回复
CSS横向条状图表演示代码 
zfmd(2009-7-24 9:52:18)  点击:8813  回复:0  IP:121.24.247.*
用CSS制作横向排列的条状图表演示代码,用来生成柱状图之类的数据统计表,的确是个不错的方法,而且代码浅显易懂,便于修改完善,基本雏形已经展示在大家面前,剩下的功能你可以继续扩展哦。
程序代码:

<!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>CSS横向条状图表</title>
<style type="text/css">

    .graph {  
        position: relative; /* www.codefans.net */
        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; }
</style>
</head>
<body>
<div class="graph">
    <strong class="bar" style="width: 33%;">33%</strong>
</div>
<br />
<div class="graph">
    <strong class="bar" style="width: 78%;">78%</strong>
</div>
</body>
</html>

[返回]
[本主题共0回复 | 每页显示20回复]
 返回列表 跳至页首跳至页尾 放大字体 缩小字体
按用户名:    按标题:   按内容:       包括所有回复
【首页】→ 【建站杂谈】 回复:CSS横向条状图表演示代码
帖子标题:
   未登录!    

您的权限:
发表回复:×
UBB功能:×
文件上传:×
 
风格选择:极速  古韵  宽屏  大字  |  图示说明: 24小时新发主题  最近被编辑的主题  超过24小时普通主题
页面执行时间:125毫秒 | 在线:8 今日:178 合计:3234840 | 清除COOKIE |