首页用css+html写一个网页

用css+html写一个网页

时间: 2023-09-26 15:05:05 浏览: 92

好的，下面是一个简单的网页示例，包括 HTML 和 CSS 代码： HTML 代码： ```html <!DOCTYPE html> <html> <head> <title>我的网页</title> <meta charset="UTF-8"> <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> <p>这是另一个段落，可以继续展示内容。</p> </section> <section> <h2>这是另一个标题</h2> <p>这是另一个段落，可以展示不同的内容。</p> <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul> </section> </main> <footer> <p>版权所有 © 2021 我的网页</p> </footer> </body> </html> ``` CSS 代码： ```css body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 10px; } nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; margin-right: 20px; } nav li a { color: #fff; text-decoration: none; } main { margin: 20px; } section { margin-bottom: 20px; } h1, h2 { margin: 0; } footer { background-color: #333; color: #fff; padding: 10px; text-align: center; } ``` 你可以将上述代码保存为 `index.html` 和 `style.css`，并在同一目录下打开 `index.html` 文件，查看效果。当然，这只是一个简单的示例，你可以根据需要修改 HTML 和 CSS 代码，添加更多的内容和样式，以满足你的需求。

阅读全文