HTML实现圣诞树完整代码

好的，以下是 HTML 实现圣诞树的完整代码：<!DOCTYPE html><html><head><style>/* 圣诞树的样式 */.christmas-tree {height: 300px; /* 树的高度 */width: 200px; /* 树的宽度 */back...

文章共996字 · 阅读需要大约4分钟

一键AI生成摘要，助你高效阅读

问答

三更寒天

5243人浏览 · 2022-12-24 21:08:11

三更寒天 · 2022-12-24 21:08:11 发布

好的，以下是 HTML 实现圣诞树的完整代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 圣诞树的样式 */
    .christmas-tree {
      height: 300px; /* 树的高度 */
      width: 200px; /* 树的宽度 */
      background-color: green; /* 树的颜色 */
      border-radius: 0 0 50% 50%; /* 使树形成三角形 */
      box-shadow: 0 0 20px #333; /* 给树添加阴影效果 */
    }
    /* 圣诞树的圆圈装饰物的样式 */
    .circle {
      height: 25px; /* 圆圈的高度 */
      width: 25px; /* 圆圈的宽度 */
      border-radius: 50%; /* 使圆圈成为圆形 */
      background-color: red; /* 圆圈的颜色 */
      display: inline-block; /* 使圆圈可以横向排列 */
      margin: 2px; /* 圆圈之间的间距 */
    }
    /* 圣诞树的星星装饰物的样式 */
    .star {
      height: 20px; /* 星星的高度 */
      width: 20px; /* 星星的宽度 */
      background-color: yellow; /* 星星的颜色 */
      border-radius: 50%; /* 使星星成为圆形 */
      display: inline-block; /* 使星星可以横向排列 */
      margin: 2px; /* 星星之间的间距 */
    }
  </style>
</head>
<body>
  <!-- 圣诞树的HTML代码 -->
  <div class="christmas-tree">
    <!-- 圣诞树的圆圈装饰物的HTML代码 -->
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <!-- 圣诞树的星星装饰物的HTML代码 -->
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
  </div>
</body>
</html>