文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >专栏 >从 0 到 1 彻底掌控网页美化：五万字 CSS 完全实战指南（附 180 + 可复制调试代码）

从 0 到 1 彻底掌控网页美化：五万字 CSS 完全实战指南（附 180 + 可复制调试代码）

作者头像
玄同765
发布于 2026-01-14 14:14:29
发布于 2026-01-14 14:14:29
390
举报
文章被收录于专栏：大模型开发-技术博客大模型开发-技术博客
在这里插入图片描述
在这里插入图片描述

【个人主页：】

大语言模型（LLM）开发工程师｜中国传媒大学·数字媒体技术（智能交互与游戏设计） 深耕领域：大语言模型开发 / RAG知识库 / AI Agent落地 / 模型微调 技术栈：Python / LangChain/RAG（Dify+Redis+Milvus）| SQL/NumPy | FastAPI+Docker ️ 工程能力：专注模型工程化部署、知识库构建与优化，擅长全流程解决方案 专栏传送门：LLM大模型开发 项目实战指南、Python 从真零基础到纯文本 LLM 全栈实战、​​​​​从零学 SQL + 大模型应用落地、大模型开发小白专属：从 0 入门 Linux&Shell 「让AI交互更智能，让技术落地更高效」 欢迎技术探讨/项目合作！ 关注我，解锁大模型与智能交互的无限可能！

摘要

这是为从未接触过编程的零基础学员打造的 50000 字 + CSS 全教程，从最基础的 CSS 是什么、怎么写讲起，逐章拆解选择器、盒模型、文本样式、背景与边框、Flex/Grid 布局、响应式、动画与过渡等 12 大核心模块，180 + 代码逐行注释，3 个完整企业级项目（求职简历、电商首页、后台管理系统）串联所有技能，7 天内可独立交付可上线的静态前端页面框架。

正文

第一章 认识 CSS
1.1 什么是 CSS

CSS 的全称是 Cascading Style Sheets，中文译名是层叠样式表。它不是编程语言，而是一种用于描述 HTML 或 XML 文档样式的标记语言。简单来说，HTML 负责网页的结构和内容，CSS 负责网页的外观和布局。

1.2 CSS 的发展历程

CSS 从 1996 年诞生至今，已经经历了多个版本的迭代，每个版本都在不断完善功能和规范。以下是 CSS 的主要发展历程：

版本

发布时间

主要新增功能

CSS 1.0

1996 年 12 月

基本的文本、颜色、背景、边框、间距等样式

CSS 2.0

1998 年 5 月

浮动布局、定位布局、媒体查询、表格样式等

CSS 2.1

2011 年 6 月

修复了 CSS 2.0 的错误，增加了新属性，删除了过时属性

CSS 3.0

2012 年 6 月

模块化设计，新增圆角、阴影、渐变、动画、过渡、Flex 布局、Grid 布局等

CSS 4.0

正在开发中

新增变量、嵌套规则、网格间距、渐变增强等

目前，CSS3 是使用最广泛的版本，所有现代浏览器（如 Chrome、Firefox、Safari、Edge 等）都对其有很好的支持。

1.3 CSS 的工作原理

当浏览器加载 HTML 文档时，会同时加载 CSS 样式表，并根据 CSS 的规则解析和渲染 HTML 文档。具体步骤如下：

  1. 浏览器下载 HTML 和 CSS 文件。
  2. 解析 HTML 文件，构建 DOM 树（文档对象模型）。
  3. 解析 CSS 文件，构建 CSSOM 树（CSS 对象模型）。
  4. 将 DOM 树和 CSSOM 树合并成渲染树（Render Tree）。
  5. 对渲染树进行布局（Layout），计算每个元素的大小和位置。
  6. 对渲染树进行绘制（Painting），将元素绘制到浏览器窗口中。
  7. 对渲染树进行合成（Compositing），将绘制好的图层合成在一起，显示最终的网页。
1.4 CSS 的三种引入方式

CSS 有三种引入方式：内联样式、内部样式表和外部样式表。

引入方式

语法

优点

缺点

适用场景

内联样式

<tag style="property: value; property: value;">

优先级最高，直接作用于元素，无需额外文件

代码冗余，不易维护，样式和结构混合

单个元素的特殊样式

内部样式表

<style> selector { property: value; property: value; } </style>

样式和结构分离，易于维护，无需额外文件

只作用于当前页面，无法复用

单个页面的所有样式

外部样式表

<link rel="stylesheet" href="style.css">

样式和结构完全分离，易于维护，可复用，浏览器会缓存

需要额外文件，加载时间稍长

多个页面的共同样式

以下是三种引入方式的示例代码：

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS三种引入方式示例</title>
    <!-- 内部样式表 -->
    <style>
        /* 选择器：所有p标签 */
        p {
            /* 属性：颜色 */
            color: blue;
            /* 属性：字体大小 */
            font-size: 18px;
            /* 属性：行高 */
            line-height: 1.6;
        }
    </style>
    <!-- 外部样式表 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 内联样式 -->
    <h1 style="color: red; font-size: 24px; text-align: center;">CSS三种引入方式</h1>
    <p>这是内部样式表设置的段落。</p>
    <p class="external">这是外部样式表设置的段落。</p>
</body>
</html>

外部样式表 style.css 的代码：

代码语言：javascript
复制
/* 选择器：class为external的所有元素 */
.external {
    /* 属性：颜色 */
    color: green;
    /* 属性：字体大小 */
    font-size: 20px;
    /* 属性：行高 */
    line-height: 1.8;
    /* 属性：字体粗细 */
    font-weight: bold;
}
1.5 常用的 CSS 编辑工具

对于初学者来说，选择一个合适的 CSS 编辑工具可以大大提高学习效率。以下是一些常用的 CSS 编辑工具：

  1. 文本编辑器：如 Notepad++、Sublime Text、Visual Studio Code（VS Code）等。这些工具功能强大，支持代码高亮、自动补全、语法检查等功能，是开发 CSS 样式表的首选工具。
  2. 在线编辑器：如 CodePen、JSFiddle、RunJS 等。这些工具不需要安装，直接在浏览器里就能编写和运行 HTML、CSS、JavaScript 代码，适合快速调试和分享代码。
  3. 集成开发环境（IDE）：如 WebStorm、IntelliJ IDEA 等。这些工具功能非常强大，支持项目管理、版本控制、调试、测试等功能，适合开发大型 Web 应用。
  4. CSS 预处理器编辑器：如 LESS、Sass、Stylus 等。这些工具需要安装相应的预处理器软件，支持变量、嵌套规则、混合宏等功能，适合开发复杂的 CSS 样式表。
第二章 CSS 基础选择器
2.1 什么是 CSS 选择器

CSS 选择器是 CSS 规则的一部分，用于指定 CSS 样式应用到哪些 HTML 元素上。简单来说，CSS 选择器就是用来 “选择” HTML 元素的工具。

2.2 基础选择器的分类

CSS 基础选择器主要分为以下几类：

选择器类型

语法

作用

示例

元素选择器

tag

选择所有指定标签的元素

p 选择所有 p 标签

ID 选择器

#id

选择 ID 属性值为指定值的唯一元素

#header 选择 ID 为 header 的元素

类选择器

.class

选择 class 属性值为指定值的所有元素

.container 选择 class 为 container 的所有元素

通配符选择器

*

选择所有 HTML 元素

* 选择所有元素

属性选择器

[attribute]、[attribute=value]、[attribute^=value]、[attribute$=value]、[attribute*=value]

选择具有指定属性或属性值的元素

[type="text"] 选择 type 属性值为 text 的元素

后代选择器

selector1 selector2

选择 selector1 元素的所有后代 selector2 元素

div p 选择 div 元素的所有后代 p 元素

子元素选择器

selector1 > selector2

选择 selector1 元素的所有直接子元素 selector2 元素

div > p 选择 div 元素的所有直接子元素 p 元素

相邻兄弟选择器

selector1 + selector2

选择 selector1 元素的下一个相邻兄弟 selector2 元素

h1 + p 选择 h1 元素的下一个相邻兄弟 p 元素

通用兄弟选择器

selector1 ~ selector2

选择 selector1 元素的所有后面的兄弟 selector2 元素

h1 ~ p 选择 h1 元素的所有后面的兄弟 p 元素

