2. 程式人生 > >前端基礎學習-CSS實現柱形圖

前端基礎學習-CSS實現柱形圖

阿新 • • 發佈：2019-04-19
高度 表現 技術 分享圖片 光環 很多 pla gin lin

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

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

技術分享圖片

   <ul class="chart">
      <li><em>使命召喚</em><span>: </span><strong>35%</strong></li>
      <li><em>機器戰爭</em><span>: </span><strong>40%</strong></li>
      <li><em>CS</em><span>: </span><strong>87%</strong></li>
      <li><em>光環</em><span>: </span><strong>45%</strong></li>
      <li><em>半條命</em><span>: </span><strong>23%</strong></li>
    </ul>

解釋一下，ul裏面的每一個li就代表我們要統計的內容，span為柱身，em為統計項的名字，strong為統計數值。我們可以添加一些背景顏色來區分他們。

.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>機器戰爭</em><span >: </span><strong>40%</strong></li>
      <li><em>CS</em><span >: </span><strong>87%</strong></li>
      <li><em>光環</em><span >: </span><strong>45%</strong></li>
      <li><em>半條命</em><span >: </span><strong>23%</strong></li>
    </ul>

技術分享圖片

但怎樣把li弄成柱狀呢？我們首先把li弄成並排顯示，要達到這種效果，我們有兩個方法：1、把li的display變成inline，2、把li變成浮動元素。估量一翻，選擇了後者，因為內聯元素的盒子模型是難以控制的，margin與padding的計算會變得很復雜。既然選擇後者，我們必須面對一個情況，就是浮動溢出了。對策是父元素也變成浮動元素。浮動容器會向內收縮，自適應子元素的高度與寬度。也就是說，我們專註於li的設計就可以了！為了讓li表現得像柱子， 我們讓它的高比寬長很多，同時為了讓大家好辯認每個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>機器戰爭</em><span ></span><strong>40%</strong></li>
      <li><em>CS</em><span ></span><strong>87%</strong></li>
      <li><em>光環</em><span ></span><strong>45%</strong></li>
      <li><em>半條命</em><span ></span><strong>23%</strong></li>
    </ul>

技術分享圖片

接著我們要差開li元素裏面的內容，由於它們都是內聯元素，因此給他們設高與寬是沒有意義，我們得把他們偽裝成塊元素。這時它們就會各自獨占一行。由於我們把span中的冒號刪除了，裏面為空，span就表現為不占空間，我們可以給它們塞點東西進去，我塞的是，當然你們在textarea中是看不到的，要利用火狐的查看元素功能才行。(你們自己可以查一下， ， ， 與 的區別！)

.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>機器戰爭</em><span></span><strong>40%</strong></li>
      <li><em>CS</em><span></span><strong>87%</strong></li>
      <li><em>光環</em><span></span><strong>45%</strong></li>
      <li><em>半條命</em><span></span><strong>23%</strong></li>
    </ul>

技術分享圖片

接著我們把柱子占的空間突現出來，並把相關的東西居中對齊一下。

.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>機器戰爭</em><span></span><strong>40%</strong></li>
      <li><em>CS</em><span></span><strong>87%</strong></li>
      <li><em>光環</em><span></span><strong>45%</strong></li>
      <li><em>半條命</em><span></span><strong>23%</strong></li>
    </ul>

技術分享圖片

然後我們為li元素添加一張圖片，它就是傳說的圓柱了，然後用span為作罩遮層，li所在項目的統計是多少，我們就露出多少，為了方便計算，我們把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>機器戰爭</em><span></span><strong>40%</strong></li>
      <li><em>CS</em><span></span><strong>87%</strong></li>
      <li><em>光環</em><span></span><strong>45%</strong></li>
      <li><em>半條命</em><span></span><strong>23%</strong></li>
    </ul>

技術分享圖片

接著我們在span弄一張背景圖片，顏色與li元素的一樣，統計數字為多少，我們就向上移多少！為了方便，我們用內聯樣式設置這個backgroundPositionY數值。最後去掉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>機器戰爭</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>光環</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>機器戰爭</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>光環</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實現柱形圖

相關推薦

前端基礎學習-CSS實現柱形圖

高度 表現 技術 分享圖片 光環 很多 pla gin lin CSS在處理排版之強大，沒有做不到，只有想不到。下面我們將一同實現一個柱狀圖。 先打好一個具體的框架。我們利用無序列表做整體，裏面的東西我們根本選擇內聯無素span，strong，em來填充。 <

前端基礎學習-css實現波浪線及立方體

png posit sla fin relative lis 平移 isp repeat 這裏是利用linear-gradient來實現，也就是畫圓，然後利用底色來遮住部分圓；利用css3屬性perspective加旋轉實現立方體 1.css實現波浪線 html <

前端基礎學習-css文字顏色漸變的3種實現

100% dom ges rgba 使用 back indent bold boot 在web前端開發過程中，UI設計師經常會設計一些帶漸變文字的設計圖，在以前我們只能用png的圖片來代替文字，今天可以實現使用純CSS實現漸變文字了。下面就介紹3中實現方式供大家參考！ 基礎

前端基礎學習css

