首页圣诞树代码编程HTML

圣诞树代码编程HTML

时间: 2025-01-03 13:11:43 浏览: 8

### HTML Christmas Tree Code Example Below is an example of how to create a simple Christmas tree using HTML and CSS: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Christmas Tree</title> <style> .tree { margin: auto; width: fit-content; } .line { text-align: center; font-size: 0; /* Remove spaces between inline-block elements */ } .star { color: yellow; font-size: 2rem; } .branch { display: inline-block; color: green; font-size: 1.5rem; } .trunk { color: brown; font-size: 1rem; margin-top: -0.7rem; } </style> </head> <body> <div class="tree"> <div class="line"><span class="star">*</span></div> <div class="line"> <span class="branch">/</span><span class="branch">\</span> </div> <div class="line"> <span class="branch">/</span><span class="branch">|</span><span class="branch">\</span> </div> <div class="line"> <span class="branch">/</span><span class="branch">/</span><span class="branch">\</span><span class="branch">\</span> </div> <div class="line"> <span class="branch">/</span><span class="branch">/</span><span class="branch">|</span><span class="branch">\</span><span class="branch">\</span> </div> <div class="line trunk"> <span>|</span><span>|</span> </div> </div> </body> </html> ``` This code creates a small ASCII-art style Christmas tree centered on the page with a star at the top and a trunk below it.

阅读全文