溫度計是一種常見的測量溫度的工具，它可以讓我們直觀地了解當前的溫度情況。在網頁中，我們也可以通過使用CSS來制作出一個類似于溫度計的效果。

thermometer {
position: relative;
width: 60px;
height: 200px;
background-color: #f3f3f3;
border-radius: 10px;
margin: 20px auto;
}
mercury {
position: absolute;
bottom: 0;
width: 100%;
height: 60%;
background-color: #ff3300;
border-radius: 10px;
}
mercury:before {
content: "";
position: absolute;
top: -5px;
left: -20px;
width: 60px;
height: 25px;
background-color: white;
}
mercury:after {
content: "";
position: absolute;
bottom: -10px;
left: -10px;
width: 40px;
height: 15px;
background-color: white;
}
degree {
position: absolute;
top: 10px;
left: 5px;
font-size: 20px;
font-weight: bold;
color: #333;
}
degree span {
font-size: 12px;
font-weight: normal;
}

以上是一個簡單的溫度計的CSS代碼，其中thermometer代表整個溫度計的樣式，mercury代表溫度計中的液柱，degree代表溫度計表頭中的數字。通過設置它們的具體屬性，我們就可以制作出一個類似于溫度計的效果。

0℃

最后，我們只需要在HTML中嵌入以上CSS代碼，并使用對應的HTML標簽來表示溫度計，就可以輕易地在網頁中制作出一個簡單而有趣的溫度計效果。