首页用web前端写一首古诗咏柳，带注释

用web前端写一首古诗咏柳，带注释

时间: 2024-09-18 18:01:55 浏览: 123

当然可以，这里为您展示一首用Web前端HTML、CSS和JavaScript简单创作的古诗《咏柳》，并附上一些基本的注释： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>咏柳</title> <style> /* 注释：设置页面背景为淡绿色，增加古风 */ body { background-color: #cfe6b3; font-family: '宋体', sans-serif; /* 选择一款适合古诗词的字体 */ } .poem-container { margin: auto; padding: 20px; border: 1px solid #ccc; max-width: 600px; text-align: center; } .verse { margin-bottom: 20px; } .line { color: #333; } .line span { font-weight: bold; /* 加粗关键字 */ } </style> </head> <body> <div class="poem-container"> <h1 class="title">咏柳</h1> <div class="verse"> <p class="line">碧玉妆成一树高，<span class="keyword">万条</span>垂下绿丝绦。</p> <p class="line">不知细叶谁裁出，<span class="keyword">二月</span>春风似剪刀。</p> </div> </div>  <script> // 当鼠标悬停在关键字上时，改变文本颜色 const keywords = document.querySelectorAll('.keyword'); keywords.forEach(key => { key.addEventListener('mouseover', () => { key.style.color = 'red'; }); key.addEventListener('mouseout', () => { key.style.color = '#333'; }); }); </script> </body> </html> ``` 这首诗通过简单的HTML结构呈现，CSS用于美化样式，尤其是加粗关键字部分，以及给整个页面添加古风背景。JavaScript则负责当鼠标悬停在“万条”和“二月”这两个关键字上时改变它们的颜色，以增加互动性。

阅读全文