首页HTML实现圣诞树完整代码

HTML实现圣诞树完整代码

时间: 2023-03-12 12:05:47 浏览: 169

好的，以下是 HTML 实现圣诞树的完整代码： ```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> ```

阅读全文