网页教学网
 当前位置: 网页教学网 >> 网页制作 >> CSS技术应用 >> 网页中用于构造图表的一些基本CSS代码
[ HTML ] [ FW ] [ DW ] [ FP ] [ JS ] [ XML ] [ CSS ] [ 图象 ] [ FLASH ] [ .NET ] [ ASP ] [ JSP ] [ PHP ] [ 数据 ] [ 系统 ] [ 安全 ] [ 素材 ] [ 建站 ] [ 主机 ] [ 入门 ] [ 技巧 ]

网页中用于构造图表的一些基本CSS代码

http://www.webjx.com  更新日期:2007-09-29 08:17  出处:网页教学网  作者:站长整理

这是最基本的预览,下面是几种不同的应用代码

一、基本的CSS图表

CSS代码

<style>   
    .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; }   
</style>   
<div class="graph">   
    <strong class="bar" style="width: 24%;">24%</strong>   
</div>

二、复杂的CSS条形图

CSS代码

<style>   
    dl {    
        margin: 0;    
        padding: 0;         
    }   
    dt {    
        position: relative; /* IE is dumb */  
        clear: both;   
        display: block;    
        float: left;    
        width: 104px;    
        height: 20px;    
        line-height: 20px;   
        margin-right: 17px;                 
        font-size: .75em;    
        text-align: rightright;    
    }   
    dd {    
        position: relative; /* IE is dumb */  
        display: block;         
        float: left;        
        width: 197px;    
        height: 20px;    
        margin: 0 0 15px;    
        background: url("g_colorbar.jpg");    
     }   
     * html dd { float: none; }    
    /* IE is dumb; Quick IE hack, apply favorite filter methods for   
    wider browser compatibility */  
  
     dd div {    
        position: relative;    
        background: url("g_colorbar2.jpg");    
        height: 20px;    
        width: 75%;    
        text-align:rightright;    
     }   
     dd div strong {    
        position: absolute;    
        rightright: -5px;    
        top: -2px;    
        display: block;    
        background: url("g_marker.gif");    
        height: 24px;    
        width: 9px;    
        text-align: left;   
        text-indent: -9999px;    
        overflow: hidden;   
     }   
</style>   
<dl>   
    <dt>Love Life</dt>   
    <dd>   
        <div style="width:25%;"><strong>25%</strong></div>   
    </dd>   
    <dt>Education</dt>   
    <dd>   
        <div style="width:55%;"><strong>55%</strong></div>   
    </dd>   
    <dt>War Craft 3 Rank</dt>   
    <dd>   
        <div style="width:75%;"><strong>75%</strong></div>   
    </dd>   
</dl>  

三、CSS竖条图

CSS代码

<style>   
    #vertgraph {   
        width: 378px;    
        height: 207px;    
        position: relative;    
        background: url("g_backbar.gif") no-repeat;    
    }   
    #vertgraph ul {    
        width: 378px;    
        height: 207px;    
        margin: 0;    
        padding: 0;    
    }   
    #vertgraph ul li {     
        position: absolute;    
        width: 28px;    
        height: 160px;    
        bottombottom: 34px;    
        padding: 0 !important;    
        margin: 0 !important;    
        background: url("g_colorbar3.jpg") no-repeat !important;   
        text-align: center;    
        font-weight: bold;    
        color: white;    
        line-height: 2.5em;   
    }   
  
    #vertgraph li.critical { left: 24px; background-position: 0px  !important; }   
    #vertgraph li.high { left: 101px; background-position: -28px  !important; }   
    #vertgraph li.medium { left: 176px; background-position: -56px  !important; }   
    #vertgraph li.low { left: 251px; background-position: -84px  !important; }   
    #vertgraph li.info { left: 327px; background-position: -112px  !important; }   
</style>   
<div id="vertgraph">   
    <ul>   
        <li class="critical" style="height: 150px;">22</li>   
        <li class="high" style="height: 80px;">7</li>   
        <li class="medium" style="height: 50px;">3</li>   
        <li class="low" style="height: 90px;">8</li>   
        <li class="info" style="height: 40px;">2</li>   
    </ul>   
</div>

关键词:网页制作,CSS,图表
推荐给好友】【关闭】【收藏本文
最新五条评论
查看全部评论
评论总数 0
您的评论
用户名: 新注册) 密 码: 匿名:
·用户发表意见仅代表其个人意见,并且承担一切因发表内容引起的纠纷和责任
·本站管理人员有权在不通知用户的情况下删除不符合规定的评论信息或留做证据
·请客观的评价您所看到的资讯,提倡就事论事,杜绝漫骂和人身攻击等不文明行为