欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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

純CSS實現(xiàn)柱形圖效果的方法？這個問題可能是我們?nèi)粘W習或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

創(chuàng)新互聯(lián)專注于貴定企業(yè)網(wǎng)站建設,成都響應式網(wǎng)站建設,商城網(wǎng)站定制開發(fā)。貴定網(wǎng)站建設公司,為貴定等地區(qū)提供建站服務。全流程定制網(wǎng)站開發(fā)，專業(yè)設計，全程項目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務

                                                         本篇文章給大家?guī)淼膬?nèi)容是介紹如何用純CSS實現(xiàn)柱形圖效果？（代碼示例）。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有所幫助。

我們都知道，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的計算會變得很復雜。既然選擇后者，我們必須面對一個情況，就是浮動溢出了。

對策就是父元素也變成浮動元素。浮動容器會向內(nèi)收縮，自適應子元素的高度與寬度。也就是說，我們專注于li的設計就可以了！為了讓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)元素，因此給他們設高與寬是沒有意義，我們得把他們偽裝成塊元素。這時它們就會各自獨占一行。

由于我們把span中的冒號刪除了，里面為空，span就表現(xiàn)為不占空間，我們可以給它們?nèi)c東西進去，我塞的是，當然你們在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的高度重設為100px，li的高度相應改為140px。em與strong設置與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)樣式設置這個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)柱形圖效果的方法

感謝各位的閱讀！看完上述內(nèi)容，你們對純CSS實現(xiàn)柱形圖效果的方法大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道。

分享題目：純CSS實現(xiàn)柱形圖效果的方法-創(chuàng)新互聯(lián)
轉(zhuǎn)載來源：http://chinadenli.net/article16/dhssdg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供App設計、網(wǎng)站制作、網(wǎng)站營銷、網(wǎng)站收錄、網(wǎng)站改版、手機網(wǎng)站建設

廣告

聲明：本網(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)

成都seo排名網(wǎng)站優(yōu)化