條形圖是數據可視化中常見的一種形式，在網頁設計中也會使用到。HTML和CSS是構建條形圖的主要技術，下面我們就來介紹一下如何使用HTML和CSS制作一幅簡單的條形圖。

<div class="chart">
<div class="bar" style="height: 30px; width: 80%;"></div>
<div class="bar" style="height: 40px; width: 70%;"></div>
<div class="bar" style="height: 50px; width: 60%;"></div>
<div class="bar" style="height: 60px; width: 50%;"></div>
<div class="bar" style="height: 70px; width: 40%;"></div>
</div>

上面的代碼中，我們使用了一個class為“chart”的div來包含所有的條形。每一個條形都是一個class為“bar”的div，我們為每一個條形設置了高度和寬度，其中高度表示數據的大小，寬度按比例表示數據的對比。

.chart {
display: flex;
justify-content: space-between;
align-items: flex-end;
height: 300px;
margin: 0 auto;
width: 80%;
}
.bar {
background-color: #7EBDC2;
border-radius: 5px;
margin: 0 10px;
transition: all 0.3s;
}
.bar:hover {
background-color: #000;
}

上面的CSS代碼中，我們使用了flex布局來將所有的條形排列在一行中。設置了對齊方式為垂直居低，以便將所有的數據都放在x軸的同一基準線上。另外我們還為每一個條形設置了圓角和過渡效果，并且在鼠標懸浮在條形上時，將其背景色變為黑色。

完成上述代碼后，我們就可以得到一個簡單的條形圖了。當然，這只是入門級別的制作方法，實際制作時還需要考慮更多的細節問題，如適應不同分辨率的設備、響應式布局、動態加載數據等。希望本文能夠為大家提供一些幫助和啟示。