以下是基础选择器的示例代码：

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS基础选择器示例</title>
    <style>
        /* 元素选择器 */
        p {
            color: blue;
            font-size: 18px;
        }
        /* ID选择器 */
        #header {
            color: red;
            font-size: 24px;
            text-align: center;
        }
        /* 类选择器 */
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        /* 通配符选择器 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* 属性选择器 */
        [type="text"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }
        /* 后代选择器 */
        div p {
            color: green;
            font-style: italic;
        }
        /* 子元素选择器 */
        div > p {
            color: purple;
            font-weight: bold;
        }
        /* 相邻兄弟选择器 */
        h1 + p {
            color: orange;
            text-decoration: underline;
        }
        /* 通用兄弟选择器 */
        h1 ~ p {
            color: pink;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 id="header">CSS基础选择器示例</h1>
        <p>这是h1的相邻兄弟p元素，使用相邻兄弟选择器。</p>
        <div>
            <p>这是div的直接子p元素，使用子元素选择器和后代选择器。</p>
            <span>
                <p>这是div的间接后代p元素，使用后代选择器。</p>
            </span>
        </div>
        <p>这是h1的通用兄弟p元素，使用通用兄弟选择器。</p>
        <input type="text" placeholder="请输入文本">
    </div>
</body>
</html>
第三章 CSS 高级选择器
3.1 伪类选择器

CSS 伪类选择器用于选择元素的特定状态，如鼠标悬停、焦点、第一个子元素等。伪类选择器的语法是selector:pseudo-class。

以下是常用的伪类选择器：

伪类选择器

作用

示例

:hover

选择鼠标悬停的元素

a:hover 选择鼠标悬停的 a 标签

:active

选择正在被点击的元素

a:active 选择正在被点击的 a 标签

:focus

选择获得焦点的元素

input:focus 选择获得焦点的 input 标签

:visited

选择已访问过的链接

a:visited 选择已访问过的 a 标签

:link

选择未访问过的链接

a:link 选择未访问过的 a 标签

:first-child

选择父元素的第一个子元素

p:first-child 选择父元素的第一个 p 标签

:last-child

选择父元素的最后一个子元素

p:last-child 选择父元素的最后一个 p 标签

:nth-child(n)

选择父元素的第 n 个子元素

p:nth-child(2) 选择父元素的第二个 p 标签

:nth-of-type(n)

选择父元素的第 n 个指定类型的子元素

p:nth-of-type(2) 选择父元素的第二个 p 标签

:only-child

选择父元素的唯一子元素

p:only-child 选择父元素的唯一 p 标签

:empty

选择没有内容的元素

p:empty 选择没有内容的 p 标签

:checked

选择被选中的表单元素

input:checked 选择被选中的 input 标签

:disabled

选择被禁用的表单元素

input:disabled 选择被禁用的 input 标签

:enabled

选择被启用的表单元素

input:enabled 选择被启用的 input 标签

以下是伪类选择器的示例代码：

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS伪类选择器示例</title>
    <style>
        /* 链接伪类 */
        a:link {
            color: blue;
            text-decoration: none;
        }
        a:visited {
            color: purple;
        }
        a:hover {
            color: red;
            text-decoration: underline;
        }
        a:active {
            color: orange;
        }
        /* 表单伪类 */
        input:focus {
            outline: none;
            border: 2px solid blue;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
        }
        input:checked {
            accent-color: blue;
        }
        input:disabled {
            background-color: #f5f5f5;
            color: #6c757d;
        }
        /* 结构伪类 */
        p:first-child {
            color: red;
            font-weight: bold;
        }
        p:last-child {
            color: green;
            font-style: italic;
        }
        p:nth-child(2) {
            color: blue;
            text-decoration: underline;
        }
        p:nth-of-type(3) {
            color: purple;
            font-size: 20px;
        }
        p:only-child {
            color: orange;
            text-align: center;
        }
        p:empty {
            height: 20px;
            background-color: #f5f5f5;
            border: 1px dashed #ccc;
        }
    </style>
</head>
<body>
    <h1>CSS伪类选择器示例</h1>
    <a href="https://www.baidu.com" target="_blank">百度</a>
    <a href="https://www.google.com" target="_blank">谷歌</a>
    <a href="https://www.bing.com" target="_blank">必应</a>
    <br><br>
    <input type="text" placeholder="请输入文本">
    <br><br>
    <input type="checkbox" id="checkbox1">
    <label for="checkbox1">选项1</label>
    <br><br>
    <input type="text" disabled placeholder="禁用的文本框">
    <br><br>
    <div>
        <p>这是第一个子p元素。</p>
        <p>这是第二个子p元素。</p>
        <span>这是span元素。</span>
        <p>这是第三个子p元素（第4个元素，第3个p类型元素）。</p>
    </div>
    <br><br>
    <div>
        <p>这是唯一子p元素。</p>
    </div>
    <br><br>
    <div>
        <p></p>
    </div>
</body>
</html>
第四章 CSS 盒模型深度解析
4.1 什么是 CSS 盒模型

CSS 盒模型是 CSS 布局的基础，它将每个 HTML 元素看作是一个矩形的盒子，包含内容区、内边距、边框和外边距四个部分。

4.2 盒模型的组成

CSS 盒模型的组成部分如下：

  1. 内容区（Content）：盒子的中心部分，用于存放文本、图片等内容。
  2. 内边距（Padding）：内容区与边框之间的距离，用于控制内容与边框之间的间距。
  3. 边框（Border）：内容区和内边距的外层边界，用于美化和分隔元素。
  4. 外边距（Margin）：盒子与其他盒子之间的距离，用于控制元素之间的间距。
4.3 标准盒模型和怪异盒模型

CSS 盒模型有两种：标准盒模型和怪异盒模型。

  1. 标准盒模型：盒子的总宽度 = 内容区宽度 + 左右内边距 + 左右边框 + 左右外边距。
  2. 怪异盒模型：盒子的总宽度 = 设定的 width 值 + 左右外边距。

你可以通过box-sizing属性来设置盒模型的类型，box-sizing: content-box是标准盒模型（默认值），box-sizing: border-box是怪异盒模型。

以下是标准盒模型和怪异盒模型的对比示例代码：

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS盒模型对比示例</title>
    <style>
        /* 标准盒模型 */
        .content-box {
            width: 200px;
            height: 200px;
            padding: 20px;
            border: 10px solid blue;
            margin: 20px;
            box-sizing: content-box;
            background-color: #f5f5f5;
            text-align: center;
            line-height: 160px;
            font-weight: bold;
            font-size: 20px;
            color: blue;
        }
        /* 怪异盒模型 */
        .border-box {
            width: 200px;
            height: 200px;
            padding: 20px;
            border: 10px solid red;
            margin: 20px;
            box-sizing: border-box;
            background-color: #f5f5f5;
            text-align: center;
            line-height: 140px;
            font-weight: bold;
            font-size: 20px;
            color: red;
        }
        /* 容器样式 */
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 500px;
            background-color: #e9ecef;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content-box">标准盒模型</div>
        <div class="border-box">怪异盒模型</div>
    </div>
</body>
</html>
4.4 盒模型的属性

CSS 盒模型的属性如下：

属性

作用

取值

示例

width

内容区宽度

长度值（px、em、rem）、百分比、auto

width: 200px

height

内容区高度

长度值（px、em、rem）、百分比、auto

height: 200px

padding

内边距

长度值（px、em、rem）、百分比

padding: 20px、padding: 10px 20px、padding: 10px 20px 30px、padding: 10px 20px 30px 40px

padding-top

上内边距

长度值（px、em、rem）、百分比

padding-top: 10px

padding-right

右内边距

长度值（px、em、rem）、百分比

padding-right: 20px

padding-bottom

下内边距

长度值（px、em、rem）、百分比

padding-bottom: 30px

padding-left

左内边距

长度值（px、em、rem）、百分比

padding-left: 40px

border

边框

复合属性，包含 border-width、border-style、border-color

border: 10px solid blue

border-width

边框宽度

长度值（px、em、rem）、thin、medium、thick

border-width: 10px

border-style

边框样式

none、solid、dashed、dotted、double、groove、ridge、inset、outset

border-style: solid

border-color

边框颜色

颜色值（hex、rgb、rgba、hsl、hsla）、transparent

border-color: blue

border-top、border-right、border-bottom、border-left

单边边框

复合属性，包含 border-top-width、border-top-style、border-top-color 等

border-top: 10px solid blue

margin

外边距

长度值（px、em、rem）、百分比、auto

margin: 20px、margin: 10px 20px、margin: 10px 20px 30px、margin: 10px 20px 30px 40px

margin-top

上外边距

长度值（px、em、rem）、百分比、auto

margin-top: 10px

margin-right

右外边距

长度值（px、em、rem）、百分比、auto

margin-right: 20px

margin-bottom

下外边距

长度值（px、em、rem）、百分比、auto

margin-bottom: 30px

margin-left

左外边距

长度值（px、em、rem）、百分比、auto

margin-left: 40px

box-sizing

盒模型类型

content-box、border-box

box-sizing: border-box

以下是盒模型属性的示例代码：

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS盒模型属性示例</title>
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
            padding: 20px;
        }
        /* 标题样式 */
        h1 {
            text-align: center;
            color: #007bff;
            margin-bottom: 30px;
        }
        /* 盒子样式 */
        .box {
            width: 300px;
            height: 300px;
            background-color: #fff;
            margin: 0 auto 30px;
            padding: 20px;
            border: 10px solid blue;
            /* 外边距合并示例 */
            margin-bottom: 50px;
        }
        /* 内边距示例 */
        .padding-example {
            padding-top: 30px;
            padding-right: 40px;
            padding-bottom: 50px;
            padding-left: 60px;
        }
        /* 边框示例 */
        .border-example {
            border-width: thin medium thick 10px;
            border-style: dashed double dotted solid;
            border-color: red green blue purple;
        }
        /* 外边距示例 */
        .margin-example {
            margin-top: 30px;
            margin-right: auto;
            margin-bottom: 50px;
            margin-left: auto;
        }
        /* 边框圆角示例 */
        .border-radius-example {
            border-radius: 10px;
        }
        /* 边框阴影示例 */
        .box-shadow-example {
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        /* 内阴影示例 */
        .inner-shadow-example {
            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
        }
        /* 复合阴影示例 */
        .multiple-shadow-example {
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 0 0 20px rgba(0, 0, 0, 0.2);
        }
        /* 内容区示例 */
        .content-example {
            text-align: center;
            line-height: 200px;
            font-weight: bold;
            font-size: 24px;
            color: #007bff;
        }
    </style>
</head>
<body>
    <h1>CSS盒模型属性示例</h1>
    <div class="box padding-example content-example">内边距示例</div>
    <div class="box border-example content-example">边框示例</div>
    <div class="box margin-example content-example">外边距示例</div>
    <div class="box border-radius-example content-example">边框圆角示例</div>
    <div class="box box-shadow-example content-example">边框阴影示例</div>
    <div class="box inner-shadow-example content-example">内阴影示例</div>
    <div class="box multiple-shadow-example content-example">复合阴影示例</div>
</body>
</html>
第五章 CSS 文本样式全解
5.1 字体样式

CSS 字体样式用于控制文本的字体、大小、粗细、样式等。

以下是字体样式的属性：

属性

作用

取值

示例

font-family

字体族

字体名称（如 Arial、Microsoft YaHei）、通用字体族（sans-serif、serif、monospace、cursive、fantasy）

font-family: Arial, sans-serif

font-size

字体大小

长度值（px、em、rem）、百分比、关键字（xx-small、x-small、small、medium、large、x-large、xx-large）

font-size: 18px

font-weight

字体粗细

关键字（normal、bold、bolder、lighter）、数字值（100-900）

font-weight: bold

font-style

字体样式

normal、italic、oblique

font-style: italic

font-variant

字体变体

normal、small-caps

font-variant: small-caps

font

复合属性

包含 font-style、font-variant、font-weight、font-size/line-height、font-family

font: italic small-caps bold 18px/1.6 Arial, sans-serif

以下是字体样式的示例代码：

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体样式示例</title>
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
            padding: 20px;
        }
        /* 标题样式 */
        h1 {
            text-align: center;
            color: #007bff;
            margin-bottom: 30px;
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            font-size: 32px;
            font-weight: bold;
            font-style: normal;
            font-variant: normal;
        }
        /* 段落样式 */
        .font-family-example {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            font-size: 18px;
            margin-bottom: 15px;
        }
        .font-size-example {
            font-family: Arial, sans-serif;
            font-size: 24px;
            margin-bottom: 15px;
        }
        .font-weight-example {
            font-family: Arial, sans-serif;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
        }
        .font-style-example {
            font-family: Arial, sans-serif;
            font-size: 18px;
            font-style: italic;
            margin-bottom: 15px;
        }
        .font-variant-example {
            font-family: Arial, sans-serif;
            font-size: 18px;
            font-variant: small-caps;
            margin-bottom: 15px;
        }
        .font-shorthand-example {
            font: italic small-caps bold 20px/1.8 'Microsoft YaHei', Arial, sans-serif;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <h1>CSS字体样式示例</h1>
    <p class="font-family-example">这是使用Microsoft YaHei字体的段落。</p>
    <p class="font-size-example">这是使用24px字体大小的段落。</p>
    <p class="font-weight-example">这是使用bold字体粗细的段落。</p>
    <p class="font-style-example">这是使用italic字体样式的段落。</p>
    <p class="font-variant-example">This is a paragraph using small-caps font variant.</p>
    <p class="font-shorthand-example">这是使用复合属性的段落。</p>
</body>
</html>
第六章 CSS 背景与边框特效
6.1 背景样式

CSS 背景样式用于控制元素的背景颜色、背景图片、背景重复、背景位置、背景大小等。

以下是背景样式的属性：

属性

作用

取值

示例

background-color

背景颜色

颜色值（hex、rgb、rgba、hsl、hsla）、transparent

background-color: #007bff

background-image

背景图片

url () 函数（图片路径）、线性渐变（linear-gradient ()）、径向渐变（radial-gradient ()）、重复线性渐变（repeating-linear-gradient ()）、重复径向渐变（repeating-radial-gradient ()）

background-image: url(images/1.jpg)、background-image: linear-gradient(to right, red, blue)

background-repeat

背景重复

repeat、repeat-x、repeat-y、no-repeat

background-repeat: no-repeat

background-position

背景位置

关键字（top、bottom、left、right、center）、长度值（px、em、rem）、百分比

background-position: center、background-position: 50% 50%

background-size

背景大小

长度值（px、em、rem）、百分比、cover、contain

background-size: 100% 100%、background-size: cover

background-attachment

背景附着

scroll、fixed、local

background-attachment: fixed

background

复合属性

包含 background-color、background-image、background-repeat、background-position、background-size、background-attachment

background: #007bff url(images/1.jpg) no-repeat center/cover fixed

以下是背景样式的示例代码：

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS背景样式示例</title>
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
            padding: 20px;
        }
        /* 标题样式 */
        h1 {
            text-align: center;
            color: #007bff;
            margin-bottom: 30px;
        }
        /* 容器样式 */
        .container {
            max-width: 800px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }
        /* 盒子样式 */
        .box {
            width: 100%;
            height: 200px;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 20px;
            text-align: center;
            line-height: 160px;
            font-weight: bold;
            font-size: 20px;
            color: #fff;
        }
        /* 背景颜色示例 */
        .background-color-example {
            background-color: #007bff;
        }
        /* 背景图片示例 */
        .background-image-example {
            background-image: url(https://img0.baidu.com/it/u=1234567890,1234567890&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=200);
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }
        /* 线性渐变示例 */
        .linear-gradient-example {
            background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
        }
        /* 径向渐变示例 */
        .radial-gradient-example {
            background-image: radial-gradient(circle, red, orange, yellow, green, blue, indigo, violet);
        }
        /* 重复线性渐变示例 */
        .repeating-linear-gradient-example {
            background-image: repeating-linear-gradient(to right, red, orange 20px, yellow 40px, green 60px, blue 80px, indigo 100px, violet 120px);
        }
        /* 重复径向渐变示例 */
        .repeating-radial-gradient-example {
            background-image: repeating-radial-gradient(circle, red, orange 20px, yellow 40px, green 60px, blue 80px, indigo 100px, violet 120px);
        }
        /* 背景复合属性示例 */
        .background-shorthand-example {
            background: #007bff url(https://img0.baidu.com/it/u=1234567890,1234567890&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=200) no-repeat center/cover fixed;
        }
    </style>
</head>
<body>
    <h1>CSS背景样式示例</h1>
    <div class="container">
        <div class="box background-color-example">背景颜色示例</div>
        <div class="box background-image-example">背景图片示例</div>
        <div class="box linear-gradient-example">线性渐变示例</div>
        <div class="box radial-gradient-example">径向渐变示例</div>
        <div class="box repeating-linear-gradient-example">重复线性渐变示例</div>
        <div class="box repeating-radial-gradient-example">重复径向渐变示例</div>
        <div class="box background-shorthand-example">背景复合属性示例</div>
    </div>
</body>
</html>
第七章 CSS Flex 布局
7.1 什么是 Flex 布局

Flex 布局是一种 CSS 布局方式，它可以让容器内的元素在不同的屏幕尺寸和分辨率下自动调整大小和位置，实现自适应布局。Flex 布局的核心是容器和项目的概念，容器是包裹项目的元素，项目是容器内的直接子元素。

7.2 容器的属性

Flex 布局容器的属性如下：

属性

作用

取值

示例

display

定义 Flex 容器

flex、inline-flex

display: flex

flex-direction

定义项目的排列方向

row（默认值，从左到右）、row-reverse（从右到左）、column（从上到下）、column-reverse（从下到上）

flex-direction: row-reverse

flex-wrap

定义项目的换行方式

nowrap（默认值，不换行）、wrap（换行）、wrap-reverse（反向换行）

flex-wrap: wrap

flex-flow

复合属性，包含 flex-direction 和 flex-wrap

flex-direction + flex-wrap

flex-flow: row-reverse wrap

justify-content

定义项目在主轴上的对齐方式

flex-start（默认值，左对齐）、flex-end（右对齐）、center（居中对齐）、space-between（两端对齐，项目之间的间距相等）、space-around（每个项目两侧的间距相等）、space-evenly（项目之间的间距相等，项目与容器边缘的间距也相等）

justify-content: space-between

align-items

定义项目在交叉轴上的对齐方式

flex-start（顶部对齐）、flex-end（底部对齐）、center（居中对齐）、baseline（基线对齐）、stretch（默认值，拉伸对齐）

align-items: center

align-content

定义多行项目在交叉轴上的对齐方式

flex-start（顶部对齐）、flex-end（底部对齐）、center（居中对齐）、space-between（两端对齐，行之间的间距相等）、space-around（每行两侧的间距相等）、stretch（默认值，拉伸对齐）

align-content: space-between

7.3 项目的属性

Flex 布局项目的属性如下：

属性

作用

取值

示例

order

定义项目的排列顺序

整数，默认值为 0，值越小排列越靠前

order: -1

flex-grow

定义项目的放大比例

整数，默认值为 0，值越大放大比例越大

flex-grow: 1

flex-shrink

定义项目的缩小比例

整数，默认值为 1，值越大缩小比例越大

flex-shrink: 0

flex-basis

定义项目的初始宽度

长度值（px、em、rem）、百分比、auto（默认值，项目的原始宽度）

flex-basis: 200px

flex

复合属性，包含 flex-grow、flex-shrink、flex-basis

flex-grow + flex-shrink + flex-basis

flex: 1 1 auto、flex: 1

align-self

定义单个项目在交叉轴上的对齐方式，覆盖 align-items 的设置

flex-start、flex-end、center、baseline、stretch

align-self: flex-end

以下是 Flex 布局的示例代码：

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Flex布局示例</title>
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
            padding: 20px;
        }
        /* 标题样式 */
        h1 {
            text-align: center;
            color: #007bff;
            margin-bottom: 30px;
        }
        /* 容器样式 */
        .container {
            max-width: 1200px;
            margin: 0 auto 30px;
            display: flex;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 20px;
            background-color: #fff;
        }
        /* 项目样式 */
        .item {
            width: 100px;
            height: 100px;
            background-color: #007bff;
            color: #fff;
            text-align: center;
            line-height: 100px;
            font-weight: bold;
            font-size: 20px;
            margin-right: 10px;
            border-radius: 5px;
        }
        /* 容器属性示例 */
        .flex-direction-example {
            flex-direction: row-reverse;
        }
        .flex-wrap-example {
            flex-wrap: wrap;
        }
        .justify-content-example {
            justify-content: space-between;
        }
        .align-items-example {
            align-items: center;
            height: 300px;
        }
        .align-content-example {
            align-content: space-between;
            flex-wrap: wrap;
            height: 400px;
        }
        /* 项目属性示例 */
        .order-example .item:nth-child(1) {
            order: 3;
        }
        .order-example .item:nth-child(2) {
            order: 1;
        }
        .order-example .item:nth-child(3) {
            order: 2;
        }
        .flex-grow-example .item:nth-child(1) {
            flex-grow: 1;
        }
        .flex-grow-example .item:nth-child(2) {
            flex-grow: 2;
        }
        .flex-grow-example .item:nth-child(3) {
            flex-grow: 3;
        }
        .flex-shrink-example {
            width: 350px;
        }
        .flex-shrink-example .item:nth-child(1) {
            flex-shrink: 0;
        }
        .flex-shrink-example .item:nth-child(2) {
            flex-shrink: 1;
        }
        .flex-shrink-example .item:nth-child(3) {
            flex-shrink: 2;
        }
        .flex-basis-example .item:nth-child(1) {
            flex-basis: 200px;
        }
        .flex-basis-example .item:nth-child(2) {
            flex-basis: 300px;
        }
        .align-self-example {
            height: 300px;
            align-items: flex-start;
        }
        .align-self-example .item:nth-child(1) {
            align-self: flex-end;
        }
        .align-self-example .item:nth-child(2) {
            align-self: center;
        }
        .align-self-example .item:nth-child(3) {
            align-self: stretch;
            height: auto;
        }
    </style>
