什么是 Div CSS 网站模板？
它是一种使用 HTML 的 <div> 元素作为页面主要结构容器，并使用 CSS (层叠样式表) 来控制这些容器的布局、颜色、字体、间距等样式的网页构建方法。
（图片来源网络，侵删）
<div>(Division): 一个块级元素，本身没有任何特定的语义，就像一个“空的盒子”或“容器”，你可以用它来包裹页面的不同部分，比如页头、导航栏、侧边栏、主要内容区、页脚等。- CSS (Cascading Style Sheets): 一种样式表语言，用于描述 HTML 文档的呈现方式，它负责告诉浏览器
<div>盒子应该放在哪里、多大、什么颜色、间距是多少等。
核心思想：内容与表现分离
- HTML (内容): 负责定义网页的结构和内容，这里是标题，这里是段落,这里是图片。
- CSS (表现): 负责定义网页的视觉外观，标题是蓝色的、居中的、字体很大；段落有外边距；背景是灰色的。
这种分离的好处非常明显：
- 易于维护: 修改样式时，只需改动 CSS 文件，无需触碰 HTML 结构。
- 加载更快: 浏览器可以缓存 CSS 文件,加快后续页面的加载速度。
- SEO友好: 结构清晰的 HTML 更容易被搜索引擎理解。
- 适应性强: 通过修改 CSS，可以轻松地让网站适配不同的设备（桌面、平板、手机）。
一个典型的 Div CSS 网站模板结构
一个最基础的网站模板通常包含以下几个部分：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">我的网站</title>
<!-- 引入 CSS 文件 -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 1. 页头 / 顶部导航 -->
<header>
<h1>网站 Logo</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</header>
<!-- 2. 主要内容区 -->
<main>
<!-- 3. 左侧或中心内容 -->
<section class="content">
<h2>欢迎来到我的网站</h2>
<p>这里是网站的主要内容...</p>
</section>
<!-- 4. 侧边栏 -->
<aside class="sidebar">
<h3>相关链接</h3>
<ul>
<li><a href="#">链接 1</a></li>
<li><a href="#">链接 2</a></li>
</ul>
</aside>
</main>
<!-- 5. 页脚 -->
<footer>
<p>© 2025 我的网站. 版权所有.</p>
</footer>
</body>
</html>
对应的 CSS 样式示例
下面是一个简单的 style.css 文件，它让上面的 HTML 结构看起来像一个真正的网页。
（图片来源网络，侵删）
/* style.css */
/* 全局重置和基本样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* 盒模型计算更直观 */
}
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
background-color: #f4f4f4;
color: #333;
}
/* 布局容器 - 将内容居中 */
.container {
width: 80%;
margin: 0 auto; /* 上下为0，左右自动，实现水平居中 */
overflow: hidden; /* 清除浮动 */
}
/* 1. 页头样式 */
header {
background: #333;
color: #fff;
padding: 1rem 0;
text-align: center;
}
header h1 {
float: left; /* 使 Logo 和导航并排 */
}
header nav ul {
list-style: none;
float: right; /* 导航靠右 */
}
header nav ul li {
display: inline; /* 列表项横向排列 */
margin-left: 20px;
}
header nav ul li a {
color: #fff;
text-decoration: none;
}
/* 2. 主要内容区样式 */
main {
padding: 20px 0;
display: flex; /* 使用 Flexbox 布局 */
justify-content: space-between; /* 主轴内容两端对齐 */
}
区域 */
.content {
flex: 3; /* 内容区域占据 3 份宽度 */
padding: 20px;
background: #fff;
border-radius: 5px;
}
/* 侧边栏 */
.sidebar {
flex: 1; /* 侧边栏占据 1 份宽度 */
padding: 20px;
background: #ccc;
border-radius: 5px;
}
/* 3. 页脚样式 */
footer {
background: #333;
color: #fff;
text-align: center;
padding: 20px 0;
margin-top: 20px;
}
现代化的演进：从 Div 到语义化标签
虽然使用 <div> 构建模板非常灵活，但它缺乏语义，浏览器和搜索引擎无法仅仅通过 <div class="header"> 知道这是一个页头。
现代 HTML5 引入了许多语义化标签，它们是带有特定含义的 <div> 的升级版。
<header>: 页眉或章节的头部。<nav>: 导航链接区域。<main>: 文档的主要内容。<article>: 独立的内容单元，如博客文章、新闻。<section>: 文档中的一个独立区域,通常带有标题。<aside>: 侧边栏或与主要内容相关的辅助信息。<footer>: 页脚或章节的底部。
我们现在依然使用“Div CSS”的思路，即用盒子（现在是语义化标签）来构建布局，并用 CSS 来美化,只是盒子本身更有意义了。
如何获取 Div CSS 网站模板？
如果你不想从头开始写,可以从以下几个渠道获取高质量的模板：
（图片来源网络，侵删）
-
开源模板网站
- Bootstrap Themes: https://themes.getbootstrap.com/ (Bootstrap 是最流行的 CSS 框架之一，其模板基于 Div 和组件化思想)
- HTML5 UP: https://html5up.net/ (提供大量免费、设计精美的响应式模板，完全开源,可直接使用)
- TemplateMo: https://templatemo.com/ (提供数千个免费 HTML5 网站模板)
-
CSS 框架
- Bootstrap: https://getbootstrap.com/ (一个强大的前端框架，提供了一套完整的、响应式的组件和网格系统，让你能快速搭建网站)。
- Tailwind CSS: https://tailwindcss.com/ (一个功能优先的 CSS 框架，它提供低级别的实用类来构建自定义设计)。
-
代码托管平台
- GitHub: 在 GitHub 上搜索 "website template", "landing page" 等关键词,可以找到大量开发者分享的模板项目。
| 特性 | 描述 |
|---|---|
| 核心 | 使用 <div> (或语义化标签) 作为结构容器，用 CSS 控制样式。 |
| 优点 | 内容与表现分离，易于维护、加载快、SEO友好、响应式设计。 |
| 现代实践 | 更推荐使用 HTML5 语义化标签 代替无意义的 <div>，并结合 CSS 框架 (如 Bootstrap, Tailwind) 来提高开发效率。 |
| 学习路径 | 学习 HTML -> 学习 CSS -> 学习 Flexbox/Grid 布局 -> 学习一个 CSS 框架 -> 实践项目。 |
希望这份详细的指南能帮助你理解和使用 Div CSS 网站模板！
