用 HTML5 代码打造梦幻圣诞节页面，附完整示例！

以下是一个简单的基于 HTML5 和 CSS 实现的圣诞节主题页面代码示例： ```html <!DOCTYPE html> <html> <head> <style> body { background-color: #333; color: #fff; font-family: Arial, sans-serif; } h1 { text-align: center; color: #ff0000; } .christmas-tree { width: 0; height: 0; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 200px solid green; position: relative; margin: 0 auto; } .christmas-tree:before { content: ""; width: 0; height: 0; border-left: 70px solid transparent; border-right: 70px solid transparent; border-bottom: 140px solid #FFD700; position: absolute; top: 60px; left: -70px; } .christmas-tree:after { content: ""; width: 0; height: 0; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 80px solid #FF4500; position: absolute; top: 120px; left: -40px; } .ornament { width: 30px; height: 30px; border-radius: 50%; background-color: red; position: absolute; top: 50px; left: 80px; } .ornament:nth-child(2) { top: 100px; left: 40px; background-color: gold; } .ornament:nth-child(3) { top: 150px; left: 100px; background-color: blue; } </style> </head> <body> <h1>圣诞节快乐！</h1> <div class="christmas-tree"></div> <div class="ornament"></div> <div class="ornament"></div> <div class="ornament"></div> </body> </html> ``` 这段代码会显示一个简单的圣诞树图形和一些装饰球。你可以根据自己的需求进一步修改和美化。 ######[AI写代码神器 | 623点数解答 | 2024-11-06 16:07:23]

服务商

更多选项

快捷项

自定义