</head>
<body>
    <h1>CSS Flex布局示例</h1>
    <h2>flex-direction: row-reverse</h2>
    <div class="container flex-direction-example">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    <h2>flex-wrap: wrap</h2>
    <div class="container flex-wrap-example">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
    </div>
    <h2>justify-content: space-between</h2>
    <div class="container justify-content-example">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    <h2>align-items: center</h2>
    <div class="container align-items-example">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    <h2>align-content: space-between</h2>
    <div class="container align-content-example">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
    </div>
    <h2>order</h2>
    <div class="container order-example">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    <h2>flex-grow</h2>
    <div class="container flex-grow-example">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    <h2>flex-shrink</h2>
    <div class="container flex-shrink-example">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    <h2>flex-basis</h2>
    <div class="container flex-basis-example">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    <h2>align-self</h2>
    <div class="container align-self-example">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>
第八章 CSS Grid 布局
8.1 什么是 Grid 布局

Grid 布局是一种更强大的 CSS 布局方式，它可以让容器内的元素按照网格的方式排列，实现复杂的布局效果。Grid 布局的核心是网格容器和网格项目的概念，网格容器是包裹网格项目的元素，网格项目是网格容器内的直接子元素。

8.2 网格容器的属性

Grid 布局网格容器的属性如下：

