首页html代码静态页面

html代码静态页面

时间: 2023-11-29 12:45:38 浏览: 37

以下是一个简单的HTML静态页面的示例代码，使用了CSS+DIV布局： ```html <!DOCTYPE html> <html> <head> <title>静态页面示例</title> <style> .container { width: 80%; margin: 0 auto; padding: 20px; background-color: #f2f2f2; border: 1px solid #ccc; } .header { background-color: #333; color: #fff; padding: 10px; text-align: center; } .nav { background-color: #f1f1f1; padding: 10px; text-align: center; } .nav a { display: inline-block; padding: 10px; color: #333; text-decoration: none; font-weight: bold; } .nav a:hover { background-color: #333; color: #fff; } .content { padding: 20px; text-align: justify; } .footer { background-color: #333; color: #fff; padding: 10px; text-align: center; } </style> </head> <body> <div class="container"> <div class="header"> <h1>静态页面示例</h1> </div> <div class="nav"> <a href="#">首页</a> <a href="#">关于我们</a> <a href="#">联系我们</a> </div> <div class="content"> <h2>欢迎来到我们的网站</h2> <p>这是一个简单的静态页面示例，使用了CSS+DIV布局。</p> <p>我们的网站提供各种有用的信息，包括新闻、文章、图片等。</p> <p>请随时访问我们的网站，以获取最新的信息。</p> </div> <div class="footer"> <p>版权所有 © 2021 静态页面示例</p> </div> </div> </body> </html> ```