html页面布局分块代码
时间: 2023-10-30 14:08:11 浏览: 39
以下是一个简单的 HTML 页面布局分块代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
<style>
.header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
.nav {
background-color: #f2f2f2;
padding: 10px;
text-align: center;
}
.content {
padding: 10px;
}
.footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<header class="header">
<h1>这是一个头部</h1>
</header>
<nav class="nav">
<ul>
<li><a href="#">链接1</a></li>
<li><a href="#">链接2</a></li>
<li><a href="#">链接3</a></li>
</ul>
</nav>
<div class="content">
<p>这是页面的主要内容</p>
</div>
<footer class="footer">
<p>版权所有 © 2021</p>
</footer>
</body>
</html>
```
在这个示例中,页面被分成了四个块:头部(header)、导航栏(nav)、主要内容(content)和页脚(footer)。每个块都有自己的样式,并且使用了相应的类名来进行标识。通过这种方式,我们可以轻松地对页面进行布局和样式设计。