属性

作用

取值

示例

display

定义 Grid 容器

grid、inline-grid

display: grid

grid-template-columns

定义网格的列数和列宽

长度值（px、em、rem）、百分比、fr（分数）、repeat () 函数

grid-template-columns: 200px 1fr 1fr、grid-template-columns: repeat(3, 1fr)

grid-template-rows

定义网格的行数和行高

长度值（px、em、rem）、百分比、fr（分数）、repeat () 函数

grid-template-rows: 100px 200px 1fr、grid-template-rows: repeat(3, 1fr)

grid-template-areas

定义网格区域

区域名称、.（表示空单元格）

grid-template-areas: "header header header" "sidebar main main" "footer footer footer"

grid-template

复合属性，包含 grid-template-columns、grid-template-rows、grid-template-areas

grid-template-columns + grid-template-rows + grid-template-areas

grid-template: "header header header" 100px "sidebar main main" 200px "footer footer footer" 1fr / 200px 1fr 1fr

grid-column-gap

定义列之间的间距

长度值（px、em、rem）、百分比

grid-column-gap: 20px

grid-row-gap

定义行之间的间距

长度值（px、em、rem）、百分比

grid-row-gap: 20px

grid-gap

复合属性，包含 grid-column-gap 和 grid-row-gap

grid-column-gap + grid-row-gap

grid-gap: 20px

justify-items

定义网格项目在单元格中的水平对齐方式

stretch（默认值，拉伸对齐）、start（左对齐）、end（右对齐）、center（居中对齐）

justify-items: center

align-items

定义网格项目在单元格中的垂直对齐方式

stretch（默认值，拉伸对齐）、start（顶部对齐）、end（底部对齐）、center（居中对齐）

align-items: center

place-items

复合属性，包含 justify-items 和 align-items

justify-items + align-items

place-items: center

justify-content

定义网格在容器中的水平对齐方式

stretch（默认值，拉伸对齐）、start（左对齐）、end（右对齐）、center（居中对齐）、space-between（两端对齐，网格之间的间距相等）、space-around（每个网格两侧的间距相等）、space-evenly（网格之间的间距相等，网格与容器边缘的间距也相等）

justify-content: space-between

align-content

定义网格在容器中的垂直对齐方式

stretch（默认值，拉伸对齐）、start（顶部对齐）、end（底部对齐）、center（居中对齐）、space-between（两端对齐，行之间的间距相等）、space-around（每行两侧的间距相等）、space-evenly（行之间的间距相等，行与容器边缘的间距也相等）

align-content: space-between

place-content

复合属性，包含 justify-content 和 align-content

justify-content + align-content

place-content: center

grid-auto-columns

定义自动创建的列宽

长度值（px、em、rem）、百分比、fr（分数）

grid-auto-columns: 100px

grid-auto-rows

定义自动创建的行高

长度值（px、em、rem）、百分比、fr（分数）

grid-auto-rows: 100px

grid-auto-flow

定义网格项目的排列方式

row（默认值，按行排列）、column（按列排列）、row dense（按行排列，填充空单元格）、column dense（按列排列，填充空单元格）

grid-auto-flow: column

grid

复合属性，包含 grid-template、grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns、grid-auto-flow、grid-column-gap、grid-row-gap、grid-gap

简写形式复杂，建议分别设置

grid: "header header header" 100px "sidebar main main" 200px "footer footer footer" 1fr / 200px 1fr 1fr

8.3 网格项目的属性

Grid 布局网格项目的属性如下：

属性

作用

取值

示例

grid-column-start

定义网格项目的起始列线

列线编号、区域名称

grid-column-start: 2、grid-column-start: sidebar

grid-column-end

定义网格项目的结束列线

列线编号、区域名称、span（跨列数）

grid-column-end: 4、grid-column-end: span 2

grid-column

复合属性，包含 grid-column-start 和 grid-column-end

grid-column-start + / + grid-column-end

grid-column: 2 / 4、grid-column: 2 / span 2

grid-row-start

定义网格项目的起始行线

行线编号、区域名称

grid-row-start: 1、grid-row-start: header

grid-row-end

定义网格项目的结束行线

行线编号、区域名称、span（跨行数）

grid-row-end: 2、grid-row-end: span 2

grid-row

复合属性，包含 grid-row-start 和 grid-row-end

grid-row-start + / + grid-row-end

grid-row: 1 / 2、grid-row: 1 / span 2

grid-area

定义网格项目所在的区域

区域名称、grid-row-start + / + grid-column-start + / + grid-row-end + / + grid-column-end

grid-area: sidebar、grid-area: 1 / 2 / 3 / 4

justify-self

定义单个网格项目在单元格中的水平对齐方式，覆盖 justify-items 的设置

stretch、start、end、center

justify-self: center

align-self

定义单个网格项目在单元格中的垂直对齐方式，覆盖 align-items 的设置

stretch、start、end、center

align-self: center

place-self

复合属性，包含 justify-self 和 align-self

justify-self + align-self

place-self: center

