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

原创 于 2026-01-10 12:22:50 发布 · 726 阅读 · 20 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端 #http #fastapi #网络协议 #自然语言处理 #人工智能

王者杯·14天创作挑战营·第9期 10w+人浏览 254人参与

在这里插入图片描述

  【个人主页：】

大语言模型（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.01996 年 12 月基本的文本、颜色、背景、边框、间距等样式
CSS 2.01998 年 5 月浮动布局、定位布局、媒体查询、表格样式等
CSS 2.12011 年 6 月修复了 CSS 2.0 的错误，增加了新属性，删除了过时属性
CSS 3.02012 年 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">样式和结构完全分离，易于维护，可复用，浏览器会缓存需要额外文件，加载时间稍长多个页面的共同样式

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

<!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 的代码：

/* 选择器：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 元素

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

<!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 标签

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

<!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是怪异盒模型。

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

<!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）、百分比、autowidth: 200px
height内容区高度长度值（px、em、rem）、百分比、autoheight: 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-colorborder: 10px solid blue
border-width边框宽度长度值（px、em、rem）、thin、medium、thickborder-width: 10px
border-style边框样式none、solid、dashed、dotted、double、groove、ridge、inset、outsetborder-style: solid
border-color边框颜色颜色值（hex、rgb、rgba、hsl、hsla）、transparentborder-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）、百分比、automargin: 20px、margin: 10px 20px、margin: 10px 20px 30px、margin: 10px 20px 30px 40px
margin-top上外边距长度值（px、em、rem）、百分比、automargin-top: 10px
margin-right右外边距长度值（px、em、rem）、百分比、automargin-right: 20px
margin-bottom下外边距长度值（px、em、rem）、百分比、automargin-bottom: 30px
margin-left左外边距长度值（px、em、rem）、百分比、automargin-left: 40px
box-sizing盒模型类型content-box、border-boxbox-sizing: border-box

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

<!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、obliquefont-style: italic
font-variant字体变体normal、small-capsfont-variant: small-caps
font复合属性包含 font-style、font-variant、font-weight、font-size/line-height、font-familyfont: italic small-caps bold 18px/1.6 Arial, sans-serif

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

<!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）、transparentbackground-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-repeatbackground-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、containbackground-size: 100% 100%、background-size: cover
background-attachment背景附着scroll、fixed、localbackground-attachment: fixed
background复合属性包含 background-color、background-image、background-repeat、background-position、background-size、background-attachmentbackground: #007bff url(images/1.jpg) no-repeat center/cover fixed

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

<!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-flexdisplay: 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-wrapflex-direction + flex-wrapflex-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-basisflex-grow + flex-shrink + flex-basisflex: 1 1 auto、flex: 1
align-self定义单个项目在交叉轴上的对齐方式，覆盖 align-items 的设置flex-start、flex-end、center、baseline、stretchalign-self: flex-end

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

<!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-griddisplay: 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-areasgrid-template-columns + grid-template-rows + grid-template-areasgrid-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-gapgrid-column-gap + grid-row-gapgrid-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-itemsjustify-items + align-itemsplace-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-contentjustify-content + align-contentplace-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-endgrid-column-start + / + grid-column-endgrid-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-endgrid-row-start + / + grid-row-endgrid-row: 1 / 2、grid-row: 1 / span 2
grid-area定义网格项目所在的区域区域名称、grid-row-start + / + grid-column-start + / + grid-row-end + / + grid-column-endgrid-area: sidebar、grid-area: 1 / 2 / 3 / 4
justify-self定义单个网格项目在单元格中的水平对齐方式，覆盖 justify-items 的设置stretch、start、end、centerjustify-self: center
align-self定义单个网格项目在单元格中的垂直对齐方式，覆盖 align-items 的设置stretch、start、end、centeralign-self: center
place-self复合属性，包含 justify-self 和 align-selfjustify-self + align-selfplace-self: center

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

<!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)

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

<!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-delaytransition-property + transition-duration + transition-timing-function + transition-delaytransition: all 0.3s ease-in-out 0.1s

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS过渡示例</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 按钮组件

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

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

<!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。代码示例：

<!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 代码。以下是常用的浏览器内核：

浏览器内核
ChromeBlink（基于 WebKit）
FirefoxGecko
SafariWebKit
EdgeBlink（基于 WebKit）
IETrident
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. 测试：在不同浏览器和操作系统上测试网页的显示效果和功能，及时发现和解决兼容性问题。

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

<!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）：

# 安装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 的基础知识和应用技巧，成为一名优秀的前端工程师。

评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值