div+css网页教程从哪开始学？-建站教程-锦华智联科技

教程目录

第一步：理解核心概念
（图片来源网络，侵删）
- 什么是 HTML？网页的骨架
- 什么是 CSS？网页的衣裳
- 什么是 <div>？万能的“积木块”
- 为什么使用 <div> 和 CSS？—— 内容与样式的分离
第二步：准备工作
- 创建你的项目文件夹
- 选择代码编辑器
- 创建第一个 HTML 和 CSS 文件
第三步：HTML 结构搭建
- 使用 <div> 搭建页面布局
- 语义化标签简介 (更好的实践)
第四步：CSS 样式美化
- 如何连接 CSS 和 HTML
- CSS 选择器：如何找到你的 <div>
- 常用 CSS 属性：盒模型、文本、颜色、背景
第五步：实战项目 - 制作一个简单的个人主页
（图片来源网络，侵删）
- 需求分析
- 结构实现
- 样式实现
- 最终效果与总结
第六步：进阶学习方向

第一步：理解核心概念

在开始动手之前，我们先要明白我们在用什么,以及为什么这么用。

什么是 HTML？网页的骨架

HTML (HyperText Markup Language) 是超文本标记语言，它不是一种编程语言，而是一种标记语言,用来描述网页的结构和内容。

你可以把它想象成建筑的钢筋骨架，它定义了哪里是头部，哪里是正文，哪里是图片,哪里是链接。

（图片来源网络，侵删）

<!DOCTYPE html>
<html>
<head>我的网页</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个段落。</p>
    <img src="image.jpg" alt="一张图片">
</body>
</html>

什么是 CSS？网页的衣裳

CSS (Cascading Style Sheets) 是层叠样式表，它用来描述 HTML 元素在屏幕上如何显示——比如颜色、字体、间距、布局等。

你可以把它想象成建筑的装修和外观，同样的骨架（HTML），可以用不同的 CSS 装扮成完全不同风格的建筑（网页）。

body {
    background-color: #f0f0f0; /* 设置背景色为浅灰色 */
    font-family: Arial, sans-serif; /* 设置字体 */
}
h1 {
    color: blue; /* 标题颜色为蓝色 */
    text-align: center; /* 标题居中 */
}

什么是 `<div>`？万能的“积木块”

<div> (Division 的缩写) 是 HTML 中一个最普通、最常用的块级容器，它本身没有任何特定的含义，就是一个用来包裹其他内容的“盒子”或“容器”。

你可以把它想象成乐高积木里的基础板块，你可以用它来构建页面的任何区域，比如页头、侧边栏、内容区、页脚等。

<div class="header">
    <h1>网站标题</h1>
</div>
<div class="main-content">
    <p>这里是主要内容...</p>
</div>
<div class="footer">
    <p>版权信息</p>
</div>

为什么使用 `<div>` 和 CSS？—— 内容与样式的分离

这是现代网页开发最重要的原则之一：

HTML 负责内容：只管“有什么”，不管“长什么样”。
CSS 负责样式：只管“长什么样”，不管“有什么”。

这样做的好处：

易于维护：想换网站风格？只需修改 CSS 文件，HTML 内容保持不变。
加载更快：浏览器可以缓存 CSS 文件,减少重复下载。
代码更清晰代码和样式代码分离,易于阅读和协作。

第二步：准备工作

工欲善其事,必先利其器。

创建项目文件夹 在你的电脑上创建一个新文件夹，例如命名为 my-website,我们所有的文件都会放在这里。
选择代码编辑器 你需要一个能写代码的编辑器，强烈推荐 Visual Studio Code (VS Code)，它是目前最流行且免费的代码编辑器,功能强大。
- 下载地址：https://code.visualstudio.com/
- 安装后，可以安装一些插件，Live Server，它可以让你在保存代码后自动刷新浏览器,非常方便。
创建第一个 HTML 和 CSS 文件 在 my-website 文件夹中,创建两个新文件：
- index.html (这是网站的首页)
- style.css (这是网站的样式表)
你的文件夹结构现在应该是这样的：
```
my-website/
├── index.html
└── style.css
```

