一步一步教你實(shí)現(xiàn)純CSS的柱形圖

　　網(wǎng)教程 CSS在處理排版之強(qiáng)大，沒有做不到，只有想不到。下面我們將一同實(shí)現(xiàn)一個(gè)柱狀圖。先打好一個(gè)具體的框架。我們利用無序列表做整體，里面的東西我們根本選擇內(nèi)聯(lián)無素span，strong，em來填充。

<ul class="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>
提示：可修改后代碼再運(yùn)行!

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

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)