CSS如何實(shí)現(xiàn)柱形圖效果

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

　　<ulclass="chart">

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

　　<li><em>機(jī)器戰(zhàn)爭</em><span>:</span><strong>40%</strong></li>

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

　　<li><em>光環(huán)</em><span>:</span><strong>45%</strong></li>

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

　　</ul>

　　解釋一下，ul里面的每一個li就代表我們要統(tǒng)計的內(nèi)容，span為柱身，em為統(tǒng)計項的名字，strong為統(tǒng)計數(shù)值。我們可以添加一些背景顏色來區(qū)分他們。

　　.chart{

　　list-style:none;

　　font-family:'宋體';

　　font-size:14px;

　　border:1pxsolid#ccc;

　　margin:0;

　　padding:5px;

　　background:#F2F1D7;

　　}

　　.chartli{

　　width:400px;

　　background:#DDF3FF;

　　}

　　運(yùn)行代碼：

　　<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>機(jī)器戰(zhàn)爭</em><span>:</span><strong>40%</strong></li>

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

　　<li><em>光環(huán)</em><span>:</span><strong>45%</strong></li>

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

　　</ul>

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