題目描述

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

效果圖如下：

代碼示例：

<style>
      body {
        display: flex; /*彈性盒模型容器*/
        align-items: flex-end; /*子元素對(duì)齊底部*/
        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>

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

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

總結(jié)

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

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