首页用html 写圣诞树

用html 写圣诞树

时间: 2023-12-25 18:03:03 浏览: 70

以下是一个简单的HTML代码，可以用来制作一个圣诞树： ```html <!DOCTYPE html> <html> <head> <title>圣诞树</title> <style> body { background-color: #1a1a1a; } .tree { position: relative; margin: 0 auto; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid green; } .tree:before { content: ""; position: absolute; top: -50px; left: -50px; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid green; } .tree:after { content: ""; position: absolute; top: -100px; left: -100px; width: 0; height: 0; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 200px solid green; } .star { position: absolute; top: -70px; left: -15px; width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 60px solid yellow; transform: rotate(35deg); } </style> </head> <body> <div class="tree"></div> <div class="star"></div> </body> </html> ``` 这段代码使用了HTML和CSS来创建一个简单的圣诞树，其中`.tree`类定义了树的形状，`.star`类定义了树顶的星星。你可以将这段代码复制到一个HTML文件中并在浏览器中打开它来查看效果。

阅读全文