CSS如何實現柱形圖效果

這篇文章給大家分享的是有關CSS如何實現柱形圖效果的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

　　<ulclass="chart">

　　<li><em>使命召喚</em><span>:</span><strong>35%</strong></li>

　　<li><em>機器戰爭</em><span>:</span><strong>40%</strong></li>

　　<li><em>CS</em><span>:</span><strong>87%</strong></li>

　　<li><em>光環</em><span>:</span><strong>45%</strong></li>

　　<li><em>半條命</em><span>:</span><strong>23%</strong></li>

　　</ul>

　　解釋一下，ul里面的每一個li就代表我們要統計的內容，span為柱身，em為統計項的名字，strong為統計數值。我們可以添加一些背景顏色來區分他們。

　　.chart{

　　list-style:none;

　　font-family:'宋體';

　　font-size:14px;

　　border:1pxsolid#ccc;

　　margin:0;

　　padding:5px;

　　background:#F2F1D7;

　　}

　　.chartli{

　　width:400px;

　　background:#DDF3FF;

　　}

　　運行代碼：

　　<styletype="text/css">

　　.chart{

　　list-style:none;

　　font-family:'宋體';

　　font-size:14px;

　　border:1pxsolid#ccc;

　　margin:0;

　　padding:5px;

　　background:#F2F1D7;

　　}

　　.chartli{

　　width:400px;

　　background:#DDF3FF;

　　}

　　</style>

　　<ulclass="chart">

　　<li><em>使命召喚</em><span>:</span><strong>35%</strong></li>

　　<li><em>機器戰爭</em><span>:</span><strong>40%</strong></li>

　　<li><em>CS</em><span>:</span><strong>87%</strong></li>

　　<li><em>光環</em><span>:</span><strong>45%</strong></li>

　　<li><em>半條命</em><span>:</span><strong>23%</strong></li>

　　</ul>

感謝各位的閱讀！關于“CSS如何實現柱形圖效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！