最基础的居中布局
这个模板展示了网页最核心的结构：一个包含头部、主体和底部的容器,并且内容在屏幕上水平垂直居中。
（图片来源网络，侵删）
HTML 代码 (index.html)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">基础居中布局</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header class="header">
<h1>我的网站</h1>
<p>欢迎来到我的简单网站</p>
</header>
<main class="main">
<h2>主要内容</h2>
<p>这是一个使用 Div 和 CSS 创建的简单居中布局模板，主要内容区域被包裹在一个容器中，并实现了水平和垂直居中。</p>
<p>你可以在这里添加任何你想要的内容。</p>
</main>
<footer class="footer">
<p>© 2025 我的公司. 保留所有权利.</p>
</footer>
</div>
</body>
</html>
CSS 代码 (style.css)
/* 基础样式重置 */
body, html {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
}
/* 容器样式 - 实现水平垂直居中的关键 */
.container {
width: 80%; /* 设置宽度 */
max-width: 800px; /* 设置最大宽度，在大屏幕上不会过宽 */
min-height: 90vh; /* 最小高度为视口高度的90% */
margin: 5vh auto; /* 上下边距为视口高度的5%，左右为auto实现水平居中 */
padding: 20px;
box-sizing: border-box; /* padding不会增加元素的总宽度 */
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
text-align: center; /* 内部文本居中 */
}
/* 头部样式 */
.header {
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #eee;
}
样式 */
.main {
margin-bottom: 20px;
}
/* 底部样式 */
.footer {
margin-top: 20px;
padding-top: 10px;
border-top: 2px solid #eee;
font-size: 0.9em;
color: #777;
}
特点与解析:
<div class="container">: 这是整个页面的包裹器，我们通过margin: 5vh auto;来让它水平居中 (auto) 并在垂直方向上有一些上下的空间 (5vh)。box-sizing: border-box;: 这是一个非常重要的属性，它告诉浏览器width和height属性应该包含padding和border,这使得布局更可控。- 语义化标签: 使用
<header>,<main>,<footer>而不是全部用<div>,有助于SEO和代码可读性。
经典三栏布局（侧边栏 + 内容）
这个模板展示了如何创建一个常见的“侧边栏+主内容区”的布局，使用 Flexbox 实现,非常现代和灵活。
HTML 代码 (index.html)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">三栏布局</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="page-wrapper">
<header class="main-header">
<h1>网站标题</h1>
</header>
<div class="content-wrapper">
<aside class="sidebar">
<h3>侧边栏</h3>
<p>这里是侧边栏内容，可以放导航、广告等。</p>
<ul>
<li><a href="#">链接 1</a></li>
<li><a href="#">链接 2</a></li>
<li><a href="#">链接 3</a></li>
</ul>
</aside>
<main class="main-content">
<h2>主内容区</h2>
<p>这是页面的主要内容，在 Flexbox 布局中，主内容区会占据剩余的所有空间。</p>
<p>侧边栏的宽度是固定的，而主内容区是自适应的，当屏幕宽度变小时，内容会自动换行。</p>
</main>
</div>
<footer class="main-footer">
<p>© 2025 我的公司. 保留所有权利.</p>
</footer>
</div>
</body>
</html>
CSS 代码 (style.css)
/* 基础样式 */
body, html {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
color: #333;
}
.page-wrapper {
display: flex; /* 启用 Flexbox 布局 */
flex-direction: column; /* 子元素垂直排列 */
min-height: 100vh; /* 最小高度为视口高度 */
}
.main-header, .main-footer {
background-color: #333;
color: white;
text-align: center;
padding: 1rem;
}
.main-header {
flex-shrink: 0; /* 防止头部被压缩 */
}
.main-footer {
flex-shrink: 0; /* 防止底部被压缩 */
}
.content-wrapper {
display: flex; /* 内部也使用 Flexbox 来实现并排布局 */
flex-grow: 1; /* 让内容区域占据所有可用空间 */
padding: 20px;
gap: 20px; /* 子元素之间的间距 */
}
.sidebar {
flex: 0 0 200px; /* 不拉伸，不收缩，宽度为200px */
background-color: #f4f4f4;
padding: 15px;
border-radius: 5px;
}
.main-content {
flex: 1; /* 占据所有剩余空间 */
padding: 15px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0,0,0,0.05);
}
/* 响应式设计：在小屏幕上，侧边栏跑到下面 */
@media (max-width: 768px) {
.content-wrapper {
flex-direction: column;
}
.sidebar {
flex: 1; /* 在小屏幕上，侧边栏也占据全宽 */
}
}
特点与解析:
- Flexbox: 这是现代布局的核心。
.content-wrapper设置为display: flex;，使其子元素（.sidebar和.main-content）并排排列。 flex: 1: 这个简写属性让.main-content自动填充侧边栏之外的所有剩余空间。flex: 0 0 200px: 这个简写让.sidebar宽度固定为200px,并且不会被拉伸或压缩。flex-direction: column: 应用于.page-wrapper，使头部、内容区和底部垂直堆叠。flex-grow: 1: 应用于.content-wrapper区域会撑满页面中间的剩余空间。- 媒体查询 (
@media): 当屏幕宽度小于768px时，将.content-wrapper的布局方向改为垂直（column）,实现移动端适配。
如何使用这些模板
- 创建文件: 创建一个文件夹，
my-website，在该文件夹中，创建三个文件：index.html、style.css和一个可选的images文件夹（用于存放图片）。 - 复制代码: 将上面模板中的 HTML 和 CSS 代码分别复制到对应的文件中。
- 预览: 用浏览器打开
index.html文件,你就可以看到效果了。 - 修改: 现在你可以开始修改 HTML 中的文本和 CSS 中的颜色、宽度、间距等属性,来打造你自己的网页。
这些模板是构建更复杂网站的基础，掌握了它们,你就可以轻松地创建出各种布局的网页。
（图片来源网络，侵删）
（图片来源网络，侵删）
