示例1：经典三栏布局（Flexbox实现）
这是最常见和实用的布局之一，包含一个页眉、一个页脚和中间的三栏内容区（侧边栏、主内容、另一个侧边栏），这个示例使用了现代、高效的 Flexbox 布局。
（图片来源网络，侵删）
特点：
- 响应式：在小屏幕上,三栏会自动堆叠为单栏。
- 语义化HTML：使用
<header>,<main>,<aside>,<footer>等标签。 - Flexbox：轻松实现等高布局和空间分配。
完整源代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">经典三栏布局 - Flexbox</title>
<style>
/* --- 全局样式和重置 --- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f4f4f4;
}
.container {
max-width: 1200px;
margin: 20px auto;
padding: 0 20px;
}
/* --- 头部样式 --- */
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 1rem;
border-radius: 5px;
}
/* --- 主要内容区布局 (Flexbox) --- */
.main-content {
display: flex; /* 启用 Flexbox 布局 */
gap: 20px; /* 子元素之间的间距 */
margin-top: 20px;
}
/* --- 左侧边栏 --- */
.left-sidebar {
flex: 1; /* 占用可用空间的一部分 */
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
/* --- 主内容区 --- */
.main-column {
flex: 2; /* 占用比侧边栏更多的空间 */
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
/* --- 右侧边栏 --- */
.right-sidebar {
flex: 1; /* 占用可用空间的一部分 */
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
/* --- 页脚样式 --- */
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 1rem;
margin-top: 20px;
border-radius: 5px;
}
/* --- 响应式设计 --- */
@media (max-width: 768px) {
.main-content {
flex-direction: column; /* 在小屏幕上，将布局改为垂直堆叠 */
}
}
</style>
</head>
<body>
<header>
<h1>我的网站标题</h1>
<p>这是一个使用 Flexbox 实现的经典三栏布局</p>
</header>
<div class="container">
<main class="main-content">
<aside class="left-sidebar">
<h2>左侧边栏</h2>
<p>这里是左侧边栏的内容，在大屏幕上，它会显示在左侧。</p>
<ul>
<li>链接 1</li>
<li>链接 2</li>
<li>链接 3</li>
</ul>
</aside>
<section class="main-column">
<h2>主要内容区</h2>
<p>这里是网站的主要内容，在大屏幕上，它会占据最宽的空间，这个布局的核心是使用了 Flexbox，父元素 <code>main-content</code> 设置了 <code>display: flex;</code>，子元素（侧边栏和主内容）通过 <code>flex</code> 属性来分配空间。</p>
<p>试着调整浏览器窗口的大小，当宽度小于 768px 时，布局会自动切换为垂直堆叠，以适应手机和平板等移动设备。</p>
</section>
<aside class="right-sidebar">
<h2>右侧边栏</h2>
<p>这里是右侧边栏的内容，在大屏幕上，它会显示在右侧。</p>
<p>可以放置广告、热门文章列表或用户信息等。</p>
</aside>
</main>
</div>
<footer>
<p>© 2025 我的网站. 保留所有权利.</p>
</footer>
</body>
</html>
示例2：CSS Grid 实现的“杂志”式布局
CSS Grid 是一个二维布局系统，非常适合创建复杂的、不规则的布局,比如杂志或新闻网站首页。
特点：
- Grid布局：轻松控制行和列。
- 区域命名：使用
grid-template-areas可以直观地定义布局结构。 - 高度灵活：可以轻松创建各种尺寸的内容卡片。
完整源代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">CSS Grid 杂志式布局</title>
<style>
/* --- 全局样式 --- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Georgia', serif;
background-color: #f0f0f0;
color: #333;
}
.grid-container {
display: grid; /* 启用 Grid 布局 */
grid-template-columns: repeat(12, 1fr); /* 创建12个等宽的列 */
grid-template-rows: auto auto 1fr auto; /* 定义行高 */
grid-template-areas:
"header header header header header header header header header header header header"
"featured featured featured featured featured featured featured featured featured . . ."
"article1 article1 article1 article2 article2 article2 article3 article3 article3 . . ."
"footer footer footer footer footer footer footer footer footer footer footer footer";
gap: 20px; /* 网格项之间的间距 */
max-width: 1200px;
margin: 20px auto;
padding: 20px;
}
/* --- 定义网格区域 --- */
.header { grid-area: header; }
.featured { grid-area: featured; }
.article-1 { grid-area: article1; }
.article-2 { grid-area: article2; }
.article-3 { grid-area: article3; }
.footer { grid-area: footer; }
/* --- 通用卡片样式 --- */
.card {
background-color: #fff;
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.header h1 { text-align: center; border-bottom: 2px solid #eee; padding-bottom: 10px; }
.featured h2, .article-1 h2, .article-2 h2, .article-3 h2 { margin-bottom: 15px; }
.footer { text-align: center; }
/* --- 响应式设计 --- */
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr; /* 在小屏幕上，所有列都变为单列 */
grid-template-areas:
"header"
"featured"
"article1"
"article2"
"article3"
"footer";
}
}
</style>
</head>
<body>
<div class="grid-container">
<header class="header card">
<h1>杂志式网站布局</h1>
</header>
<article class="featured card">
<h2>特色文章</h2>
<p>这是一篇特色文章，占据了较宽的空间，通过 Grid 布局的 `grid-template-areas`，我们可以像画画一样轻松地定义每个部分的位置。</p>
</article>
<article class="article-1 card">
<h2>文章一</h2>
<p>Grid 布局非常适合创建这种灵活的、模块化的页面结构。</p>
</article>
<article class="article-2 card">
<h2>文章二</h2>
<p>每个卡片都是一个独立的网格项，我们可以精确控制它们跨越多少行和列。</p>
</article>
<article class="article-3 card">
<h2>文章三</h2>
<p>这种布局方式让前端开发变得更加直观和高效。</p>
</article>
<footer class="footer card">
<p>© 2025 CSS Grid 布局示例.</p>
</footer>
</div>
</body>
</html>
如何使用这些代码
- 复制：选择您喜欢的示例代码,将其全部复制。
- 粘贴：创建一个新的文本文件,将代码粘贴进去。
- 保存：将文件保存为
.html格式，layout-example.html。 - 打开：用任何现代浏览器（如 Chrome, Firefox, Edge）打开这个文件,您就可以看到效果了。
- 修改：您可以随意修改 HTML 结构和 CSS 样式，来观察布局的变化，这是学习 CSS 布局的最佳方式。
选择哪个示例？
- 如果您是初学者，或者需要一个标准的、易于维护的网站布局，示例1（Flexbox三栏布局） 是最佳选择。
- 如果您想学习更现代、更强大的二维布局技术，或者需要创建类似Pinterest、Behance等瀑布流或卡片式布局，示例2（CSS Grid布局） 会给您带来巨大启发。
希望这些示例能帮助您更好地理解和使用CSS布局！
（图片来源网络，侵删）
