題目描述

請使用CSS方法實現(xiàn)下圖所示的條形圖。從左到右的條形分別記為A,B,C,D,E。A的高度為30%，顏色為#f00；B的高度為80%，顏色為#ddd；C的高度為70%，顏色為#0fd；D的高度為60%，顏色為#ff0；E的高度為90%，顏色為#234，每個條形之間的距離可以任意設置（可以考慮使用CSS3新屬性來實現(xiàn)）。

效果圖如下：

代碼示例：

<style>
      body {
        display: flex; /*彈性盒模型容器*/
        align-items: flex-end; /*子元素對齊底部*/
        justify-content: space-around;
         320px;
        height: 300px;
        border-left: 1px solid black;
        border-bottom: 1px solid gray;
      }
      div {
         30px;
        height: 200px;
      }
      div:nth-child(1) {
        height: 30%;
        background-color: #f00;
      }
      div:nth-child(2) {
        height: 80%;
        background-color: #ddd;
      }
      div:nth-child(3) {
        height: 70%;
        background-color: #0fd;
      }
      div:nth-child(4) {
        height: 60%;
        background-color: #ff0;
      }
      div:nth-child(5) {
        height: 90%;
        background-color: #0ff;
      }
    </style>

博客的價值在于傳播，分享，交互，歡迎大家對我的文章發(fā)表評論意見。本人持求同存異的價值觀，只要意見就事論事，本人不會刪除你的評論。但不能保證被博客園刪除、技術處理等，對此表示無能為力。

評論區(qū)內(nèi)容不限于文章內(nèi)容，但需要準守博客園評論規(guī)定。

總結

以上是生活随笔為你收集整理的使用不同的CSS方法绘制条形统计图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。