DIV CSS 佈局教程網

這是最基本的預覽，下面是幾種不同的應用代碼

一、基本的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>