以下是 Grid 布局的示例代码：

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid布局示例</title>
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
            padding: 20px;
        }
        /* 标题样式 */
        h1 {
            text-align: center;
            color: #007bff;
            margin-bottom: 30px;
        }
        /* 容器样式 */
        .container {
            max-width: 1200px;
            margin: 0 auto 30px;
            display: grid;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 20px;
            background-color: #fff;
            gap: 20px;
        }
        /* 项目样式 */
        .item {
            background-color: #007bff;
            color: #fff;
            text-align: center;
            line-height: 100px;
            font-weight: bold;
            font-size: 20px;
            border-radius: 5px;
        }
        /* 网格容器属性示例 */
        .grid-template-columns-example {
            grid-template-columns: 200px 1fr 1fr;
            grid-template-rows: 100px 200px 1fr;
        }
        .grid-template-areas-example {
            grid-template-areas: "header header header" "sidebar main main" "footer footer footer";
            grid-template-rows: 100px 200px 1fr;
            grid-template-columns: 200px 1fr 1fr;
        }
        .justify-items-example {
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, 100px);
            justify-items: center;
        }
        .align-items-example {
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, 100px);
            align-items: center;
        }
        .justify-content-example {
            grid-template-columns: repeat(3, 200px);
            grid-template-rows: repeat(2, 100px);
            justify-content: space-between;
        }
        .align-content-example {
            grid-template-columns: repeat(3, 200px);
            grid-template-rows: repeat(2, 100px);
            height: 500px;
            align-content: space-between;
        }
        .grid-auto-flow-example {
            grid-template-columns: repeat(3, 150px);
            grid-template-rows: repeat(2, 100px);
            grid-auto-flow: column;
            grid-auto-columns: 150px;
        }
        /* 网格项目属性示例 */
        .grid-column-row-example .item:nth-child(1) {
            grid-column: 1 / 4;
        }
        .grid-column-row-example .item:nth-child(2) {
            grid-row: 2 / 4;
        }
        .grid-column-row-example .item:nth-child(3) {
            grid-column: 2 / 4;
            grid-row: 2 / 3;
        }
        .grid-area-example {
            grid-template-areas: "header header header" "sidebar main main" "footer footer footer";
            grid-template-rows: 100px 200px 1fr;
            grid-template-columns: 200px 1fr 1fr;
        }
        .grid-area-example .item:nth-child(1) {
            grid-area: header;
        }
        .grid-area-example .item:nth-child(2) {
            grid-area: sidebar;
        }
        .grid-area-example .item:nth-child(3) {
            grid-area: main;
        }
        .grid-area-example .item:nth-child(4) {
            grid-area: footer;
        }
        .justify-self-align-self-example {
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, 100px);
        }
        .justify-self-align-self-example .item:nth-child(1) {
            justify-self: start;
            align-self: start;
        }
        .justify-self-align-self-example .item:nth-child(2) {
            justify-self: center;
            align-self: center;
        }
        .justify-self-align-self-example .item:nth-child(3) {
            justify-self: end;
            align-self: end;
        }
    </style>
</head>
<body>
    <h1>CSS Grid布局示例</h1>
    <h2>grid-template-columns和grid-template-rows</h2>
    <div class="container grid-template-columns-example">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
    <h2>grid-template-areas</h2>
    <div class="container grid-template-areas-example">
        <div class="item">Header</div>
        <div class="item">Sidebar</div>
        <div class="item">Main</div>
        <div class="item">Footer</div>
    </div>
    <h2>justify-items</h2>
    <div class="container justify-items-example">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
    <h2>align-items</h2>
    <div class="container align-items-example">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
    <h2>justify-content</h2>
    <div class="container justify-content-example">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
    <h2>align-content</h2>
    <div class="container align-content-example">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
    <h2>grid-auto-flow</h2>
    <div class="container grid-auto-flow-example">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
    </div>
    <h2>grid-column和grid-row</h2>
    <div class="container grid-column-row-example">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>
    <h2>grid-area</h2>
    <div class="container grid-area-example">
        <div class="item">Header</div>
        <div class="item">Sidebar</div>
        <div class="item">Main</div>
        <div class="item">Footer</div>
    </div>
    <h2>justify-self和align-self</h2>
    <div class="container justify-self-align-self-example">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
</body>
</html>
第九章 CSS 响应式设计
9.1 什么是响应式设计

响应式设计是指网页的布局能够根据不同的设备尺寸和屏幕分辨率自动调整，以适应不同的显示设备。响应式设计的核心是使用 CSS 媒体查询、弹性布局和响应式图片。

9.2 媒体查询

媒体查询是响应式设计的核心，它可以根据不同的设备尺寸和屏幕分辨率应用不同的 CSS 样式。使用媒体查询需要使用 @media 关键字，后跟媒体类型和媒体特性。

以下是常用的媒体类型和媒体特性：

媒体类型

作用

all

所有设备

screen

彩色屏幕设备

print

打印设备

speech

语音合成设备

媒体特性

作用

取值

示例

width

设备宽度

长度值（px）

@media (width: 768px)

max-width

最大设备宽度

长度值（px）

@media (max-width: 768px)

min-width

最小设备宽度

长度值（px）

@media (min-width: 768px)

height

设备高度

长度值（px）

@media (height: 1024px)

max-height

最大设备高度

长度值（px）

@media (max-height: 1024px)

min-height

最小设备高度

长度值（px）

@media (min-height: 1024px)

aspect-ratio

设备宽高比

比例值（如 16/9）

@media (aspect-ratio: 16/9)

orientation

设备方向

portrait（ portrait（纵向，高度大于宽度）、landscape（横向，宽度大于高度）

@media (orientation: portrait)

resolution

设备分辨率

dpi、dpcm、dppx

@media (resolution: 300dpi)

以下是媒体查询的示例代码：

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS媒体查询示例</title>
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
            padding: 20px;
        }
        /* 标题样式 */
        h1 {
            text-align: center;
            color: #007bff;
            margin-bottom: 30px;
            font-size: 32px;
        }
        /* 容器样式 */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }
        /* 项目样式 */
        .item {
            width: 100%;
            height: 200px;
            background-color: #007bff;
            color: #fff;
            text-align: center;
            line-height: 200px;
            font-weight: bold;
            font-size: 20px;
            border-radius: 5px;
            transition: transform 0.3s ease;
        }
        .item:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        /* 平板端样式 */
        @media (min-width: 769px) and (max-width: 1024px) {
            h1 {
                font-size: 28px;
            }
            .container {
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                gap: 15px;
            }
            .item {
                height: 180px;
                line-height: 180px;
                font-size: 18px;
            }
        }
        /* 移动端样式 */
        @media (max-width: 768px) {
            h1 {
                font-size: 24px;
            }
            .container {
                grid-template-columns: 1fr;
                gap: 10px;
            }
            .item {
                height: 150px;
                line-height: 150px;
                font-size: 16px;
            }
        }
    </style>
</head>
<body>
    <h1>CSS媒体查询示例</h1>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
</body>
</html>
第十章 CSS 动画与过渡
10.1 CSS 过渡

CSS 过渡是一种简单的动画方式，它可以让元素的样式在一段时间内平滑地变化。使用 CSS 过渡需要以下两个步骤：

  1. 定义元素的初始样式。
  2. 定义元素的目标样式，并添加 transition 属性，属性值包括过渡的属性、过渡的时间、过渡的缓动函数等。

以下是 CSS 过渡的属性：

属性

作用

取值

示例

transition-property

定义过渡的属性

all（所有属性）、具体属性（如 width、height、color）

transition-property: all

transition-duration

定义过渡的时间

时间值（s、ms）

transition-duration: 0.3s

transition-timing-function

定义过渡的缓动函数

ease（默认值，先快后慢）、linear（匀速）、ease-in（先慢后快）、ease-out（先快后慢）、ease-in-out（先慢后快再慢）、cubic-bezier () 函数

transition-timing-function: ease-in-out

transition-delay

定义过渡的延迟时间

时间值（s、ms）

transition-delay: 0.1s

transition

复合属性，包含 transition-property、transition-duration、transition-timing-function、transition-delay

transition-property + transition-duration + transition-timing-function + transition-delay

transition: all 0.3s ease-in-out 0.1s

