首页圣诞树html源代码

圣诞树html源代码

时间: 2023-12-26 11:01:51 浏览: 158

<!DOCTYPE html> <html> <head> <title>圣诞树</title> <style> .tree { text-align: center; } .trunk { width: 10px; height: 50px; background-color: brown; margin: 0 auto; } .leaves { width: 200px; height: 200px; background-color: green; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); margin: 0 auto; position: relative; } .star { width: 20px; height: 20px; background-color: yellow; clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 61%, 79% 100%, 50% 75%, 21% 100%, 31% 61%, 0% 38%, 37% 38%); position: absolute; top: -30px; left: 90px; } .light { position: absolute; } </style> </head> <body> <div class="tree"> <div class="trunk"></div> <div class="leaves"> <div class="star"></div> <img class="light" src="light1.png" style="top: 20px; left: 80px;"> <img class="light" src="light2.png" style="top: 50px; left: 120px;"> <img class="light" src="light3.png" style="top: 90px; left: 60px;"> </div> </div> </body> </html> 这是一个使用HTML和CSS制作的简单的圣诞树，包括树干、树叶、星星和彩灯。树干和树叶使用div元素和CSS样式来创建，星星和彩灯则使用CSS的伪元素或者图片元素来实现。可以通过更改CSS样式的参数来改变树的尺寸和颜色，也可以添加动画效果来使圣诞树更加生动。

阅读全文