教程前言：为什么是 DIV+CSS？

在学习之前,我们先明确几个概念：

div css实战教程
（图片来源网络，侵删）
  • HTML (HyperText Markup Language)：负责网页的。<h1> 标题、<p> 段落、<img> 图片、<div> 和 <span> 等，你可以把 HTML 想象成一座房子的钢筋骨架和房间划分。
  • CSS (Cascading Style Sheets)：负责网页的表现和样式，比如颜色、字体、间距、布局、动画等，CSS 就是房子的装修、粉刷、家具摆放。
  • DIV+CSS：这是一种网页开发的标准和思想，核心思想是“结构 (HTML) 与表现 (CSS) 分离”。
    • 优点：
      1. 代码清晰，易于维护：HTML 只管内容，CSS 只管样式，修改样式时，不需要动 HTML 结构。
      2. 加载速度快：样式文件可以被浏览器缓存，访问后续页面时无需重复加载，提升了用户体验。
      3. SEO 友好：搜索引擎抓取的是 HTML 结构，清晰的代码有助于理解页面内容，提升排名。
    • 注意：现在我们更常说的是 HTML + CSS，因为 <div> 只是 HTML 众多标签中的一个，但其“容器”概念依然是布局的核心。

实战项目：制作一个简单的个人博客首页

我们的目标是创建一个包含以下元素的页面：

  1. 顶部导航栏
  2. 左侧主要内容区（文章列表）
  3. 右侧边栏（关于我、热门文章等）
  4. 底部页脚

最终效果预览：

第一步：准备工作与文件结构

一个规范的项目应该有清晰的文件结构。

  1. 创建文件夹：在电脑上创建一个名为 my-blog 的文件夹。
  2. 创建文件：在 my-blog 文件夹内创建以下三个文件：
    • index.html (网页的 HTML 结构)
    • style.css (网页的 CSS 样式)
    • normalize.css (一个可选的 CSS 文件，用于重置不同浏览器的默认样式，让表现更统一)

文件结构如下：

div css实战教程
（图片来源网络，侵删）
my-blog/
├── index.html
├── style.css
└── normalize.css

第二步：编写 HTML 结构 (index.html)

打开 index.html 文件，我们开始用 HTML 搭建页面的“骨架”，使用 <div> 标签来划分不同的区域，并给每个 div 一个 class（类名），以便后续用 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="normalize.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 1. 顶部导航栏 -->
    <header class="main-header">
        <div class="container">
            <h1>我的博客</h1>
            <nav>
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">文章</a></li>
                    <li><a href="#">lt;/a></li>
                    <li><a href="#">联系</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <div class="main-content-wrapper">
        <div class="container">
            <!-- 2. 左侧主要内容区 -->
            <main class="content">
                <article class="post">
                    <h2>文章标题一：欢迎来到我的博客</h2>
                    <p class="post-meta">发布于 2025年10月27日</p>
                    <p>这是第一篇文章的内容，我们可以分享一些有趣的想法和学习笔记...</p>
                    <a href="#" class="read-more">阅读更多</a>
                </article>
                <article class="post">
                    <h2>文章标题二：学习 DIV+CSS 的心得</h2>
                    <p class="post-meta">发布于 2025年10月26日</p>
                    <p>学习网页布局是一个循序渐进的过程，从理解盒模型开始，到掌握浮动和定位...</p>
                    <a href="#" class="read-more">阅读更多</a>
                </article>
            </main>
            <!-- 3. 右侧边栏 -->
            <aside class="sidebar">
                <div class="widget">
                    <h3>关于我</h3>
                    <p>你好！我是一名前端爱好者，喜欢分享技术和生活。</p>
                </div>
                <div class="widget">
                    <h3>热门文章</h3>
                    <ul>
                        <li><a href="#">文章标题一</a></li>
                        <li><a href="#">文章标题二</a></li>
                        <li><a href="#">文章标题三</a></li>
                    </ul>
                </div>
            </aside>
        </div>
    </div>
    <!-- 4. 底部页脚 -->
    <footer class="main-footer">
        <div class="container">
            <p>&copy; 2025 我的个人博客. All rights reserved.</p>
        </div>
    </footer>
</body>
</html>

代码解析：

  • <!DOCTYPE html>：声明文档类型。
  • <head>：包含页面的元数据，如标题、字符编码、引入的 CSS 文件。
  • <body>：页面的可见内容。
  • <header class="main-header">：定义页面或区块的头部，这里是整个网站的导航栏。
  • <div class="container">：一个通用的容器，我们用它来包裹内容并居中，这是布局中非常常见的一个技巧。
  • <main class="content">：页面的主要内容区域。
  • <article class="post">：代表一篇独立的文章，语义化标签。
  • <aside class="sidebar">：定义页面内容之外的内容，比如侧边栏。
  • <footer class="main-footer">：定义页面或区块的底部。

你的页面看起来会非常朴素，只有文字和基本的块级元素排列。

第三步：编写 CSS 样式 (style.css)

我们打开 style.css 文件，为 HTML 的“骨架”穿上“衣服”，我们将从整体布局开始，逐步细化。

div css实战教程
（图片来源网络，侵删）

