tion %> 山东麻将教学
當前位置:首頁 > 建站知識

CSS條狀圖表:基本型

更新時間:2009.06.22 瀏覽次數:

譯文已作精簡,保留了與主題切實相關的部分,并對文中整段給出的代碼進行分解注釋,便于大家的閱讀和理解。要查看英語原文請參看原文地址,關于本例的效果,原文作者已測試瀏覽器如下:Firefox 1.0.7, Firefox 1.5, IE 6, Safari 1.3.3, and Opera 9(TP1).

首先是最基本的條狀圖表,思路很簡單,利用CSS中“百分比”寬度的彈性準確地描繪出一個百分比柱形圖。

1.首先在頁面中建立一個DIV容器并添加名稱為graph樣式,其間添加一組strong標簽作為文本對象的容器,注意其中除了調用名為bar的樣式之外,還直接利用行內樣式設置了strong的寬度為84%:

<div class="graph">
    <strong class="bar" style="width: 84%;">ximicc.com 84%</strong>
</div>

2.在.graph中,我們要定義最終效果中的外圍邊框樣式,border屬性的3個參數分別定義了邊框的粗細、線性以及顏色,在實際應用中要根據具體的頁面風格進行修改。整個容器的寬度設置為200px,并利用padding設置DIV的內邊距,目的是為了讓邊框與之后的文字背景色產生間距:

    .graph {
        position: relative; /* IE is dumb */
        width: 200px;
        border: 1px solid #B1D632;
        padding: 2px;
    }

加入樣式后的瀏覽效果如下:

3.樣式.bar中,首先將strong標簽內容轉換為塊級元素,配合背景顏色的設置進行作用。樣式中除了設定文字的顏色、對齊方式及行高之外,最重要的是background屬性,效果中的柱狀條事實上就是這里設置的背景色,結合block顯示方式最終得到良好的體現。

    .graph .bar {
        display: block;
        position: relative;
        background: #B1D632;
        text-align: center;
        color: #333;
        height: 2em;
        line-height: 2em;           
    }

我們可以運行下面的代碼來查看最終的效果:

運行代碼

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

烟台麻将规则 科创板股票涨跌幅限制 甘肃11选5 吉林快3 天津十一选五基本走 2019041期排列三直租 体球网篮球即时比分直插 福州麻将下载 新闻 新2即时指数 cba比分预测 球棎足球比分007 湖北十一选五基本走 血战麻将好友房软件 巴西对法国比分预测 全讯网nba比分 陕西11选5 吉林11选5开奖