HTML实现圣诞树完整代码

雨点打透心脏的1/2处 2024-03-26 09:16 81阅读 0赞

好的，以下是 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>
      
      <div class="christmas-tree">
        
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
      </div>
    </body>
    </html>