前端基礎學習css一、偽類anchor用於控制鏈接效果a:link (沒有訪問過的鏈接)，定義鏈接的常規狀態a:hover(鼠標放在鏈接上的狀態)，用於控制顯示效果 （常用）a:visited(訪問過的鏈接) ，能清楚判斷訪問過的鏈接a:active(在鼠標按下時的狀態)例子：Title.{

前端基礎學習-CSS表頭固定

格子 最大 ast 負責 pad 眼睛 orien 精簡 padding 純CSS實現表頭固定之所以難，主要在兩點。一是占有最大市場份額的IE6不支持position:fixed。另一個，是人們想破頭都想在一起表格中實現這種效果。不過外國真的人用純CSS實現了這種效果，動用

前端基礎學習-css如何保持div等高寬比

基礎 前端基礎 響應 absolut 通過 ack wrapper strong block 那麽css如何實現高度height隨寬度width變化保持比例不變呢？即給定可變寬度的元素，它將確保其高度以響應的方式保持成比例(即，其寬度與高度的比率保持恒定)。 下面以高寬 2

html css 前端基礎 學習方法及經驗分享

編譯 安裝 切圖 開發 如果 積累 推薦 前端 集成 前言： 　　入園第一天，想分享一點兒前端基礎html css 的學習方法和一些經驗給熱愛前端，但是不知道從哪兒開始，依舊有些迷茫的新手朋友們。當然，適合每個人的學習方式不同，以下所講的僅供參考。 　　一、關於基礎語法 　

利用echarts highcharts 實現自定義地圖 關系圖效果 側邊3D柱形圖餅圖散點圖

技術 ges 散點圖 chart blog 餅圖 git 分享 charts github 地址： https://https://github.com/Gengshaoxuan/medataMap github 地址： https://https://github.c

python學習_day52_前端基礎之CSS布局3

兩個 表示 sans ucid grand -i 參照物 原始的 doctype 一、定位屬性position 1、相對定位relative 　　相對定位是相對於該元素在文檔流中的原始位置，即以自己原始位置為參照物。有趣的是，即使設定了元素的相對定位以及偏移值，元素還占有著

前端基礎學習筆記 CSS選擇器

選擇器 標籤選擇器 通過標籤名字選擇 id選擇器 通過id名字選擇標籤，id名唯一。 命名規則： 1、見名知意，看到名字就知道這個標籤的一個作用。 2、不能用拼音，不要用中文，也不能數字開頭，也不要用特殊符號。 3、建議英文小寫開頭。 4、-符號連詞 _（不建議使

前端基礎學習之CSS選擇器

CSS基礎之選擇器 派生選擇器 通過元素在其位置的上下文關係來定義樣式，使標記更加簡潔 派生選擇器允許你根據文件的上下文關係來定義某個標籤的樣式，通過合理的使用派生選擇器，可以是Html程式碼更加的簡潔 程式碼示例： li strong {

Echarts 圖表外掛學習（3）-- 給柱形圖的每個柱子設定不同顏色

1.實現的效果 2.引用Echarts 本地：<script src="../lib-v3/echarts/echarts.min.js"></script> 線上：<script src="http://echarts.baidu.c

C# WinForm開發系列之c# 通過.net自帶的chart控制元件繪製餅圖,柱形圖和折線圖的基礎使用和擴充套件

一.需要實現的目標是： 1.將資料繫結到pie的後臺資料中，自動生成餅圖。 2.生成的餅圖有詳細文字的說明。 1.設定chart1的屬性Legends中預設的Legend1的Enable為false； 如圖1所示： 圖1 2.設定Series的ChartT

Echarts學習之十：series-bar柱形圖詳解

mytextStyle={ color:"#333", //文字顏色 fontStyle:"normal", //italic斜體 oblique傾斜 fontWeight:"normal",

java實現各種資料統計圖（柱形圖，餅圖，折線圖）

最近在做資料探勘的課程設計，需要將資料分析的結果很直觀的展現給使用者，這就要用到資料統計圖，要實現這個功能就需要幾個第三方包了： 1.       jfreechart-1.0.13.jar 2.       jcommon-1.0.16.jar 3.       gnuj

前端基礎之CSS

strong 解耦 技術分享 查找 lan span htm src body CSS：對html標簽進行批量渲染的，一般分兩步 1、進行查找標簽 2、操作標簽； 1、查找標簽： 2、操作標簽： css樣式層疊的引入方式： 1、行內引入：只能對單一標簽進行CSS

d3 畫簡單的柱形圖

pen oca func vba head 高度 turn cti ret <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>testD3-3

SQL-Oracle內實現柱形圖式的效果

alt his 出現 elsif 次數 字符 利用 () dual 在SQL SERVER內有一個函數replicate()可以實現柱形圖效果，本質上是利用字符重復出現的次數來控制柱形圖的長短，效果如圖： 如果要在Oracle內實現相同的效果，則需要自己寫一個函數： CR

柱形圖，餅狀圖JavaScript

column 註意 文件 label max number span item pointf <script type="text/javascript"> $(function () { $(‘#container_2‘).highcharts({

在Echarts 柱形圖的單擊事件中寫入自定義的參數

cnblogs img ges == innerhtml .com echart 通過 code