第一步：核心概念 - HTML 与 CSS 的分工

在开始写代码之前,最重要的一件事是理解 HTML 和 CSS 各自扮演什么角色，一个绝佳的比喻是 建造一栋房子：

html css div网页设.
（图片来源网络，侵删）

  • HTML (HyperText Markup Language)：是房子的 结构和骨架，它定义了哪里是客厅、哪里是卧室、哪里是门窗，它使用各种“标签”（如 <div>, <p>, <h1>）来标记内容的类型和层级。

    • ：它只关心“这是什么”，而不关心“它长什么样”。

  • CSS (Cascading Style Sheets)：是房子的 装修和设计，它决定了墙壁的颜色、家具的样式、窗帘的材质和布局，它选择 HTML 中的元素（比如那个叫“客厅”的 <div>），并为其添加样式。

    • 关注表现：它只关心“它应该长什么样”，而不关心“它是什么内容”。

HTML 负责内容，CSS 负责样式，两者紧密合作，才能构建出美观且功能完善的网页。

第二步：HTML 的基础 - 搭建骨架

HTML 由一系列的 组成，大多数标签成对出现，如 <p> 和 </p>，分别代表标签的开始和结束。

html css div网页设.
（图片来源网络，侵删）

最基本的 HTML 文档结构

任何 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"> <!-- 在这里引入我们的 CSS 文件 -->
</head>
<body>
    <!-- 网页的所有内容都放在这里 -->