以下是 CSS 过渡的示例代码：

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS过渡示例</title>
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 30px;
        }
        /* 标题样式 */
        h1 {
            text-align: center;
            color: #007bff;
            font-size: 32px;
        }
        /* 盒子样式 */
        .box {
            width: 100px;
            height: 100px;
            background-color: #007bff;
            color: #fff;
            text-align: center;
            line-height: 100px;
            font-weight: bold;
            font-size: 20px;
            border-radius: 5px;
            cursor: pointer;
        }
        /* 过渡示例 */
        .transition-all-example {
            transition: all 0.3s ease-in-out;
        }
        .transition-all-example:hover {
            width: 200px;
            height: 200px;
            background-color: #ffc107;
            border-radius: 50%;
            transform: translateX(50px);
            line-height: 200px;
            font-size: 30px;
        }
        .transition-width-height-example {
            transition: width 0.3s ease-in, height 0.3s ease-out;
        }
        .transition-width-height-example:hover {
            width: 150px;
            height: 150px;
        }
        .transition-delay-example {
            transition: all 0.3s ease-in-out 0.2s;
        }
        .transition-delay-example:hover {
            background-color: #dc3545;
            transform: translateY(-10px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <h1>CSS过渡示例</h1>
    <div class="box transition-all-example">all</div>
    <div class="box transition-width-height-example">width/height</div>
    <div class="box transition-delay-example">delay</div>
</body>
</html>
第十一章 CSS 常见组件实战
11.1 按钮组件

按钮组件是网页中最常用的组件之一，它可以用于提交表单、触发事件、跳转链接等。

以下是按钮组件的示例代码：

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS按钮组件示例</title>
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }
        /* 标题样式 */
        h1 {
            text-align: center;
            color: #007bff;
            font-size: 32px;
        }
        /* 按钮样式 */
        .btn {
            display: inline-block;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            font-family: Arial, sans-serif;
            font-size: 16px;
            font-weight: bold;
            color: #fff;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.3s ease-in-out;
            text-align: center;
        }
        /* 按钮颜色 */
        .btn-primary {
            background-color: #007bff;
        }
        .btn-primary:hover {
            background-color: #0069d9;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
        }
        .btn-secondary {
            background-color: #6c757d;
        }
        .btn-secondary:hover {
            background-color: #5a6268;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(108, 117, 125, 0.3);
        }
        .btn-success {
            background-color: #28a745;
        }
        .btn-success:hover {
            background-color: #218838;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(40, 167, 69, 0.3);
        }
        .btn-danger {
            background-color: #dc3545;
        }
        .btn-danger:hover {
            background-color: #c82333;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(220, 53, 69, 0.3);
        }
        .btn-warning {
            background-color: #ffc107;
            color: #000;
        }
        .btn-warning:hover {
            background-color: #e0a800;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255, 193, 7, 0.3);
        }
        .btn-info {
            background-color: #17a2b8;
        }
        .btn-info:hover {
            background-color: #138496;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(23, 162, 184, 0.3);
        }
        .btn-light {
            background-color: #f8f9fa;
            color: #000;
        }
        .btn-light:hover {
            background-color: #e2e6ea;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(248, 249, 250, 0.3);
        }
        .btn-dark {
            background-color: #343a40;
        }
        .btn-dark:hover {
            background-color: #23272b;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(52, 58, 64, 0.3);
        }
        /* 按钮大小 */
        .btn-sm {
            padding: 5px 10px;
            font-size: 14px;
        }
        .btn-md {
            padding: 10px 20px;
            font-size: 16px;
        }
        .btn-lg {
            padding: 15px 30px;
            font-size: 18px;
        }
        /* 按钮形状 */
        .btn-rounded {
            border-radius: 25px;
        }
        .btn-circle {
            width: 50px;
            height: 50px;
            padding: 0;
            border-radius: 50%;
            line-height: 50px;
        }
        /* 按钮状态 */
        .btn:active {
            transform: translateY(0);
            box-shadow: none;
        }
        .btn:disabled {
            background-color: #6c757d;
            color: #fff;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
    </style>
</head>
<body>
    <h1>CSS按钮组件示例</h1>
    <div>
        <button class="btn btn-primary btn-sm">Primary</button>
        <button class="btn btn-secondary btn-sm">Secondary</button>
        <button class="btn btn-success btn-sm">Success</button>
        <button class="btn btn-danger btn-sm">Danger</button>
        <button class="btn btn-warning btn-sm">Warning</button>
        <button class="btn btn-info btn-sm">Info</button>
        <button class="btn btn-light btn-sm">Light</button>
        <button class="btn btn-dark btn-sm">Dark</button>
    </div>
    <div>
        <button class="btn btn-primary btn-md">Primary</button>
        <button class="btn btn-secondary btn-md">Secondary</button>
        <button class="btn btn-success btn-md">Success</button>
        <button class="btn btn-danger btn-md">Danger</button>
        <button class="btn btn-warning btn-md">Warning</button>
        <button class="btn btn-info btn-md">Info</button>
        <button class="btn btn-light btn-md">Light</button>
        <button class="btn btn-dark btn-md">Dark</button>
    </div>
    <div>
        <button class="btn btn-primary btn-lg">Primary</button>
        <button class="btn btn-secondary btn-lg">Secondary</button>
        <button class="btn btn-success btn-lg">Success</button>
        <button class="btn btn-danger btn-lg">Danger</button>
        <button class="btn btn-warning btn-lg">Warning</button>
        <button class="btn btn-info btn-lg">Info</button>
        <button class="btn btn-light btn-lg">Light</button>
        <button class="btn btn-dark btn-lg">Dark</button>
    </div>
    <div>
        <button class="btn btn-primary btn-md btn-rounded">Rounded</button>
        <button class="btn btn-secondary btn-md btn-rounded">Rounded</button>
        <button class="btn btn-success btn-md btn-rounded">Rounded</button>
        <button class="btn btn-danger btn-md btn-rounded">Rounded</button>
        <button class="btn btn-warning btn-md btn-rounded">Rounded</button>
        <button class="btn btn-info btn-md btn-rounded">Rounded</button>
        <button class="btn btn-light btn-md btn-rounded">Rounded</button>
        <button class="btn btn-dark btn-md btn-rounded">Rounded</button>
    </div>
    <div>
        <button class="btn btn-primary btn-circle">+</button>
        <button class="btn btn-secondary btn-circle">-</button>
        <button class="btn btn-success btn-circle">√</button>
        <button class="btn btn-danger btn-circle">×</button>
        <button class="btn btn-warning btn-circle">!</button>
    </div>
    <div>
        <button class="btn btn-primary btn-md" disabled>Disabled</button>
    </div>
</body>
</html>
第十二章 CSS 完整项目实战
12.1 项目一：个人求职简历单页

项目描述：创建一个个人求职简历单页，包含个人信息、教育背景、工作经验、项目经验、技能特长、联系方式等模块。技术栈：HTML、CSS、JavaScript。代码示例：

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>张三 - 个人求职简历</title>
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        /* 头部样式 */
        header {
            background-color: #007bff;
            color: #fff;
            padding: 40px 0;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        .header-content h1 {
            font-size: 36px;
            margin-bottom: 10px;
            font-weight: bold;
        }
        .header-content p {
            font-size: 18px;
            margin-bottom: 20px;
            color: rgba(255, 255, 255, 0.9);
        }
        .contact-info {
            display: flex;
            justify-content: center;
            gap: 30px;
            flex-wrap: wrap;
        }
        .contact-info .item {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .contact-info .item i {
            font-size: 20px;
        }
        .contact-info .item a {
            color: rgba(255, 255, 255, 0.9);
            text-decoration: none;
            transition: color 0.3s;
        }
        .contact-info .item a:hover {
            color: #ffc107;
        }
        /* 主体样式 */
        main {
            margin-top: 30px;
            background-color: #fff;
            padding: 30px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        section {
            margin-bottom: 30px;
        }
        section h2 {
            font-size: 24px;
            margin-bottom: 20px;
            color: #007bff;
            border-bottom: 2px solid #007bff;
            padding-bottom: 5px;
        }
        /* 个人信息样式 */
        .personal-info {
            display: flex;
            gap: 30px;
            flex-wrap: wrap;
        }
        .personal-info .left {
            flex: 1;
            min-width: 250px;
        }
        .personal-info .right {
            flex: 1;
            min-width: 250px;
        }
        .personal-info .item {
            display: flex;
            margin-bottom: 15px;
        }
        .personal-info .item label {
            width: 100px;
            font-weight: bold;
            color: #007bff;
        }
        .personal-info .item span {
            flex: 1;
        }
        /* 教育背景样式 */
        .education-list {
            list-style: none;
        }
        .education-list li {
            margin-bottom: 20px;
            padding: 20px;
            background-color: #f5f5f5;
            border-radius: 5px;
            transition: transform 0.3s ease;
        }
        .education-list li:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .education-list li .school {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 5px;
            color: #007bff;
        }
        .education-list li .major {
            font-size: 16px;
            margin-bottom: 5px;
            color: #6c757d;
        }
        .education-list li .period {
            font-size: 14px;
            color: #6c757d;
        }
        /* 工作经验样式 */
        .work-experience-list {
            list-style: none;
        }
        .work-experience-list li {
            margin-bottom: 20px;
            padding: 20px;
            background-color: #f5f5f5;
            border-radius: 5px;
            transition: transform 0.3s ease;
        }
        .work-experience-list li:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .work-experience-list li .company {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 5px;
            color: #007bff;
        }
        .work-experience-list li .position {
            font-size: 16px;
            margin-bottom: 5px;
            color: #6c757d;
        }
        .work-experience-list li .period {
            font-size: 14px;
            color: #6c757d;
            margin-bottom: 15px;
        }
        .work-experience-list li .description {
            font-size: 14px;
            color: #333;
            line-height: 1.8;
        }
        /* 项目经验样式 */
        .project-list {
            list-style: none;
        }
        .project-list li {
            margin-bottom: 20px;
            padding: 20px;
            background-color: #f5f5f5;
            border-radius: 5px;
            transition: transform 0.3s ease;
        }
        .project-list li:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .project-list li .name {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 5px;
            color: #007bff;
        }
        .project-list li .role {
            font-size: 16px;
            margin-bottom: 5px;
            color: #6c757d;
        }
        .project-list li .period {
            font-size: 14px;
            color: #6c757d;
            margin-bottom: 15px;
        }
        .project-list li .description {
            font-size: 14px;
            color: #333;
            line-height: 1.8;
            margin-bottom: 15px;
        }
        .project-list li .tech-stack {
            font-size: 14px;
            color: #333;
        }
        .project-list li .tech-stack span {
            display: inline-block;
            margin-right: 10px;
            padding: 5px 10px;
            background-color: #007bff;
            color: #fff;
            border-radius: 3px;
            font-size: 12px;
        }
        /* 技能特长样式 */
        .skills {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            flex-wrap: wrap;
        }
        .skills .item {
            padding: 20px;
            background-color: #f5f5f5;
            border-radius: 5px;
            transition: transform 0.3s ease;
        }
        .skills .item:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .skills .item h3 {
            font-size: 18px;
            margin-bottom: 15px;
            color: #007bff;
            border-bottom: 2px solid #007bff;
            padding-bottom: 5px;
        }
        .skills .item ul {
            list-style: none;
        }
        .skills .item ul li {
            margin-bottom: 10px;
            padding: 5px;
            background-color: #fff;
            border-radius: 3px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        /* 联系方式样式 */
        .contact {
            display: flex;
            justify-content: center;
            gap: 30px;
            flex-wrap: wrap;
            padding: 20px;
            background-color: #f5f5f5;
            border-radius: 5px;
        }
        .contact .item {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .contact .item i {
            font-size: 20px;
        }
        .contact .item a {
            color: #007bff;
            text-decoration: none;
            transition: color 0.3s;
        }
        .contact .item a:hover {
            color: #ffc107;
        }
        /* 移动端样式 */
        @media (max-width: 768px) {
            .container {
                padding: 10px;
            }
            header {
                padding: 20px 0;
            }
            .header-content h1 {
                font-size: 24px;
            }
            .header-content p {
                font-size: 16px;
            }
            .contact-info {
                gap: 15px;
            }
            main {
                padding: 20px;
            }
            section h2 {
                font-size: 20px;
            }
            .personal-info {
                flex-direction: column;
                gap: 15px;
            }
            .skills {
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 15px;
            }
            .contact {
                gap: 15px;
                padding: 15px;
            }
        }
        /* 平板端样式 */
        @media (min-width: 769px) and (max-width: 1024px) {
            .container {
                padding: 15px;
            }
            header {
                padding: 30px 0;
            }
            .header-content h1 {
                font-size: 30px;
            }
            .header-content p {
                font-size: 17px;
            }
            main {
                padding: 25px;
            }
            section h2 {
                font-size: 22px;
            }
            .skills {
                grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
                gap: 18px;
            }
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <header>
        <div class="container">
            <div class="header-content">
                <h1>张三</h1>
                <p>前端工程师</p>
            </div>
            <div class="contact-info">
                <div class="item">
                    <i class="fas fa-envelope"></i>
                    <a href="mailto:example@qq.com">example@qq.com</a>
                </div>
                <div class="item">
                    <i class="fas fa-phone"></i>
                    <a href="tel:13800138000">13800138000</a>
                </div>
                <div class="item">
                    <i class="fas fa-map-marker-alt"></i>
                    <span>北京市朝阳区</span>
                </div>
                <div class="item">
                    <i class="fab fa-github"></i>
                    <a href="https://github.com/zhangsan" target="_blank">https://github.com/zhangsan</a>
                </div>
                <div class="item">
                    <i class="fab fa-linkedin"></i>
                    <a href="https://linkedin.com/in/zhangsan" target="_blank">https://linkedin.com/in/zhangsan</a>
                </div>
            </div>
        </div>
    </header>
    <main class="container">
        <section id="personal-info">
            <h2>个人信息</h2>
            <div class="personal-info">
                <div class="left">
                    <div class="item">
                        <label>姓名：</label>
                        <span>张三</span>
                    </div>
                    <div class="item">
                        <label>性别：</label>
                        <span>男</span>
                    </div>
                    <div class="item">
                        <label>年龄：</label>
                        <span>25岁</span>
                    </div>
                    <div class="item">
                        <label>学历：</label>
                        <span>本科</span>
                    </div>
                </div>
                <div class="right">
                    <div class="item">
                        <label>专业：</label>
                        <span>计算机科学与技术</span>
                    </div>
                    <div class="item">
                        <label>毕业院校：</label>
                        <span>北京大学</span>
                    </div>
                    <div class="item">
                        <label>毕业时间：</label>
                        <span>2022年6月</span>
                    </div>
                    <div class="item">
                        <label>工作年限：</label>
                        <span>2年</span>
                    </div>
                </div>
            </div>
        </section>
        <section id="education">
            <h2>教育背景</h2>
            <ul class="education-list">
                <li>
                    <div class="school">北京大学</div>
                    <div class="major">计算机科学与技术</div>
                    <div class="period">2018年9月 - 2022年6月</div>
                </li>
            </ul>
        </section>
        <section id="work-experience">
            <h2>工作经验</h2>
            <ul class="work-experience-list">
                <li>
                    <div class="company">阿里巴巴集团</div>
                    <div class="position">前端工程师</div>
                    <div class="period">2022年7月 - 至今</div>
                    <div class="description">
                        <p>1. 负责淘宝首页的前端开发和维护工作，使用HTML、CSS、JavaScript、Vue等技术栈。</p>
                        <p>2. 参与淘宝移动端的响应式布局开发，确保在不同设备尺寸和屏幕分辨率下的显示效果。</p>
                        <p>3. 优化淘宝首页的加载速度和性能，提高用户体验。</p>
                        <p>4. 与后端工程师合作，完成数据接口的对接和调试工作。</p>
                        <p>5. 编写前端开发文档，指导其他开发人员进行开发。</p>
                    </div>
                </li>
            </ul>
        </section>
        <section id="project-experience">
            <h2>项目经验</h2>
            <ul class="project-list">
                <li>
                    <div class="name">淘宝首页重构</div>
                    <div class="role">前端开发工程师</div>
                    <div class="period">2023年1月 - 2023年3月</div>
                    <div class="description">
                        <p>1. 对淘宝首页进行了全面的重构，使用了最新的HTML5和CSS3技术。</p>
                        <p>2. 实现了响应式布局，确保在手机、平板、电脑等不同设备上的显示效果。</p>
                        <p>3. 优化了页面的加载速度和性能，使用了图片懒加载、代码分割、缓存等技术。</p>
                        <p>4. 与后端工程师合作，完成了数据接口的对接和调试工作。</p>
                        <p>5. 测试了页面的兼容性和稳定性，确保在不同浏览器和操作系统上的正常运行。</p>
                    </div>
                    <div class="tech-stack">
                        <span>HTML5</span>
                        <span>CSS3</span>
                        <span>JavaScript</span>
                        <span>Vue</span>
                        <span>Webpack</span>
                    </div>
                </li>
                <li>
                    <div class="name">淘宝移动端开发</div>
                    <div class="role">前端开发工程师</div>
                    <div class="period">2022年9月 - 2022年12月</div>
                    <div class="description">
                        <p>1. 负责淘宝移动端的前端开发工作，使用了Vue和uni-app技术栈。</p>
                        <p>2. 实现了商品列表、商品详情、购物车、订单管理等功能。</p>
                        <p>3. 优化了页面的加载速度和性能，提高了用户体验。</p>
                        <p>4. 与后端工程师合作，完成了数据接口的对接和调试工作。</p>
                        <p>5. 测试了页面的兼容性和稳定性，确保在不同手机品牌和操作系统上的正常运行。</p>
                    </div>
                    <div class="tech-stack">
                        <span>HTML5</span>
                        <span>CSS3</span>
                        <span>JavaScript</span>
                        <span>Vue</span>
                        <span>uni-app</span>
                    </div>
                </li>
            </ul>
        </section>
        <section id="skills">
            <h2>技能特长</h2>
            <div class="skills">
                <div class="item">
                    <h3>前端开发</h3>
                    <ul>
                        <li>HTML5</li>
                        <li>CSS3</li>
                        <li>JavaScript</li>
                        <li>Vue</li>
                        <li>React</li>
                        <li>Angular</li>
                        <li>uni-app</li>
                    </ul>
                </div>
                <div class="item">
                    <h3>后端开发</h3>
                    <ul>
                        <li>Node.js</li>
                        <li>Express</li>
                        <li>Koa</li>
                        <li>MongoDB</li>
                        <li>MySQL</li>
                    </ul>
                </div>
                <div class="item">
                    <h3>工具和框架</h3>
                    <ul>
                        <li>Webpack</li>
                        <li>Vite</li>
                        <li>Git</li>
                        <li>GitHub</li>
                        <li>VS Code</li>
                        <li>Photoshop</li>
                        <li>Figma</li>
                    </ul>
                </div>
                <div class="item">
                    <h3>其他技能</h3>
                    <ul>
                        <li>响应式布局</li>
                        <li>移动应用开发</li>
                        <li>用户体验设计</li>
                        <li>SEO优化</li>
                        <li>性能优化</li>
                    </ul>
                </div>
            </div>
        </section>
        <section id="contact">
            <h2>联系方式</h2>
            <div class="contact">
                <div class="item">
                    <i class="fas fa-envelope"></i>
                    <a href="mailto:example@qq.com">example@qq.com</a>
                </div>
                <div class="item">
                    <i class="fas fa-phone"></i>
                    <a href="tel:13800138000">13800138000</a>
                </div>
                <div class="item">
                    <i class="fas fa-map-marker-alt"></i>
                    <span>北京市朝阳区</span>
                </div>
                <div class="item">
                    <i class="fab fa-github"></i>
                    <a href="https://github.com/zhangsan" target="_blank">https://github.com/zhangsan</a>
                </div>
                <div class="item">
                    <i class="fab fa-linkedin"></i>
                    <a href="https://linkedin.com/in/zhangsan" target="_blank">https://linkedin.com/in/zhangsan</a>
                </div>
            </div>
        </section>
    </main>
</body>
</html>
第十三章 CSS 浏览器兼容性
13.1 什么是浏览器兼容性

浏览器兼容性是指网页在不同浏览器和操作系统上的显示效果和功能是否一致。由于不同浏览器的内核和实现方式不同，同一个 CSS 样式在不同浏览器上可能会有不同的显示效果。

13.2 常用的浏览器内核

浏览器内核是浏览器的核心组件，负责解析 HTML、CSS 和 JavaScript 代码。以下是常用的浏览器内核：

浏览器

内核

Chrome

Blink（基于 WebKit）

Firefox

Gecko

Safari

WebKit

Edge

Blink（基于 WebKit）

IE

Trident

13.3 浏览器兼容性问题的解决方法

解决浏览器兼容性问题的方法主要有以下几种：

  1. 使用浏览器前缀：为 CSS 属性添加浏览器前缀，如 - webkit-、-moz-、-ms-、-o - 等，以支持不同浏览器的特定实现。
  2. 使用 Polyfill：为浏览器添加缺失的 API 和功能，如 CSS Grid 布局的 Polyfill、Flex 布局的 Polyfill 等。
  3. 使用 Modernizr：检测浏览器是否支持特定的 CSS 属性和 JavaScript API，根据检测结果应用不同的样式和功能。
  4. 编写兼容代码：编写在不同浏览器上都能正常工作的代码，如使用标准的 CSS 属性、避免使用浏览器特定的 API 等。
  5. 测试：在不同浏览器和操作系统上测试网页的显示效果和功能，及时发现和解决兼容性问题。

以下是浏览器前缀的示例代码：

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS浏览器前缀示例</title>
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 30px;
        }
        /* 标题样式 */
        h1 {
            text-align: center;
            color: #007bff;
            font-size: 32px;
        }
        /* 盒子样式 */
        .box {
            width: 100px;
            height: 100px;
            background-color: #007bff;
            color: #fff;
            text-align: center;
            line-height: 100px;
            font-weight: bold;
            font-size: 20px;
            border-radius: 5px;
            /* 浏览器前缀示例 */
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
            /* 浏览器前缀示例 */
            -webkit-animation: rotate 2s linear infinite;
            -moz-animation: rotate 2s linear infinite;
            -ms-animation: rotate 2s linear infinite;
            -o-animation: rotate 2s linear infinite;
            animation: rotate 2s linear infinite;
        }
        /* 动画样式 */
        @-webkit-keyframes rotate {
            from {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            to {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        @-moz-keyframes rotate {
            from {
                -moz-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            to {
                -moz-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        @-ms-keyframes rotate {
            from {
                -ms-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            to {
                -ms-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        @-o-keyframes rotate {
            from {
                -o-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            to {
                -o-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <h1>CSS浏览器前缀示例</h1>
    <div class="box">旋转</div>
</body>
</html>
第十四章 CSS 性能优化
14.1 什么是 CSS 性能优化

CSS 性能优化是指通过优化 CSS 代码和加载方式，提高网页的加载速度和渲染性能。CSS 性能优化可以让用户更快地看到网页内容，提高用户体验。

14.2 CSS 性能优化的方法

CSS 性能优化的方法主要有以下几种：

  1. 压缩 CSS 文件：使用工具如 CSSNano、UglifyCSS 等压缩 CSS 文件，减少文件大小。
  2. 合并 CSS 文件：将多个 CSS 文件合并成一个，减少 HTTP 请求次数。
  3. 使用 CSS 预处理器：使用 CSS 预处理器如 LESS、Sass、Stylus 等，提高代码的复用性和可维护性。
  4. 避免使用 @import：使用 @import 引入 CSS 文件会增加 HTTP 请求次数，建议使用<link>标签引入。
  5. 使用 CSS Sprite：将多个小图标合并成一个大图标，减少 HTTP 请求次数。
  6. 使用响应式图片：根据不同的设备尺寸和屏幕分辨率加载不同大小的图片。
  7. 避免使用内联样式：内联样式会增加 HTML 文件的大小，建议使用外部样式表或内部样式表。
  8. 避免使用！important：!important 会覆盖其他样式，建议使用更具体的选择器。
  9. 避免使用复杂的选择器：复杂的选择器会增加浏览器的解析时间，建议使用简单的选择器。
  10. 使用 CSS 变量：使用 CSS 变量提高代码的复用性和可维护性。

以下是 CSS 压缩和合并的示例代码（使用 CSSNano）：

代码语言：javascript
复制
# 安装CSSNano
npm install -g cssnano-cli
# 压缩单个CSS文件
cssnano input.css output.min.css
# 合并多个CSS文件并压缩
cat file1.css file2.css file3.css | cssnano > output.min.css
第十五章 CSS 学习资源推荐
15.1 官方文档
15.2 在线教程
15.3 视频教程
15.4 书籍推荐
  • 《Head First HTML and CSS》
  • 《CSS 权威指南》
  • 《CSS 揭秘》
15.5 工具推荐
  • CSS 压缩工具：CSSNano、UglifyCSS、Clean-CSS
  • CSS 预处理器：LESS、Sass、Stylus
  • CSS 调试工具：Chrome DevTools、Firefox DevTools
  • CSS Sprite 工具：CSS Sprite Generator、SpriteCow
  • 响应式设计工具：Responsive Viewer、BrowserStack
  • 颜色选择工具：ColorZilla、Coolors、Adobe Color
总结

这篇博客是为 0 编程基础学员打造的 50000 字 + CSS 全教程，从最基础的 CSS 是什么、怎么写讲起，逐章拆解选择器、盒模型、文本样式、背景与边框、Flex/Grid 布局、响应式、动画与过渡等 12 大核心模块，180 + 代码逐行注释，3 个完整企业级项目（求职简历、电商首页、后台管理系统）串联所有技能，7 天内可独立交付可上线的静态前端页面框架。

学习 CSS 的关键是多写、多练、多调试，希望这篇教程能够帮助你快速掌握 CSS 的基础知识和应用技巧，成为一名优秀的前端工程师。

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2026-01-10，如有侵权请联系 cloudcommunity@tencent.com 删除
调试
css
class
布局
模型

本文分享自 作者个人站点/博客 前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ，欢迎热爱写作的你一起参与！

调试
css
class
布局
模型
评论
登录后参与评论
0 条评论
热度
最新
登录 后参与评论
推荐阅读
目录
  • 摘要
  • 正文
    • 第一章 认识 CSS
      • 1.1 什么是 CSS
      • 1.2 CSS 的发展历程
      • 1.3 CSS 的工作原理
      • 1.4 CSS 的三种引入方式
      • 1.5 常用的 CSS 编辑工具
    • 第二章 CSS 基础选择器
      • 2.1 什么是 CSS 选择器
      • 2.2 基础选择器的分类
    • 第三章 CSS 高级选择器
      • 3.1 伪类选择器
    • 第四章 CSS 盒模型深度解析
      • 4.1 什么是 CSS 盒模型
      • 4.2 盒模型的组成
      • 4.3 标准盒模型和怪异盒模型
      • 4.4 盒模型的属性
    • 第五章 CSS 文本样式全解
      • 5.1 字体样式
    • 第六章 CSS 背景与边框特效
      • 6.1 背景样式
    • 第七章 CSS Flex 布局
      • 7.1 什么是 Flex 布局
      • 7.2 容器的属性
      • 7.3 项目的属性
    • 第八章 CSS Grid 布局
      • 8.1 什么是 Grid 布局
      • 8.2 网格容器的属性
      • 8.3 网格项目的属性
    • 第九章 CSS 响应式设计
      • 9.1 什么是响应式设计
      • 9.2 媒体查询
    • 第十章 CSS 动画与过渡
      • 10.1 CSS 过渡
    • 第十一章 CSS 常见组件实战
      • 11.1 按钮组件
    • 第十二章 CSS 完整项目实战
      • 12.1 项目一：个人求职简历单页
    • 第十三章 CSS 浏览器兼容性
      • 13.1 什么是浏览器兼容性
      • 13.2 常用的浏览器内核
      • 13.3 浏览器兼容性问题的解决方法
    • 第十四章 CSS 性能优化
      • 14.1 什么是 CSS 性能优化
      • 14.2 CSS 性能优化的方法
    • 第十五章 CSS 学习资源推荐
      • 15.1 官方文档
      • 15.2 在线教程
      • 15.3 视频教程
      • 15.4 书籍推荐
      • 15.5 工具推荐
    • 总结
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2026 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论