首页写一个漂亮的网页设计代码

写一个漂亮的网页设计代码

时间: 2024-04-12 10:33:38 浏览: 90

当谈论到网页设计，"漂亮"是一个主观的概念，因此对于每个人来说都可能不同。然而，我可以给你一个简单而现代的网页设计示例，你可以根据自己的需求进行修改和扩展。以下是一个示例代码： ```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; } .container { max-width: 800px; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } h1 { color: #333; text-align: center; } p { color: #666; line-height: 1.5; } .button { display: inline-block; padding: 10px 20px; background-color: #007bff; color: #fff; text-decoration: none; border-radius: 5px; } .footer { background-color: #333; color: #fff; padding: 20px; text-align: center; } </style> </head> <body> <div class="header"> <h1>欢迎来到漂亮的网页</h1> </div> <div class="container"> <h1>网页设计示例</h1> <p>这是一个漂亮的网页设计示例。</p> <a class="button" href="#">了解更多</a> </div> <div class="footer"> <p>版权所有 © 2021 漂亮的网页</p> </div> </body> </html> ``` 这段代码创建了一个带有漂亮的标题、段落、按钮和页脚的网页。你可以根据自己的喜好和需求进行进一步的修改和美化。希望对你有所启发！

阅读全文