第三步：HTML 结构搭建

现在我们来用 <div> 搭建一个网页的基本结构。

打开 `index.html`，输入以下代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的第一个div+css网页</title>
    <!-- 这里我们稍后会链接CSS文件 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 1. 页头：包含网站Logo和导航菜单 -->
    <div class="header">
        <h1>我的网站</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">lt;/a></li>
                <li><a href="#">联系</a></li>
            </ul>
        </nav>
    </div>
    <!-- 2. 主要内容区：包含文章和侧边栏 -->
    <div class="main-container">
        <!-- 2.1 文章内容 -->
        <div class="content">
            <h2>欢迎阅读</h2>
            <p>这是一个使用 div 和 CSS 构建的简单网页示例，我们使用 div 元素来创建页面的不同区域，然后使用 CSS 来为这些区域添加样式和布局。</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
        </div>
        <!-- 2.2 侧边栏 -->
        <div class="sidebar">
            <h3>关于我</h3>
            <p>我是一个热爱前端开发的学习者。</p>
        </div>
    </div>
    <!-- 3. 页脚：包含版权信息 -->
    <div class="footer">
        <p>&copy; 2025 我的网站. 保留所有权利.</p>
    </div>
</body>
</html>

代码解释：

<!DOCTYPE html>：声明文档类型。
<html>：根元素,包裹整个页面。
<head>：包含页面的元数据（给浏览器和搜索引擎看的信息）。
<title>：浏览器标签页上显示的标题。
<link rel="stylesheet" href="style.css">：这是关键！ 它告诉浏览器 index.html 页面需要使用 style.css 文件来定义样式。
<body>：包含页面上所有可见的内容。
<div class="...">：我们为每个 <div> 赋予了一个 class 属性，这是一个独一无二的“名字”，方便 CSS 来识别和定位它。
- class="header"：页头。
- class="main-container"：一个包裹内容区和侧边栏的大容器。
- class="content"区。
- class="sidebar"：侧边栏。
- class="footer"：页脚。

用浏览器打开 index.html，你会看到一个没有任何样式的、非常朴素的网页，这就是我们的“骨架”做好了。

第四步：CSS 样式美化

现在轮到 CSS 大显身手了。

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

/* 全局重置，让所有元素的边距和填充都为0，保证样式一致 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 关键！让宽度和高度包含padding和border */
}
body {
    font-family: 'Helvetica Neue', Arial, sans-serif; /* 设置一个好看的字体 */
    line-height: 1.6; /* 设置行高，增加可读性 */
    background-color: #f4f4f4; /* 设置页面背景色 */
    color: #333; /* 设置默认文字颜色 */
}
/* 页头样式 */
.header {
    background-color: #333; /* 深色背景 */
    color: #fff; /* 白色文字 */
    padding: 1rem; /* 内边距 */
    text-align: center; /* 文字居中 */
}
.header nav ul {
    list-style: none; /* 去掉列表项前面的点 */
    padding-top: 1rem;
}
.header nav ul li {
    display: inline; /* 让列表项水平排列 */
    margin: 0 15px; /* 设置间距 */
}
容器和侧边栏的布局 */
.main-container {
    display: flex; /* 使用Flexbox进行布局，这是现代网页布局的利器 */
    max-width: 1200px; /* 设置最大宽度 */
    margin: 2rem auto; /* 上下边距2rem，左右自动（实现居中） */
    padding: 0 1rem; /* 左右内边距 */
}
区样式 */
.content {
    flex: 3; /* 内容区占据3份空间 */
    background: #fff; /* 白色背景 */
    padding: 2rem;
    border-radius: 5px; /* 圆角 */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* 阴影效果 */
}
/* 侧边栏样式 */
.sidebar {
    flex: 1; /* 侧边栏占据1份空间 */
    background: #fff;
    padding: 2rem;
    margin-left: 2rem; /* 与内容区的间距 */
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
/* 页脚样式 */
.footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1rem;
    margin-top: 2rem; /* 与上方内容的间距 */
}

代码解释：

