首页圣诞树html网页代码手机端

圣诞树html网页代码手机端

时间: 2024-12-26 18:11:05 浏览: 4

创建一个简单的圣诞树HTML代码并使其适应移动端，你可以使用CSS媒体查询来调整样式。以下是一个基本示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f5f5f5; } .christmas-tree { width: 300px; height: 400px; position: relative; } /* 手机端样式 */ @media only screen and (max-width: 600px) { .christmas-tree { width: 200px; height: auto; } } .triangle { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 150px solid transparent; border-right: 150px solid transparent; border-bottom: 200px solid green; } .lights { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 200px; height: 5px; background-color: yellow; } </style> </head> <body> <div class="christmas-tree"> <div class="triangle"></div> <div class="lights"></div> </div> </body> </html> ``` 在这个例子中，`.triangle`用于创建三角形形状的树冠，`.lights`模拟灯饰。在手机端的媒体查询里，我们改变了宽度和高度比例使得在小屏幕设备上看起来更适配。

阅读全文