核心理念：将“结构”与“样式”分离

在开始之前,你必须理解一个最重要的原则：

div css制作网页模板的基本步骤
（图片来源网络，侵删）
  • HTML (用 <div> 等标签)：负责网页的结构和内容，它回答了“是什么”的问题，这是一个标题，这是一个导航栏,这是一个主要内容区域。
  • CSS (样式表)：负责网页的表现和样式，它回答了“长什么样”的问题，这个标题是红色的，这个导航栏有背景色,这个内容区域居中显示。

遵循这个原则，你的代码会非常清晰、易于维护。

制作网页模板的基本步骤

我们可以将整个过程分为六个主要步骤：

第 1 步：规划与设计

在敲代码之前，先用笔或在设计软件（如 Figma, Sketch, Photoshop）中画出你的网页布局,这能让你对整体结构有清晰的规划。

一个典型的网页布局通常包含以下部分：

div css制作网页模板的基本步骤
（图片来源网络，侵删）
+---------------------------------+
|           Header (头部)         |  --> 包含 Logo、网站标题、主导航菜单
+---------------------------------+
|                                 |
|    Sidebar (侧边栏)             |  --> 包含次要导航、广告、分类等
|                                 |
|                                 |
|    +-------------------------+  |
|    |     Main Content        |  |  --> 包含文章、产品、主要内容
|    |                         |  |
|    +-------------------------+  |
|                                 |
|    Footer (页脚)                |  --> 包含版权信息、联系方式、底部链接
|                                 |
+---------------------------------+

第 2 步：搭建 HTML 骨架

根据你的规划，使用 HTML 标签来构建网页的结构。<div> 在这里扮演着“容器”的角色。

  1. 创建基本 HTML 文件： 创建一个文件，命名为 index.html，并写入基本的 HTML5 结构。

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的网页模板</title>
    <!-- 在这里链接你的 CSS 文件 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 第一步：创建头部容器 -->
    <div id="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>
    </div>
    <!-- 第二步：创建主体内容容器，包含侧边栏和主内容区 -->
    <div id="main-container">
        <!-- 侧边栏容器 -->
        <div id="sidebar">
            <h3>侧边栏</h3>
            <p>这里是一些侧边栏内容。</p>
        </div>
        <!-- 主内容区容器 -->
        <div id="content">
            <h2>欢迎来到我的网站</h2>
            <p>这里是主要内容区域，放置你的文章或产品信息。</p>
        </div>
    </div>
    <!-- 第三步：创建页脚容器 -->
    <div id="footer">
        <p>&copy; 2025 我的网站. 保留所有权利。</p>
    </div>
</body>
</html>

  2. 理解 <div> 的用法：

    • <div>：一个通用的块级容器，没有任何特定的语义,我们用它来划分大的布局区域。
    • <span>：一个通用的行内容器，通常用于对文本的一部分进行样式设置（给一句话中的某个词加颜色）。
    • id vs class：
      • id：唯一标识，一个页面中，id 的值必须是唯一的，通常用于页面中只出现一次的元素，如 #header, #footer, #main-content。
      • class：可复用标识，一个页面中，多个元素可以共享同一个 class，通常用于样式相同的元素，如多个 .article-item, 多个 .button。

第 3 步：创建 CSS 样式表

