CSS實現(xiàn)柱形圖效果的方法-創(chuàng)新互聯(lián)

小編給大家分享一下CSS實現(xiàn)柱形圖效果的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),紅橋企業(yè)網(wǎng)站建設(shè),紅橋品牌網(wǎng)站建設(shè),網(wǎng)站定制,紅橋網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,紅橋網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

CSS在處理排版之強大，沒有做不到，只有想不到。下面我們將一同實現(xiàn)一個柱狀圖。

先打好一個具體的框架。我們利用無序列表做整體，里面的東西我們根本選擇內(nèi)聯(lián)無素span，strong，em來填充。

CSS實現(xiàn)柱形圖效果的方法

<ul class="chart">
      <li><em>使命召喚</em><span>: </span><strong>35%</strong></li>
      <li><em>機器戰(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: 1px solid #ccc;
     margin: 0;
     padding: 5px;
     background:#F2F1D7;
   }
 
   .chart li {
     width:400px;
     background:#DDF3FF;
   }

運行代碼：

<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>機器戰(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>

CSS實現(xiàn)柱形圖效果的方法

但怎樣把li弄成柱狀呢？我們首先把li弄成并排顯示，要達到這種效果，我們有兩個方法：1、把li的display變成inline，2、把li變成浮動元素。估量一翻，選擇了后者，因為內(nèi)聯(lián)元素的盒子模型是難以控制的，margin與padding的計算會變得很復(fù)雜。既然選擇后者，我們必須面對一個情況，就是浮動溢出了。對策是父元素也變成浮動元素。浮動容器會向內(nèi)收縮，自適應(yīng)子元素的高度與寬度。也就是說，我們專注于li的設(shè)計就可以了！為了讓li表現(xiàn)得像柱子，我們讓它的高比寬長很多，同時為了讓大家好辯認每個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;
}

運行代碼：

<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>機器戰(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>

CSS實現(xiàn)柱形圖效果的方法

接著我們要差開li元素里面的內(nèi)容，由于它們都是內(nèi)聯(lián)元素，因此給他們設(shè)高與寬是沒有意義，我們得把他們偽裝成塊元素。這時它們就會各自獨占一行。由于我們把span中的冒號刪除了，里面為空，span就表現(xiàn)為不占空間，我們可以給它們?nèi)c東西進去，我塞的是，當(dāng)然你們在textarea中是看不到的，要利用火狐的查看元素功能才行。(你們自己可以查一下，，，?與?的區(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;
}

運行代碼：

<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>機器戰(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>

CSS實現(xiàn)柱形圖效果的方法

接著我們把柱子占的空間突現(xiàn)出來，并把相關(guān)的東西居中對齊一下。

.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 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>機器戰(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>

CSS實現(xiàn)柱形圖效果的方法

然后我們?yōu)閘i元素添加一張圖片，它就是傳說的圓柱了，然后用span為作罩遮層，li所在項目的統(tǒng)計是多少，我們就露出多少，為了方便計算，我們把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;
    }

運行代碼：

<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>機器戰(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>

CSS實現(xiàn)柱形圖效果的方法

接著我們在span弄一張背景圖片，顏色與li元素的一樣，統(tǒng)計數(shù)字為多少，我們就向上移多少！為了方便，我們用內(nèi)聯(lián)樣式設(shè)置這個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>機器戰(zhàn)爭</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>

運行代碼：

<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>機器戰(zhàn)爭</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>

CSS實現(xiàn)柱形圖效果的方法

以上是CSS實現(xiàn)柱形圖效果的方法的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道！

分享標題：CSS實現(xiàn)柱形圖效果的方法-創(chuàng)新互聯(lián)
文章位置：http://www.rwnh.cn/article36/cehcsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計公司、標簽優(yōu)化、網(wǎng)站維護、靜態(tài)網(wǎng)站、ChatGPT、品牌網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

CSS實現(xiàn)柱形圖效果的方法-創(chuàng)新互聯(lián)