</body>
</html>
  • <!DOCTYPE html>：告诉浏览器这是一个 HTML5 文档。
  • <html>：根元素，包裹了整个页面的内容。
  • <head>：包含页面的元数据，比如标题、字符编码、引入的 CSS 文件等，这些内容不会直接显示在页面上。
  • <title>：显示在浏览器标签栏上的页面标题。
  • <link rel="stylesheet" href="style.css">》：**关键一步**！这行代码告诉页面：“去加载一个名为style.css` 的文件，并把它作为我们的样式表”。
  • <body>：包含所有可见的页面内容，比如文字、图片、视频等。

引入 <div>

<div> (division 的缩写) 是一个 块级容器，它本身没有任何特定的含义，就像一个空的纸盒子，专门用来包裹和分组其他 HTML 元素，方便我们用 CSS 进行整体控制。

示例： 创建一个简单的页面布局

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">Div 布局示例</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>我的网站</h1>
        <p>这里是网站的导航栏</p>
    </header>
    <div class="main-container">
        <div class="sidebar">
            <h2>侧边栏</h2>
            <p>一些链接或小工具</p>
        </div>
        <div class="content">
            <h2>主要内容</h2>
            <p>这里是网页的核心内容区域。</p>
            <p>你可以在这里放置文章、图片、视频等。</p>
        </div>
    </div>
    <footer>
        <p>&copy; 2025 我的网站. 保留所有权利.</p>
    </footer>
</body>
</html>

解读：

html css div网页设.
（图片来源网络，侵删）
  • 我们创建了 <header>, <main-container>, <sidebar>, <content>, <footer> 这些“盒子”。
  • 使用 class 属性（如 class="main-container"）给每个盒子起一个独一无二的名字，这样 CSS 就能精准地找到它们。
  • 注意 <div class="main-container"> 包裹了 <div class="sidebar"> 和 <div class="content">，这体现了层级结构。

第三步：CSS 的基础 - 装修与美化

我们创建一个名为 style.css 的文件，与你的 HTML 文件放在同一个文件夹下，我们开始用 CSS 来美化刚才搭建的骨架。

CSS 的基本语法

CSS 规则由 选择器 和 声明块 组成。

选择器 {
  属性1: 值1;
  属性2: 值2;
}
  • 选择器：告诉浏览器要给哪个 HTML 元素添加样式（.main-container）。
  • 属性：你想改变的样式特性（width, color, background-color）。
  • 值：属性的设置值（800px, blue, #f0f0f0）。

为我们的 div 添加样式

打开 style.css 文件，输入以下代码：

/* 全局样式，重置一些默认边距和内边距 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}
/* 页头样式 */
header {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
}
区域的容器 */
.main-container {
    width: 80%;
    margin: 20px auto; /* 上下外边距20px，左右自动居中 */
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ddd;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
/* 侧边栏样式 */
.sidebar {
    width: 25%;
    float: left; /* 让侧边栏向左浮动 */
    background-color: #e9e9e9;
    padding: 15px;
    box-sizing: border-box; /* 确保 padding 不会增加元素的总宽度 */
}
区域样式 */
.content {
    width: 75%;
    float: left; /* 让内容区域也向左浮动，就会排在侧边栏旁边 */
    padding: 15px;
    box-sizing: border-box; /* 确保 padding 不会增加元素的总宽度 */
}
/* 页脚样式 */
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    clear: both; /* 清除浮动，防止页脚被“浮动”的元素影响 */
}

代码解读：

  • body { ... }：设置了整个页面的默认字体、背景色和外边距。
  • .main-container { ... }：这个选择器前面的 表示我们通过 class 来选择，我们设置了它的宽度、自动外边距（使其水平居中）、背景色和内边距。
  • .sidebar 和 .content：这是我们布局的核心，我们让它们都 float: left（向左浮动），并分别设置宽度（25% + 75% = 100%），这样它们就会并排显示。
  • box-sizing: border-box;：这是一个非常有用的属性，它告诉浏览器，元素的 width 和 height 应该包含 padding 和 border，这样设置宽度时就不会因为加了内边距而撑破容器。
  • footer { clear: both; }：clear 属性用于清除浮动，因为侧边栏和内容区域都是浮动的，它们会影响到后面的元素（页脚）。clear: both; 确保页footer会出现在它们下方。

第四步：整合与预览

你拥有两个文件：

  1. index.html (或你任意命名的 HTML 文件)
  2. style.css

确保它们在同一个文件夹下,用浏览器打开 index.html 文件，你就能看到一个由 CSS 美化过的、带有基本布局的网页了！

最终效果预览：

  • 一个深色的页头。
  • 一个白色背景的主要内容区域,水平居中，区域内，左侧是浅灰色的侧边栏，右侧是白色的主内容区，两者并排。
  • 一个深色的页脚位于最下方。

第五步：进阶与最佳实践

恭喜你,你已经掌握了网页布局的基础！接下来可以探索更多：

  1. Flexbox 布局：float 是一种比较古老的布局方式，现代网页开发更推荐使用 Flexbox，它更简单、更强大，尤其适合一维布局（行或列）。

    • 只需将 .main-container 的 CSS 改为：
      .main-container {
    display: flex; /* 启用 Flexbox */
    /* ... 其他样式 ... */
}
.sidebar {
    /* 不再需要 float 和 width */
    flex: 1; /* 占用 1 份空间 */
    background-color: #e9e9e9;
    padding: 15px;
}
.content {
    /* 不再需要 float 和 width */
    flex: 3; /* 占用 3 份空间，所以侧边栏:内容 = 1:3 */
    padding: 15px;
}

  2. Grid 布局：CSS Grid 是一个二维布局系统，非常适合创建复杂的网页整体布局（比如页头、侧边栏、主内容、页脚）。

  3. 响应式设计：让你的网页在不同尺寸的设备（手机、平板、电脑）上都能良好显示，这通常需要结合媒体查询。

    • 在 style.css 末尾添加：
      @media (max-width: 768px) {
    /* 当屏幕宽度小于 768px 时（如手机） */
    .sidebar, .content {
        width: 100%; /* 侧边栏和内容都占满宽度 */
        float: none; /* 取消浮动 */
    }
}

通过以上步骤,你走完了从零开始使用 HTML <div> 和 CSS 设计一个网页的完整流程：

  1. 理解分工：HTML 是骨架，CSS 是皮肤。
  2. 搭建骨架：用 HTML 标签（特别是 <div>）创建页面结构和内容。
  3. 引入样式：在 HTML 的 <head> 中用 <link> 标签连接 CSS 文件。
  4. 美化皮肤：用 CSS 选择器找到 HTML 元素，并通过属性和值来设计它们的样式。
  5. 实践布局：学习使用 float、Flexbox、Grid 等技术来组织页面元素的位置。
  6. 持续学习：探索响应式设计等更高级的主题。

你可以基于这个基础,不断添加更多的内容和样式，创造出属于你自己的精美网页！