首页html圣诞树代码带人名

html圣诞树代码带人名

时间: 2024-12-24 22:14:26 浏览: 6

HTML创建一个带有人名的圣诞树通常涉及使用`<div>`、`<span>`等元素以及CSS样式来模拟一棵装饰过的圣诞树，并通过文本或JavaScript动态插入人的名字。以下是一个简单的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .tree { width: 200px; height: 200px; position: relative; } .trunk { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 70px; background-color: #6c7a89; color: white; font-size: 30px; text-align: center; } .decorations { position: absolute; top: calc(50% - 40px); left: calc(50% - 40px); width: 80px; height: 80px; border-radius: 50%; background-color: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } .name { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); font-size: 24px; } </style> </head> <body> <div class="tree"> <div class="trunk">圣诞快乐!</div> <div class="decorations" style="transform: rotate(45deg);"></div> <div class="decorations" style="transform: rotate(-45deg);"></div> <div class="name" id="personName">[这里输入名字]</div> </body> </html> ``` 要在实际页面上显示人名，你可以通过JavaScript更改`<span id="personName">`内的文本，例如： ```javascript document.getElementById('personName').innerText = "张三"; ``` 替换"[这里输入名字]"处为你想要显示的人名。

阅读全文