首页html css静态网页实例

html css静态网页实例

时间: 2023-06-20 17:04:00 浏览: 55

以下是一个简单的静态网页实例，包括 HTML 和 CSS 代码： HTML 代码： ```html <!DOCTYPE html> <html> <head> <title>静态网页实例</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <h1>欢迎来到我的网站</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> </header> <main> <section> <h2>最新消息</h2> <p>这里是最新消息的内容。</p> </section> <section> <h2>产品介绍</h2> <p>这里是产品介绍的内容。</p> </section> <section> <h2>客户反馈</h2> <p>这里是客户反馈的内容。</p> </section> </main> <footer> <p>© 2021 静态网页实例</p> </footer> </body> </html> ``` CSS 代码： ```css body { margin: 0; padding: 0; font-family: Arial, sans-serif; } header { background-color: #333; color: #fff; padding: 20px; } nav ul { list-style: none; margin: 0; padding: 0; } nav li { display: inline-block; margin-right: 20px; } nav a { color: #fff; text-decoration: none; } main { padding: 20px; } section { margin-bottom: 20px; } h2 { color: #333; } footer { background-color: #f2f2f2; padding: 20px; text-align: center; } ``` 在浏览器中打开该 HTML 文件，即可预览该静态网页的效果。