首页html实现一个圣诞树

html实现一个圣诞树

时间: 2023-12-18 08:04:24 浏览: 90

html圣诞树.html

```html <!DOCTYPE html> <html> <head> <style> /* 树的主干样式 */ .tree-trunk { width: 20px; height: 100px; background: brown; position: absolute; bottom: 0; left: 50%; margin-left: -10px; } /* 圣诞树叶子样式 */ .tree-leaf { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; position: absolute; bottom: 20px; } /* 圣诞树上的卡片样式 */ .tree-card { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); width: 60px; text-align: center; } </style> </head> <body> <div class="tree-trunk"></div> <div class="tree-leaf" style="border-bottom: 10px solid green; left: 50%; transform: translateX(-50%);"></div> <div class="tree-leaf" style="border-bottom: 10px solid green; left: 45%; transform: translateX(-50%) rotate(30deg);"></div> <div class="tree-leaf" style="border-bottom: 10px solid green; left: 55%; transform: translateX(-50%) rotate(-30deg);"></div> <div class="tree-card">John</div> </body> </html> ```

阅读全文