第一部分：核心概念理解

在开始之前,我们先要明白 Div 和 CSS 各自扮演什么角色。

div css制作网页模板的基本步骤
（图片来源网络，侵删）

  1. HTML - 骨架 (Div 的作用)

    • Div 是一个 HTML 标签，全称是 "Division"（分区）。
    • 它本身没有任何特定的样式,就像一个空的“盒子”或“容器”。
    • 我们使用 <div> 来构建网页的结构，整个页面可以是一个大 div，头部是另一个 div，导航栏、内容区、页脚也都是 div。
    • 我们会给这些 div 赋予 class 或 id 属性，这样 CSS 就能精确地找到并样式化它们。

  2. CSS - 血肉和衣服 (CSS 的作用)

    • CSS (Cascading Style Sheets) 层叠样式表，是一套用来控制网页外观和布局的规则。
    • 它负责定义 div 盒子的外观：宽度、高度、背景颜色、边框、文字颜色、字体大小等。
    • 它还负责定义 div 盒子的位置：如何排列、对齐、叠放，这就是我们常说的“布局”。

一句话总结：用 HTML (Div) 搭建房子的钢筋骨架，用 CSS 给房子穿上漂亮的衣服并安排房间布局。

第二部分：制作网页模板的基本步骤

一个典型的网页模板制作流程如下：

div css制作网页模板的基本步骤
（图片来源网络，侵删）

步骤 1：规划网页结构

在写任何代码之前,先用笔或在脑子里规划好你的网页需要哪些部分，这就像画建筑草图。

一个最经典的网页结构通常包括：

  • Header (页眉)：包含 Logo、网站标题、主导航菜单。
  • Main Content (主要内容)：文章列表、产品展示、文章正文等。
  • Sidebar (侧边栏)：相关链接、广告、分类等。
  • Footer (页脚)：版权信息、联系方式、备案号等。

结构示例：

<div class="page-container">  <!-- 整个页面的容器 -->
    <div class="header">...</div>
    <div class="main-content">...</div>
    <div class="sidebar">...</div>
    <div class="footer">...</div>
</div>

步骤 2：编写 HTML 结构

根据你的规划,创建一个 HTML 文件 (index.html)，使用 <div> 和其他语义化标签（如 <header>, <nav>, <main>, <footer>）来构建骨架。

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>
    <div class="page-container">
        <header class="main-header">
            <h1>我的网站</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>
        <div class="content-wrapper">
            <main class="main-content">
                <h2>欢迎来到我的网站</h2>
                <p>这里是主要内容区域...</p>
            </main>
            <aside class="sidebar">
                <h3>侧边栏</h3>
                <p>这里是侧边栏内容...</p>
            </aside>
        </div>
        <footer class="main-footer">
            <p>&copy; 2025 我的网站. 保留所有权利.</p>
        </footer>
    </div>
</body>
</html>

关键点：

  • <!DOCTYPE html>：声明文档类型，告诉浏览器使用 HTML5 规范。
  • <head>：包含页面的元数据，如标题、字符编码、以及最重要的 CSS 链接。
  • <body>：包含所有可见的页面内容。
  • class 属性：给 div 命名，CSS 通过 选择器来引用它（.main-header），一个 div 可以有多个 class，用空格隔开。

步骤 3：创建 CSS 样式文件

在你的 HTML 文件旁边，创建一个名为 style.css 的文件，这个文件将存放所有的样式规则。

步骤 4：使用 CSS 进行样式化和布局

这是最核心的一步,我们通常从整体到局部，从布局到细节进行样式化。

A. 重置默认样式 (Reset)

不同浏览器对 HTML 元素的默认样式（比如外边距、内边距）可能不同，为了确保我们的模板在所有浏览器中看起来都一样，第一步通常是重置这些默认样式。

/* 在 style.css 的最顶部 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 关键！让 padding 和 border 不会增加元素的宽度 */
}

box-sizing: border-box; 是一个非常重要的属性，它让盒子的计算更符合直觉。

B. 整体布局 (Flexbox 或 Grid)

现代网页布局最推荐使用 Flexbox 或 Grid，这里我们用 Flexbox 来实现一个常见的“头部+内容区（主内容+侧边栏）+页脚”布局。

