以下是一个完整的HTML页面示例,展示了常见的网页布局结构,包括页眉、导航、主要内容、侧边栏和页脚。这个示例使用了Flexbox和CSS Grid来创建响应式布局。
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式网页布局示例</title>
<style>
/* 全局样式 */
body, h1, h2, h3, p {
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
/* 页眉样式 */
.site-header {
background-color: #333;
color: #fff;
padding: 1rem;
text-align: center;
}
/* 导航样式 */
.main-nav ul {
list-style: none;
padding: 0;
}
.main-nav ul li {
display: inline;
margin-right: 20px;
}
.main-nav ul li a {
color: #fff;
text-decoration: none;
}
/* 布局样式 */
.container {
display: flex;
flex-wrap: wrap;
}
.site-main {
flex: 3;
padding: 1rem;
}
.sidebar {
flex: 1;
padding: 1rem;
background-color: #f4f4f4;
}
/* 页脚样式 */
.site-footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 1rem;
margin-top: auto; /* 使页脚置于容器底部 */
}
/* 响应式设计 */
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
</style>
</head>
<body>
<header class="site-header">
<h1>我的网站</h1>
<nav class="main-nav">
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于</a></li>
<li><a href="#services">服务</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</nav>
</header>
<div class="container">
<main class="site-main">
<article class="post">
<header>
<h2>文章标题</h2>
</header>
<section>
<p>这里是文章内容。这里是文章内容。这里是文章内容。这里是文章内容。</p>
</section>
<footer>
<p>文章脚注</p>
</footer>
</article>
</main>
<aside class="sidebar">
<section class="widget">
<h3>最新文章</h3>
<ul>
<li><a href="#">文章1</a></li>
<li><a href="#">文章2</a></li>
</ul>
</section>
<section class="widget">
<h3>分类</h3>
<ul>
<li><a href="#">分类1</a></li>
<li><a href="#">分类2</a></li>
</ul>
</section>
</aside>
</div>
<footer class="site-footer">
<p>版权所有 © 2023 我的网站</p>
</footer>
</body>
</html>
```
在这个示例中,`.container` 类使用Flexbox来创建一个灵活的布局,其中`.site-main` 是主要内容区域,而 `.sidebar` 是侧边栏。在较小屏幕上(小于768px),布局会变为垂直堆叠,以适应移动设备。页脚通过设置 `margin-top: auto;` 自动置于容器底部。