小編給大家分享一下CSS實(shí)現(xiàn)柱形圖效果的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),紅橋企業(yè)網(wǎng)站建設(shè),紅橋品牌網(wǎng)站建設(shè),網(wǎng)站定制,紅橋網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,紅橋網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。CSS在處理排版之強(qiáng)大，沒有做不到，只有想不到。下面我們將一同實(shí)現(xiàn)一個(gè)柱狀圖。
先打好一個(gè)具體的框架。我們利用無(wú)序列表做整體，里面的東西我們根本選擇內(nèi)聯(lián)無(wú)素span，strong，em來(lái)填充。
解釋一下，ul里面的每一個(gè)li就代表我們要統(tǒng)計(jì)的內(nèi)容，span為柱身，em為統(tǒng)計(jì)項(xiàng)的名字，strong為統(tǒng)計(jì)數(shù)值。我們可以添加一些背景顏色來(lái)區(qū)分他們。
重慶分公司
重慶分公司
.chart {
list-style: none;
font-family: '宋體';
font-size: 14px;
border: 1px solid #ccc;
margin: 0;
padding: 5px;
background:#F2F1D7;
}
.chart li {
width:400px;
background:#DDF3FF;
}運(yùn)行代碼：
但怎樣把li弄成柱狀呢？我們首先把li弄成并排顯示，要達(dá)到這種效果，我們有兩個(gè)方法：1、把li的display變成inline，2、把li變成浮動(dòng)元素。估量一翻，選擇了后者，因?yàn)閮?nèi)聯(lián)元素的盒子模型是難以控制的，margin與padding的計(jì)算會(huì)變得很復(fù)雜。既然選擇后者，我們必須面對(duì)一個(gè)情況，就是浮動(dòng)溢出了。對(duì)策是父元素也變成浮動(dòng)元素。浮動(dòng)容器會(huì)向內(nèi)收縮，自適應(yīng)子元素的高度與寬度。也就是說(shuō)，我們專注于li的設(shè)計(jì)就可以了！為了讓li表現(xiàn)得像柱子， 我們讓它的高比寬長(zhǎng)很多，同時(shí)為了讓大家好辯認(rèn)每個(gè)li的范圍，我先給它們加上邊框！
.chart {
list-style: none;
font-family: '宋體';
font-size: 14px;
border: 1px solid #ccc;
margin: 0;
padding: 5px;
background:#F2F1D7;
float:left;
}
.chart li {
width:70px;
height:300px;
float:left;
background:#DDF3FF;
border:1px solid red;
}運(yùn)行代碼：
非法修改button的onclick事件
接著我們要差開li元素里面的內(nèi)容，由于它們都是內(nèi)聯(lián)元素，因此給他們?cè)O(shè)高與寬是沒有意義，我們得把他們偽裝成塊元素。這時(shí)它們就會(huì)各自獨(dú)占一行。由于我們把span中的冒號(hào)刪除了，里面為空，span就表現(xiàn)為不占空間，我們可以給它們?nèi)c(diǎn)東西進(jìn)去，我塞的是，當(dāng)然你們?cè)趖extarea中是看不到的，要利用火狐的查看元素功能才行。(你們自己可以查一下， ， ，?與?的區(qū)別！)
.chart {
list-style: none;
font-family: '宋體';
font-size: 14px;
border: 1px solid #ccc;
margin: 0;
padding: 5px;
background:#F2F1D7;
float:left;
}
.chart li {
width:70px;
height:300px;
float:left;
background:#DDF3FF;
border:1px solid red;
}
.chart li em ,
.chart li span ,
.chart li strong {
display:block;
}運(yùn)行代碼：
接著我們把柱子占的空間突現(xiàn)出來(lái)，并把相關(guān)的東西居中對(duì)齊一下。
.chart {
list-style: none;
font-family: '宋體';
font-size: 14px;
border: 1px solid #ccc;
margin: 0;
padding: 5px;
background:#F2F1D7;
float:left;
}
.chart li {
width:70px;
height:300px;
float:left;
background:#DDF3FF;
border:1px solid red;
}
.chart li em {
display:block;
height:20px;
text-align:center;
}
.chart li span {
display:block;
background:#F1FAFA;
height:260px;
}
.chart li strong {
display:block;
height:20px;
text-align:center;
}運(yùn)行代碼：
然后我們?yōu)閘i元素添加一張圖片，它就是傳說(shuō)的圓柱了，然后用span為作罩遮層，li所在項(xiàng)目的統(tǒng)計(jì)是多少，我們就露出多少，為了方便計(jì)算，我們把span的高度重設(shè)為100px，li的高度相應(yīng)改為140px。em與strong設(shè)置與li相同的背景顏色，遮住柱子的最上面與最下面。
.chart {
list-style: none;
font-family: '宋體';
font-size: 14px;
border: 1px solid #ccc;
margin: 0;
padding: 5px;
background:#F2F1D7;
float:left;
}
.chart li {
width:70px;
height:140px;
float:left;
border:1px solid red;
background:#DDF3FF url(http://images.cnblogs.com/cnblogs_com/rubylouvre/202680/o_pillar.gif) center center repeat-y;
}
.chart li em, .chart li span,.chart li strong {
display:block;
height:20px;
text-align:center;
}
.chart li em, .chart li strong{
background: #DDF3FF;
}
.chart li span {
height:100px;
}運(yùn)行代碼：
接著我們?cè)趕pan弄一張背景圖片，顏色與li元素的一樣，統(tǒng)計(jì)數(shù)字為多少，我們就向上移多少！為了方便，我們用內(nèi)聯(lián)樣式設(shè)置這個(gè)backgroundPositionY數(shù)值。最后去掉li元素的邊框便大功告成了！
.chart {
list-style: none;
font-family: '宋體';
font-size: 14px;
border: 1px solid #ccc;
margin: 0;
padding: 5px;
background:#F2F1D7;
float:left;
}
.chart li {
width:70px;
height:140px;
float:left;
background:#DDF3FF url(http://images.cnblogs.com/cnblogs_com/rubylouvre/202680/o_pillar.gif) center center repeat-y;
}
.chart li em, .chart li span,.chart li strong {
display:block;
height:20px;
text-align:center;
background: #DDF3FF;
}
.chart li span {
height:100px;
background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/202680/o_mask.jpg) no-repeat;
}
運(yùn)行代碼：
以上是CSS實(shí)現(xiàn)柱形圖效果的方法的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道！