/* 1. 让整个页面占满视口高度 */
html, body {
    height: 100%;
}
/* 2. 设置页面容器的样式和布局 */
.page-container {
    display: flex; /* 启用 Flexbox 布局 */
    flex-direction: column; /* 让子元素垂直排列 */
    min-height: 100vh; /* 最小高度为视口高度 */
}
/* 3. 让头部和页脚自动占据空间，内容区拉伸填充 */
.main-header, .main-footer {
    background-color: #333;
    color: white;
    padding: 1rem;
    text-align: center;
}
.main-content {
    flex: 1; /* 让 main-content 占据所有剩余空间 */
    display: flex; /* 内容区内部也使用 Flexbox 来排列主内容和侧边栏 */
}
/* 4. 布局主内容和侧边栏 */
.main-content {
    flex: 3; /* 主内容占 3 份 */
    padding: 20px;
}
.sidebar {
    flex: 1; /* 侧边栏占 1 份 */
    padding: 20px;
    background-color: #f4f4f4;
}

Flexbox 解释：

  • display: flex;：将 .page-container 变为一个 Flex 容器。
  • flex-direction: column;：让内部的 .main-header, .content-wrapper, .main-footer 从上到下排列。
  • flex: 1;：在 .main-content 上使用，它告诉这个元素“尽可能多地占据可用空间”，从而将 .main-footer 挤到最底部。
  • 在 .content-wrapper 内部再次使用 display: flex;，让 .main-content 和 .sidebar 并排显示。

C. 细节样式化

我们可以为各个部分添加颜色、字体、边框等细节。

/* 导航菜单样式 */
.main-header nav ul {
    list-style: none; /* 移除列表前的点 */
    display: flex; /* 让列表项水平排列 */
    justify-content: center; /* 居中对齐 */
}
.main-header nav ul li a {
    color: white;
    text-decoration: none; /* 移除下划线 */
    padding: 0 15px;
}
区样式 */
.main-content h2, .sidebar h3 {
    margin-bottom: 15px;
}
.main-content p, .sidebar p {
    line-height: 1.6;
}

第三部分：完整实例与总结

文件结构：

my-website/
├── index.html
└── style.css

index.html (同上)

style.css (完整代码)

/* 1. 重置和基础样式 */
* {
    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;
}
/* 2. 布局容器 */
.page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
/* 3. 页眉 */
.main-header {
    background-color: #2c3e50;
    color: #ecf0f1;
    padding: 1rem 2rem;
}
.main-header h1 {
    font-size: 2rem;
}
.main-header nav ul {
    list-style: none;
    display: flex;
    margin-top: 1rem;
}
.main-header nav ul li a {
    color: #ecf0f1;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}
.main-header nav ul li a:hover {
    background-color: #34495e;
}
/* 4. 内容区和侧边栏 */
.content-wrapper {
    display: flex;
    flex: 1; /* 占据剩余空间 */
}
.main-content {
    flex: 3;
    padding: 2rem;
    background-color: #ffffff;
}
.sidebar {
    flex: 1;
    padding: 2rem;
    background-color: #f8f9fa;
    border-left: 1px solid #e9ecef;
}
/* 5. 页脚 */
.main-footer {
    background-color: #2c3e50;
    color: #bdc3c7;
    text-align: center;
    padding: 1rem;
    margin-top: auto; /* 确保页脚在底部 */
}
/* 6. 响应式设计 (简单示例) */
@media (max-width: 768px) {
    .content-wrapper {
        flex-direction: column; /* 在小屏幕上让内容区和侧边栏垂直堆叠 */
    }
    .main-header nav ul {
        flex-direction: column; /* 在小屏幕上让导航菜单垂直堆叠 */
        text-align: center;
    }
    .main-header nav ul li {
        margin: 0.25rem 0;
    }
}

制作 Div + CSS 网页模板的基本步骤可以概括为：

  1. 规划：在脑中或纸上画出网页的结构图。
  2. 写 HTML：用 <div> (和语义化标签) 搭建网页的骨架，并用 class 命名各个部分。
  3. 写 CSS：
    • 链接 CSS：在 HTML 的 <head> 中用 <link> 标签引入 CSS 文件。
    • 重置样式：使用 * { margin: 0; padding: 0; box-sizing: border-box; } 统一起跑线。
    • 布局：使用现代布局技术（Flexbox 或 Grid）来定义 div 的位置和排列方式。
    • 美化：为各个 div 添加颜色、字体、边距等细节样式。
    • 优化：添加 响应式设计，让网页在不同尺寸的设备上都能良好显示。

通过这个流程,你就可以从零开始，系统化地构建出结构清晰、样式美观的网页模板了，多加练习，熟能生巧！