首页html网页制作的基本css布局代码

html网页制作的基本css布局代码

时间: 2023-09-03 12:16:43 浏览: 109

以下是一个基本的 HTML 网页布局代码示例，其中包含了一些基本的 CSS 样式： ```html <!DOCTYPE html> <html> <head> <title>基本布局</title> <style> body { margin: 0; padding: 0; font-family: Arial, sans-serif; } header { background-color: #333; color: #fff; padding: 10px; } nav { background-color: #555; color: #fff; padding: 10px; float: left; width: 20%; height: 500px; } section { background-color: #ccc; color: #333; padding: 20px; float: left; width: 80%; height: 500px; } footer { background-color: #333; color: #fff; padding: 10px; clear: both; } </style> </head> <body> <header> <h1>网页标题</h1> </header> <nav> <ul> <li><a href="#">链接1</a></li> <li><a href="#">链接2</a></li> <li><a href="#">链接3</a></li> </ul> </nav> <section> <h2>内容标题</h2> <p>这里是内容</p> </section> <footer> <p>版权信息</p> </footer> </body> </html> ``` 在这个示例中，我们使用了基本的 HTML 元素如 `header`、`nav`、`section` 和 `footer` 来创建一个简单的网页布局。我们还使用了一些基本的 CSS 样式来设置页面的外观，如 `background-color`、`color`、`padding`、`float`、`width` 和 `height` 等。这些样式可以通过 CSS 文件或内联样式进行设置。

阅读全文