首页html页面布局代码

html页面布局代码

时间: 2023-10-30 11:08:11 浏览: 43

以下是一个简单的 HTML 页面布局代码示例： ```html <!DOCTYPE html> <html> <head> <title>页面标题</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* CSS 样式 */ body { font-family: Arial, sans-serif; background-color: #f1f1f1; } header, nav { background-color: #333; color: #fff; padding: 10px; } main { background-color: #fff; padding: 20px; } footer { background-color: #333; color: #fff; padding: 10px; text-align: center; } </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> <main> <h2>内容标题</h2> <p>这里是页面的主要内容。</p> </main> <footer> <p>© 2021 网站名称</p> </footer> </body> </html> ``` 在这个例子中，页面被分为四个部分：页眉（header）、导航（nav）、主体（main）和页脚（footer）。CSS 样式定义了页面的外观和布局，包括页面的背景颜色、字体和间距等。在 HTML 中，我们使用标签来表示不同的元素，比如 `<header>` 表示页眉，`<nav>` 表示导航，`<main>` 表示主体，`<footer>` 表示页脚。在每个部分中，我们可以添加更多的 HTML 元素和内容来构建完整的页面。