首页用HTML和css写一个悼念汶川地震遇难同胞的网页

用HTML和css写一个悼念汶川地震遇难同胞的网页

时间: 2024-06-09 07:05:45 浏览: 163

非常感人的想法，我可以帮你写一个简单的HTML和CSS代码来展示悼念汶川地震遇难同胞的网页，如下所示： ```HTML <!DOCTYPE html> <html> <head> <title>悼念汶川地震遇难同胞</title> <style> body { font-family: Arial, sans-serif; background-color: #f2f2f2; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 20px; text-align: center; font-size: 30px; font-weight: bold; } main { margin: 20px; } h1 { font-size: 24px; font-weight: bold; color: #333; margin: 0 0 10px; } p { font-size: 18px; line-height: 1.5; color: #555; margin: 0 0 20px; } .img-container { margin: 0 auto; max-width: 600px; } img { display: block; margin: 0 auto; max-width: 100%; } .btn-container { text-align: center; } button { background-color: #333; color: #fff; padding: 10px 20px; border: none; border-radius: 5px; font-size: 18px; cursor: pointer; } button:hover { background-color: #555; } </style> </head> <body> <header>悼念汶川地震遇难同胞</header> <main> <h1>我们永远怀念那些离我们而去的人们</h1> <p>2008年5月12日，四川汶川发生了7.8级地震，造成了巨大的人员伤亡和财产损失。数以万计的同胞不幸遇难，他们的离去让我们深感痛惜和哀思。</p> <div class="img-container"> <img src="https://i.imgur.com/4WvLsIx.jpg" alt="汶川地震遇难同胞"> </div> <div class="btn-container"> <button>捐赠救灾</button> </div> </main> </body> </html> ``` 这个网页的主要内容包括一个标题 `悼念汶川地震遇难同胞`，一段文字介绍汶川地震的情况，一张图片表达我们对遇难同胞的哀悼，以及一个捐赠救灾的按钮。整个页面的颜色采用灰白色系，以表达对逝者的沉痛和悼念。

阅读全文