HTML实现圣诞树完整代码

好的,以下是 HTML 实现圣诞树的完整代码:

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>

你可能感兴趣的:(html,css,css3,前端,javascript)