一个通配符选择器，作用于页面上的所有元素，我们用它来做全局重置,让不同浏览器的默认样式趋于一致。
body { ... }：设置整个页面的基础字体、背景色等。
.header { ... }：类选择器，选择所有 class="header" 的 <div>，我们设置了背景色、文字颜色和内边距。
.main-container { ... }：这里是布局的关键！我们使用了 display: flex;，这使得它的直接子元素（.content 和 .sidebar）会水平排列。
.content { flex: 3; } 和 .sidebar { flex: 1; }：在 Flexbox 布局中，这表示 .content 占据可用空间的3份，.sidebar 占据1份，它们会按比例分配空间，实现了常见的“两栏布局”。
.footer { ... }：设置页脚的样式。

保存 style.css 文件，然后刷新浏览器中的 index.html，你会看到一个结构清晰、样式美观的网页出现了！

第五步：实战项目 - 制作一个简单的个人主页

我们已经完成了核心教程，你可以尝试自己动手做一个更复杂一点的页面,比如一个个人主页。

需求分析： 一个个人主页通常包含：

Hero Section (英雄区)：一张大背景图,你的名字和一句简介。
About Me (关于我)：一段个人介绍。
My Skills (我的技能)：以列表或进度条形式展示你的技能。
Contact (联系方式)：邮箱、社交媒体链接等。

HTML 结构 (index.html)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">张三的个人主页</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="hero">
        <div class="hero-content">
            <h1>你好，我是张三</h1>
            <p>一名充满激情的前端开发者</p>
        </div>
    </div>
    <div class="about">
        <h2>关于我</h2>
        <p>我热爱编程，喜欢用代码创造美好的用户体验...</p>
    </div>
    <div class="skills">
        <h2>我的技能</h2>
        <ul>
            <li>HTML5</li>
            <li>CSS3</li>
            <li>JavaScript</li>
            <li>React</li>
        </ul>
    </div>
    <div class="contact">
        <h2>联系我</h2>
        <p>邮箱: zhangsan@example.com</p>
    </div>
    <div class="footer">
        <p>&copy; 2025 张三. All Rights Reserved.</p>
    </div>
</body>
</html>

CSS 样式 (style.css)

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
}
/* Hero Section */
.hero {
    height: 100vh; /* 让英雄区占据整个视口高度 */
    background-image: url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?q=80&w=2070&auto=format&fit=crop'); /* 使用一张漂亮的图片作为背景 */
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
}
.hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}
/* 其他通用部分 */
.about, .skills, .contact {
    padding: 4rem 2rem;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}
h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #333;
}
/* 页脚 */
.footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1rem;
    margin-top: 2rem;
}

任务： 尝试为 .about, .skills, .contact 这几个部分添加一些独特的背景色、边距和阴影，让它们在视觉上与 hero 区分开。

.about {
    background-color: #f9f9f9;
}
.skills ul {
    list-style: none;
    padding: 0;
}
.skills ul li {
    background: #e0e0e0;
    margin: 0.5rem 0;
    padding: 1rem;
    border-radius: 5px;
}

第六步：进阶学习方向

恭喜你！你已经掌握了使用 <div> 和 CSS 制作网页的基础,你可以探索以下方向来提升自己：

响应式设计：
- 目标：让你的网页在手机、平板、电脑上都能良好显示。
- 学习：媒体查询 (@media)、弹性布局 (flex)、网格布局 (grid)。
更高级的布局技术：
- CSS Grid：更强大的二维布局系统,非常适合复杂的页面结构。
- Flexbox：我们已经用到了,深入学习它的各种属性。
CSS 框架：
- 目标：使用别人写好的 CSS 代码库,快速构建美观的网站。
- 学习：Bootstrap, Tailwind CSS,它们提供了大量预定义的样式和组件。
CSS 动画和过渡：
- 目标：为网页添加交互效果,让页面更生动。
- 学习：transition, transform, @keyframes。
CSS 预处理器：
- 目标：用编程的方式写 CSS,提高代码复用性和可维护性。
- 学习：Sass, Less。

希望这份详细的教程能帮助你顺利入门！多动手实践，你会发现网页开发的乐趣无穷,祝你学习愉快！

div+css网页教程从哪开始学？