CSS を使用して基本的な棒グラフ効果を実現する_エクスペリエンス交換

CSS 棒グラフは、Web デザインでよく見かける形式です。棒グラフは、数量を棒グラフの形式で視覚的に表現できます。
基本的なCSS棒グラフの実装方法とは？次の例を見てみましょう。

コードをコピー コードは次のとおりです:

24%

これは xhtml です。 このコードはコンテナを定義し、強力な xhtml 要素を含むクラス グラフを適用し、この要素にクラス バーを適用します。
次の CSS 定義を見てみましょう:

コードをコピー コードは次のとおりです。

.graph {
position:relative; /* IE はダメです */
width: 200px;
border: 1px Solid #B1D632;
padding: 2px;
}
.graph . bar {
表示: ブロック;
位置: 相対;
背景: #B1D632;
テキスト配置: 中央;
カラー: #333;
高さ: 2em;
line-height: 2em;
}
.graph .bar span { 位置: 絶対; 左: 1em; }

上記の枠線と色の定義により、帯状の輪郭を描きますが、設定する領域のサイズをxhtmlコード内でstyle="width: 24%;"で定義します。そんな基本的な棒グラフが完成しました！
最終的なランニング効果を見てみましょう:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">