使用前端代码，写个圣诞树

好的，这里是一个使用 HTML 和 CSS 绘制圣诞树的例子：

<!-- HTML 部分 -->
<div id="christmas-tree">
  <div class="star"></div>
  <div class="trunk"></div>
  <div class="layer layer1">
    <div class="ornament"></div>
    <div class="ornament"></div>
    <div class="ornament"></div>
  </div>
  <div class="layer layer2">
    <div class="ornament"></div>
    <div class="ornament"></div>
    <div class="ornament"></div>
  </div>
  <div class="layer layer3">
    <div class="ornament"></div>
    <div class="ornament"></div>
    <div class="ornament"></div>
  </div>
</div>

/* CSS 部分 */
#christmas-tree {
  position: relative;
  width: 200px;
  height: 400px;
  margin: 0 auto;
}

.star {
  position: absolute;
  top: -50px;
  left: 100px;
  width: 50px;
  height: 50px;
  background-color: yellow;
  border-radius: 50%;
}

.trunk {
  position: absolute;
  bottom: 0;
  left: calc(50% - 25px);
  width: 50px;
  height: 100px;
  background-color: brown;
}

.layer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: calc(100% / 3);
  border-radius: 0 0 50% 50%;
  overflow: hidden;
}

.layer1 {
  background-color: green;
}

.layer2 {
  background-color: green;
  bottom: calc(100% / 3);
}

.layer3 {
  background-color: green;
  bottom: calc(100% / 3 * 2);
}

.ornament {
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: red;
}

.ornament:nth-child(1) {
  top: 10px;
  left: 10px;
}

.ornament:nth-child(2) {
  top: 10px;
  right: 10px;
}

.ornament:nth-child(3) {
  bottom: 10px;
  left: 10px;
}

这样就可以在浏览器中看到一棵有三层绿色的圣诞树，上面有三个红色的圣诞球，并且有一个黄色的星星和一个