CSS電池模塊是一種可以在網頁上展示電池的狀態的UI組件。它主要由HTML和CSS兩部分構成。

在HTML中，我們需要創建一個包含幾個div元素的容器，這些div元素代表電池的各個部分，包括電池身體和兩個電極。在CSS中，我們需要根據電池的狀態設置背景顏色和高度，以及調整電極的位置。

.battery-container {
width: 50px;
height: 25px;
background-color: #eee;
position: relative;
border-radius: 5px;
}
.battery-level {
height: 100%;
background-color: #4CAF50;
border-radius: 5px;
}
.battery-top {
position: absolute;
width: 10px;
height: 5px;
top: 0;
left: 50%;
transform: translateX(-50%);
background-color: #eee;
}
.battery-bottom {
position: absolute;
width: 30px;
height: 10px;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
background-color: #eee;
}
/* 當電池電量低于20%時，將電池電量的背景色改為紅色 */
.battery-container.low .battery-level {
background-color: #f44336;
}

在CSS中，我們還可以設置狀態類別來修改電池的顏色和高度，比如電池電量低于20%時，我們可以添加一個.low類別來改變電池背景色。此外，我們也可以通過JavaScript來動態地修改或更新電池的狀態。

總的來說，CSS電池模塊提供了一種簡單但實用的方法來展示電池在網頁上的狀態。它可以幫助用戶更好地管理他們的設備，并提供了視覺上的反饋。