利用 HTML + CSS 实现一个常见的博客布局，顶部博客标题和导航栏，中间左边是文章内容展示区域，右边是侧边栏，显示栏目广告，底部是网站版权信息。效果如下图：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- 适配移动端，设置视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯HTML+CSS 网页布局骨架</title>
<style>
/* 全局样式重置，消除浏览器默认边距和内边距，统一盒模型 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 页面整体背景，最小高度占满屏幕，设置字体 */
body {
font-family: "Microsoft YaHei", sans-serif;
background-color: #f5f5f5;
min-height: 100vh;
/* 弹性布局，实现页脚始终在底部（核心） */
display: flex;
flex-direction: column;
}
/* 1. 头部样式（Header） */
.header {
background-color: #2c3e50;
color: white;
padding: 1.5rem;
text-align: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* 2. 导航栏样式（Nav） */
.nav {
background-color: #34495e;
padding: 1rem 0;
position: sticky;
top: 0; /* 粘性导航，滚动时固定在顶部 */
z-index: 999;
}
/* 导航列表 */
.nav ul {
list-style: none;
display: flex;
justify-content: center;
gap: 2rem; /* 列表项之间的间距 */
}
/* 导航链接 */
.nav a {
color: white;
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: 4px;
transition: background-color 0.3s ease; /* 过渡动画，hover更平滑 */
}
/* 导航链接hover效果 */
.nav a:hover {
background-color: #2c3e50;
}
/* 3. 主体内容容器（包含主内容和侧边栏） */
.main-container {
/* 弹性布局，实现主内容和侧边栏并排 */
display: flex;
gap: 2rem;
padding: 2rem;
/* 占据剩余空间，让页脚推到底部 */
flex: 1;
max-width: 1200px;
margin: 0 auto; /* 居中对齐 */
}
/* 4. 主内容区域 */
.content {
flex: 3; /* 占比3份，宽于侧边栏 */
background-color: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
/* 5. 侧边栏区域 */
.sidebar {
flex: 1; /* 占比1份 */
background-color: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
/* 6. 页脚样式（Footer） */
.footer {
background-color: #2c3e50;
color: white;
text-align: center;
padding: 1.5rem;
margin-top: auto; /* 配合body的flex，固定在页面底部 */
}
/* 7. 响应式适配（移动端：屏幕宽度小于768px时，取消并排，改为垂直排列） */
@media (max-width: 768px) {
.main-container {
flex-direction: column; /* 垂直排列 */
padding: 1rem;
gap: 1rem;
}
.nav ul {
gap: 1rem;
flex-wrap: wrap; /* 导航项过多时自动换行 */
}
}
</style>
</head>
<body>
<!-- 1. 头部 -->
<header class="header">
<h1>网页标题 / 网站Logo区域</h1>
</header>
<!-- 2. 导航栏 -->
<nav class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品中心</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系客服</a></li>
<li><a href="#">常见问题</a></li>
</ul>
</nav>
<!-- 3. 主体内容容器 -->
<div class="main-container">
<!-- 主内容区域 -->
<main class="content">
<h2>主内容区域</h2>
<p>这里是网页的核心内容展示区，比如文章、商品列表、表单等。</p>
<br>
<p>该布局为响应式设计，在手机等小屏幕设备上会自动切换为垂直排列。</p>
</main>
<!-- 侧边栏区域 -->
<aside class="sidebar">
<h3>侧边栏</h3>
<p>这里可以放置侧边导航、广告、热门推荐、用户信息等辅助内容。</p>
</aside>
</div>
<!-- 4. 页脚 -->
<footer class="footer">
<p>© 2026 我的网站 版权所有 | 联系方式：xxx@xxx.com</p>
</footer>
</body>
</html>
川公网安备51010802032098