在与 index.html 同级的目录下，创建一个名为 style.css 的文件。

  1. 链接 CSS 文件：确保在 index.html 的 <head> 标签中正确链接了 style.css（见上一步代码）。

  2. 重置默认样式 (Reset CSS)： 不同浏览器对 HTML 标签的默认样式（如外边距、内边距）有所不同，为了保持一致性，通常会先重置这些样式,你可以使用一个简单的重置代码：

    /* 在 style.css 的开头 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 关键！让元素的宽高包含 padding 和 border */
}

  3. 开始布局： 现在我们可以开始为 div 容器添加样式了。

    • 布局方式：现代 CSS 推荐使用 Flexbox 或 Grid 进行布局，它们比传统的浮动 更加强大和灵活，这里我们以 Flexbox 为例。

    • 让整个页面内容居中： 我们给 #main-container 设置一个最大宽度,并让它水平居中。

      #main-container {
    max-width: 1200px; /* 设置内容最大宽度 */
    margin: 20px auto;   /* 上下外边距 20px，左右自动（实现水平居中） */
    display: flex;       /* 启用 Flexbox 布局 */
    gap: 20px;           /* 在子元素之间创建 20px 的间隙 */
}

    • 设置侧边栏和主内容区： 我们让侧边栏固定宽度,主内容区占据剩余空间。

      #sidebar {
    width: 250px; /* 固定宽度 */
    background-color: #f4f4f4; /* 背景色 */
    padding: 15px;
    border-radius: 5px;
}
#content {
    flex: 1; /* flex-grow: 1; 这会让 .content 占据所有剩余空间 */
    background-color: #fff;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

    • 美化头部和页脚：

      body {
    font-family: Arial, sans-serif; /* 设置全局字体 */
    line-height: 1.6;
}
#header {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    text-align: center;
}
#header nav ul {
    list-style: none; /* 移除列表前的点 */
    margin-top: 10px;
}
#header nav ul li {
    display: inline-block; /* 让列表项水平排列 */
    margin: 0 15px;
}
#header nav a {
    color: #fff;
    text-decoration: none; /* 移除下划线 */
}
#footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
    margin-top: 20px;
}

第 4 步：添加内容与细节

现在你的网页框架已经搭好了，可以向 #content 等容器里添加更多的内容（如文章、图片、表单等），并使用 CSS 类（.class）来为它们添加样式。

<div id="content">
    <article class="post">
        <h2>第一篇文章标题</h2>
        <p class="post-meta">发布于 2025-10-27</p>
        <p>这里是文章的正文内容...</p>
    </article>
    <article class="post">
        <h2>第二篇文章标题</h2>
        <p class="post-meta">发布于 2025-10-26</p>
        <p>这里是另一篇文章的正文内容...</p>
    </article>
</div>
.post {
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}
.post h2 {
    color: #333;
}
.post-meta {
    color: #888;
    font-size: 0.9em;
}

第 5 步：响应式设计 (重要！)

确保你的网页在不同设备（桌面、平板、手机）上都能良好显示，最常用的方法是使用 媒体查询 (Media Queries)。

在 style.css 中添加以下代码：

/* 当屏幕宽度小于 768px 时（平板和手机） */
@media (max-width: 768px) {
    #main-container {
        flex-direction: column; /* 将 Flex 容器改为垂直排列 */
    }
    #sidebar {
        width: 100%; /* 侧边栏宽度变为 100% */
    }
}

这段代码的意思是：当浏览器窗口宽度小于 768 像素时，#main-container 内的子元素（#sidebar 和 #content）会从水平排列变成垂直堆叠,这样在手机上看起来就更合理了。

第 6 步：测试与优化

  • 在不同的浏览器（Chrome, Firefox, Edge, Safari）中打开你的网页,检查是否有显示问题。
  • 使用浏览器的开发者工具（按 F12 打开）来实时调试 CSS，检查元素布局,排查问题。
  • 优化代码，确保 CSS 结构清晰,命名规范。
步骤 核心任务 关键点
规划设计 画出网页布局草图 明确各个功能区域的位置和关系
搭建 HTML 使用 <div> 和语义标签构建结构 id 用于唯一元素，class 用于复用样式
创建 CSS 编写样式表，实现视觉效果 盒模型、Flexbox/Grid 布局、重置样式
填充具体内容，并使用 class 美化 内容与样式分离，善用类选择器
响应式设计 使用媒体查询适配不同屏幕 @media (max-width: ...)
测试优化 多浏览器测试，使用开发者工具调试 确保兼容性和用户体验

遵循以上步骤，你就可以从零开始，使用 div 和 CSS 构建出结构清晰、样式美观的网页模板了，熟能生巧,多练习几次就能掌握其中的精髓。