首页把这两个代码融合到一起用html实现

把这两个代码融合到一起用html实现

时间: 2024-01-27 19:03:37 浏览: 24

好的，请看下面的HTML代码，它将上面的HTML和CSS代码整合在一起实现了网页版贺卡的效果： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网页版贺卡</title> <style> .card { width: 600px; height: 400px; margin: 0 auto; border: 1px solid #ccc; box-shadow: 0px 0px 10px #ccc; padding: 20px; text-align: center; font-family: Arial, Helvetica, sans-serif; } h1 { font-size: 36px; font-weight: bold; color: #f00; margin-bottom: 20px; } p { font-size: 24px; color: #333; margin-bottom: 40px; } img { max-width: 100%; height: auto; } </style> </head> <body> <div class="card"> <h1>祝福语</h1> <p>祝愿您新春快乐，阖家幸福，万事如意！</p> <img src="image.jpg" alt="图片"> </div> </body> </html> ``` 在这个代码中，我们将CSS代码放在了HTML文件的头部，使用了style标签来定义。这样可以让我们更清晰地看到HTML和CSS的关系，同时也方便了代码的维护和修改。