重置与基础样式

设置一些基础样式,让页面看起来更整洁。

/* style.css */
/* 1. 全局样式 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    background-color: #f4f4f4;
    color: #333;
}
.container {
    width: 80%;
    margin: 0 auto; /* 左右外边距自动，实现水平居中 */
    padding: 20px; /* 内边距，避免内容贴边 */
}
/* 2. 链接样式 */
a {
    text-decoration: none;
    color: #0066cc;
}
a:hover {
    text-decoration: underline;
}
/* 3. 列表样式重置 */
ul {
    list-style: none; /* 移除列表前的点 */
    padding: 0;
    margin: 0;
}

顶部导航栏

/* 4. 顶部导航栏 */
.main-header {
    background-color: #333;
    color: #fff;
    padding: 1rem 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.main-header .container {
    display: flex; /* 使用 Flexbox 布局，让标题和导航并排 */
    justify-content: space-between; /* 两端对齐 */
    align-items: center; /* 垂直居中 */
}
.main-header h1 {
    margin: 0;
    font-size: 1.5rem;
}
.main-header nav ul {
    display: flex; /* 让列表项横向排列 */
}
.main-header nav ul li {
    margin-left: 20px; /* 列表项之间的间距 */
}

关键点：display: flex 是现代布局的利器，可以轻松实现元素的并排、对齐和分布。

区与侧边栏布局 (核心)

这是整个页面的核心,我们将使用 Flexbox 来实现左右两栏布局。

/* 5. 主要内容区与侧边栏 */
.main-content-wrapper {
    padding: 20px 0;
}
.main-content-wrapper .container {
    display: flex; /* 容器变为 Flex 布局 */
    gap: 20px; /* 子元素之间的间距 */
}
.content {
    flex: 3; /* 内容区占据 3 份宽度 */
}
.sidebar {
    flex: 1; /* 侧边栏占据 1 份宽度 */
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

关键点：

  • display: flex：将 .container 变为 Flex 容器，其直接子元素（.content 和 .sidebar）会成为 Flex 项目。
  • flex: 3 和 flex: 1：这是一种简写，相当于 flex-grow: 3 和 flex-grow: 1，它定义了项目如何分配容器的剩余空间。3:1 的比例让内容区比侧边栏宽三倍。
  • gap: 20px：为 Flex 项目之间设置一个固定的间距，非常方便。

文章与组件样式

我们来美化文章列表和侧边栏组件。

/* 6. 文章样式 */
.post {
    background-color: #fff;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.post h2 {
    margin-top: 0;
    color: #222;
}
.post-meta {
    font-size: 0.9rem;
    color: #777;
    margin-bottom: 15px;
}
.read-more {
    display: inline-block; /* 让链接可以设置宽高和内外边距 */
    margin-top: 15px;
    padding: 8px 15px;
    background-color: #0066cc;
    color: #fff;
    border-radius: 4px;
}
.read-more:hover {
    background-color: #0052a3;
    text-decoration: none; /* 悬停时去掉下划线 */
}
/* 7. 侧边栏组件样式 */
.widget {
    margin-bottom: 20px;
}
.widget h3 {
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.widget ul li {
    padding: 5px 0;
}
.widget ul li a {
    color: #555;
}
.widget ul li a:hover {
    color: #0066cc;
}
/* 8. 页脚样式 */
.main-footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
    margin-top: 20px;
}

第四步：预览与调整

用浏览器打开 my-blog 文件夹里的 index.html 文件，你应该能看到一个布局清晰、样式美观的个人博客首页了！

调整与优化：

  • 尝试修改 style.css 中的颜色值（如 background-color）、字体大小（font-size）、间距（margin, padding）等，观察页面变化，加深对 CSS 的理解。
  • 尝试修改 .content 和 .sidebar 的 flex 值，看看布局如何变化。

进阶与扩展

你已经掌握了 DIV+CSS 布局的基础！接下来可以探索更高级的话题：

  1. 响应式设计：

    • 媒体查询：使用 @media 查询，让页面在不同尺寸的设备（手机、平板、桌面）上都能良好显示，在小屏幕上，让侧边栏跑到内容下方。
    • 示例：
      @media (max-width: 768px) {
    .main-content-wrapper .container {
        flex-direction: column; /* 在小屏幕上改为纵向排列 */
    }
}

  2. Grid 布局：

    • CSS Grid 是一个更强大的二维布局系统，非常适合复杂的页面布局，可以学习 display: grid、grid-template-columns、grid-template-rows 等属性。

  3. 定位：

    • 学习 position 属性（static, relative, absolute, fixed, sticky），用于实现元素的精确定位，如固定导航栏、模态框等。

  4. CSS 框架：

    学习使用 Bootstrap 或 Tailwind CSS 等框架，它们提供了大量的预定义样式和组件，可以极大地加速开发，但在此之前，一定要打好原生 CSS 的基础，否则你将无法理解框架的工作原理。

通过这个实战项目,你已经体验了从 HTML 结构搭建到 CSS 样式美化的完整流程。“结构分离” 是核心思想，“多写多练” 是提升的唯一途径。

祝你学习愉快,早日成为前端高手！