純CSS實(shí)現(xiàn)柱形圖效果的方法-創(chuàng)新互聯(lián)
純CSS實(shí)現(xiàn)柱形圖效果的方法？這個(gè)問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個(gè)問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！
創(chuàng)新互聯(lián)專注于貴定企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè),商城網(wǎng)站定制開發(fā)。貴定網(wǎng)站建設(shè)公司,為貴定等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站開發(fā)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)本篇文章給大家?guī)淼膬?nèi)容是介紹如何用純CSS實(shí)現(xiàn)柱形圖效果？（代碼示例）。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你們有所幫助。
我們都知道，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)爭(zhēng)</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里面的每一個(gè)li就代表我們要統(tǒng)計(jì)的內(nèi)容，span為柱身，em為統(tǒng)計(jì)項(xiàng)的名字，strong為統(tǒng)計(jì)數(shù)值。我們可以添加一些背景顏色來區(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)行代碼：
<style type="text/css">
.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;
}
</style>
<ul class="chart">
<li><em>使命召喚</em><span >: </span><strong>35%</strong></li>
<li><em>機(jī)器戰(zhàn)爭(zhēng)</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>
但怎樣把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)子元素的高度與寬度。也就是說，我們專注于li的設(shè)計(jì)就可以了！為了讓li表現(xiàn)得像柱子， 我們讓它的高比寬長很多，同時(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)行代碼：
<style type="text/css">
.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;
}
</style>
<script type="text/javascript">
</script>
<title>非法修改button的onclick事件</title>
</head>
<body>
<ul class="chart">
<li><em>使命召喚</em><span ></span><strong>35%</strong></li>
<li><em>機(jī)器戰(zhàn)爭(zhēng)</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>
接著我們要差開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)行代碼：
<style type="text/css">
.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;
}
</style>
<ul class="chart">
<li><em>使命召喚</em><span></span><strong>35%</strong></li>
<li><em>機(jī)器戰(zhàn)爭(zhēng)</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>
接著我們把柱子占的空間突現(xiàn)出來，并把相關(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)行代碼：
<style type="text/css">
.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;
}
</style>
<ul class="chart">
<li><em>使命召喚</em><span></span><strong>35%</strong></li>
<li><em>機(jī)器戰(zhàn)爭(zhēng)</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ōu)閘i元素添加一張圖片，它就是傳說的圓柱了，然后用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)行代碼：
<style type="text/css">
.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;
}
</style>
<ul class="chart">
<li><em>使命召喚</em><span></span><strong>35%</strong></li>
<li><em>機(jī)器戰(zhàn)爭(zhēng)</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>
接著我們?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;
}
<ul class="chart">
<li><em>使命召喚</em><span style="background-position: center -35px"></span><strong>35%</strong></li>
<li><em>機(jī)器戰(zhàn)爭(zhēng)</em><span style="background-position: center -40px"></span><strong>40%</strong></li>
<li><em>CS</em><span style="background-position: center -87px"></span><strong>87%</strong></li>
<li><em>光環(huán)</em><span style="background-position: center -45px"></span><strong>45%</strong></li>
<li><em>半條命</em><span style="background-position: center -23px"></span><strong>23%</strong></li>
</ul>運(yùn)行代碼：
<style type="text/css">
.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;
}
.chart li em, .chart li strong{
background: #DDF3FF;
}
.chart li span {
height:100px;
background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/202680/o_mask.jpg) no-repeat;
}
</style>
<ul class="chart">
<li><em>使命召喚</em><span style="background-position: center -35px"></span><strong>35%</strong></li>
<li><em>機(jī)器戰(zhàn)爭(zhēng)</em><span style="background-position: center -40px"></span><strong>40%</strong></li>
<li><em>CS</em><span style="background-position: center -87px"></span><strong>87%</strong></li>
<li><em>光環(huán)</em><span style="background-position: center -45px"></span><strong>45%</strong></li>
<li><em>半條命</em><span style="background-position: center -23px"></span><strong>23%</strong></li>
</ul>
感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)純CSS實(shí)現(xiàn)柱形圖效果的方法大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道。
分享題目：純CSS實(shí)現(xiàn)柱形圖效果的方法-創(chuàng)新互聯(lián)
轉(zhuǎn)載來源：http://www.chinadenli.net/article16/dhssdg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、網(wǎng)站制作、網(wǎng)站營銷、網(wǎng)站收錄、網(wǎng)站改版、手機(jī)網(wǎng)站建設(shè)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
- 網(wǎng)站制作加強(qiáng)視覺效果，進(jìn)步用戶體驗(yàn)越來越重要的作用！！網(wǎng)站logo在線制作 2023-11-01
- 本周流行的網(wǎng)頁設(shè)計(jì) 2014-05-24
- 租用香港jsp網(wǎng)站空間要留意哪些？這三點(diǎn)要看好 2023-07-05
- B2B案例研究證明CTA的權(quán)力 2016-08-12
- 如何正確優(yōu)化網(wǎng)站SEO標(biāo)題？SEO標(biāo)題的作用是什么？ 2013-09-17
- 必看的內(nèi)鏈優(yōu)化知識(shí) 2014-05-27
- 傷害網(wǎng)站seo的javascript技術(shù) 2020-07-24
- 做外貿(mào)網(wǎng)站推廣的9個(gè)技巧 2021-03-05
- 網(wǎng)頁設(shè)計(jì)中文本輸入框的參數(shù)說明 2021-06-07
- 網(wǎng)站頁面生成靜態(tài)的好處 2022-05-29
- 商家該如何在碎片化時(shí)代提升流量 2013-08-29
- 互聯(lián)網(wǎng)+時(shí)代企業(yè)為什么要建立網(wǎng)站 2018-04-16