首页圣诞树代码大全html

圣诞树代码大全html

时间: 2023-07-25 19:47:59 浏览: 112

以下是一个简单的 HTML 圣诞树代码示例： ```html <!DOCTYPE html> <html> <head> <title>圣诞树</title> <style type="text/css"> body { background-color: #002B36; } .tree { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; } .tree:before { content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 0; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 200px solid #008000; transform: translateX(-50%); } .tree:after { content: ""; position: absolute; top: 40%; left: 50%; width: 80px; height: 80px; background-color: #FFD700; border-radius: 50%; transform: translate(-50%, -50%); } .star { position: absolute; top: 10%; left: 50%; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 70px solid #FFD700; transform: translateX(-50%); } </style> </head> <body> <div class="tree"></div> <div class="star"></div> </body> </html> ``` 这个代码会在页面中创建一个绿色的圣诞树和一个黄色的星星。你可以根据需要调整 CSS 样式以改变它们的大小和位置。

阅读全文