在這個圣誕季節里，不妨嘗試編寫一個彩色的圣誕樹網頁吧！下面是一份 HTML 代碼模板：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>彩色圣誕樹</title>
<style>
/* 樹干 */
.trunk {
width: 30px;
height: 50px;
background-color: brown;
margin: auto;
}
/* 樹葉 */
.leaves {
width: 280px;
height: 300px;
margin: auto;
}
.triangle {
width: 0;
height: 0;
border-left: 140px solid transparent;
border-right: 140px solid transparent;
border-bottom: 200px solid green;
position: absolute;
}
.half-one {
transform: rotate(45deg);
}
.half-two {
transform: rotate(-45deg);
}
.ornaments {
position: absolute;
}
</style>
</head>
<body>
<div class="trunk"></div>
<div class="leaves">
<div class="triangle half-one"></div>
<div class="triangle half-two"></div>
<div class="ornaments" style="left: 70px; top: 60px; color: red;">★</div>
<div class="ornaments" style="left: 150px; top: 120px; color: yellow;">★</div>
<div class="ornaments" style="left: 70px; top: 180px; color: blue;">★</div>
<div class="ornaments" style="left: 150px; top: 240px; color: pink;">★</div>
</div>
</body>
</html>代碼解釋：
代碼中的 .trunk 類設置了樹干的樣式，width: 30px;和height: 50px;分別為寬度和高度，background-color: brown;設置了背景顏色為棕色，margin: auto;居中對齊。
代碼中的 .leaves 類設置了樹葉的樣式，width: 280px;和height: 300px;分別為寬度和高度，margin: auto;居中對齊。
代碼中的 .triangle 類設置了三角形的樣式，width: 0;和height: 0;將寬度和高度都設為 0，border-left: 140px solid transparent;和border-right: 140px solid transparent;設置了左右兩邊的邊框為透明的，border-bottom: 200px solid green;設置了下邊的邊框為綠色的，position: absolute;絕對定位。
代碼中的 .half-one 和 .half-two 類將兩個三角形旋轉了 45 度和 -45 度，使它們成為了一個整體。
代碼中的 .ornaments 類設置了裝飾球的樣式，position: absolute;絕對定位，left:和top:分別設置了球距離左邊和頂部的距離，color:設置了球的顏色。
如果你想要改變樹的顏色或者裝飾球的數量和位置，可以直接修改代碼中的相應值，或者添加新的樣式。
上一篇vue對象賦值分析