HTML简介

HTML语法基础

HTML文档结构

HTML标签属性

文档类型定义

HTML语法规则

文本基础

标题与段落

文本格式化

列表

链接

图像

表格

多媒体

表单基础

表单进阶

表单验证

表单样式

语义化标签

HTML5新特性

HTML5文本语义

Canvas绘图

SVG图形

Web存储

IndexedDB

Web Workers

地理位置API

拖放API

历史记录API

剪贴板API

拖放API中级

WebSockets

通知API

全屏API

剪贴板API进阶

文件API

拖放API进阶

CSS集成基础

CSS选择器

CSS盒模型

CSS布局技术

响应式设计

代码规范

可访问性

Web安全

隐私保护

个人网站项目

博客系统项目

电商网站项目

社交平台项目

开发工具

版本控制

包管理器

构建工具

Web Components

PWA渐进式应用

WebAssembly

性能优化

Web发展趋势

AI与Web

Web安全未来

Web技术展望

CSS集成基础

CSS集成概述

CSS（Cascading Style Sheets，层叠样式表）是用于描述HTML文档呈现方式的语言。CSS集成是将样式应用到HTML文档的过程，是实现网页美化和布局的关键技术。

东巴文（db-w.cn） 认为：CSS集成是前端开发的基础技能，掌握多种集成方式可以灵活应对不同场景。

CSS集成方式

三种集成方式对比

方式	优点	缺点	适用场景
内联样式	优先级最高、直接快速	难以维护、代码冗余	临时样式、邮件模板
内部样式表	无需额外请求	仅适用于当前页面	单页面应用、测试
外部样式表	易于维护、可缓存	需要额外HTTP请求	生产环境、大型项目

内联样式

直接在元素上应用样式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内联样式示例</title>
</head>
<body>
    <h1 style="color: blue; text-align: center; font-size: 36px;">
        内联样式示例
    </h1>
    
    <p style="color: #666; font-size: 16px; line-height: 1.6; margin: 20px;">
        这是一个使用内联样式的段落。内联样式直接写在HTML元素的style属性中，
        使用分号分隔多个样式声明。
    </p>
    
    <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
                padding: 20px; 
                border-radius: 10px; 
                color: white; 
                text-align: center;">
        <h2 style="margin-bottom: 10px;">渐变背景卡片</h2>
        <p style="margin: 0;">使用内联样式创建的渐变背景效果</p>
    </div>
    
    <table style="width: 100%; border-collapse: collapse; margin-top: 20px;">
        <tr style="background: #f5f5f5;">
            <th style="padding: 10px; border: 1px solid #ddd; text-align: left;">属性</th>
            <th style="padding: 10px; border: 1px solid #ddd; text-align: left;">值</th>
            <th style="padding: 10px; border: 1px solid #ddd; text-align: left;">说明</th>
        </tr>
        <tr>
            <td style="padding: 10px; border: 1px solid #ddd;">color</td>
            <td style="padding: 10px; border: 1px solid #ddd;">blue</td>
            <td style="padding: 10px; border: 1px solid #ddd;">设置文字颜色</td>
        </tr>
        <tr>
            <td style="padding: 10px; border: 1px solid #ddd;">font-size</td>
            <td style="padding: 10px; border: 1px solid #ddd;">16px</td>
            <td style="padding: 10px; border: 1px solid #ddd;">设置字体大小</td>
        </tr>
        <tr>
            <td style="padding: 10px; border: 1px solid #ddd;">margin</td>
            <td style="padding: 10px; border: 1px solid #ddd;">20px</td>
            <td style="padding: 10px; border: 1px solid #ddd;">设置外边距</td>
        </tr>
    </table>
</body>
</html>

东巴文点评：内联样式优先级最高，但不利于维护和复用，应谨慎使用。

内部样式表

在head中使用style标签

<!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: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f5f5f5;
            padding: 20px;
        }
        
        /* 标题样式 */
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
            font-size: 36px;
        }
        
        h2 {
            color: #667eea;
            margin-bottom: 15px;
            font-size: 24px;
        }
        
        /* 容器样式 */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        }
        
        /* 卡片样式 */
        .card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            color: white;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }
        
        .card-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        .card-content {
            font-size: 14px;
            line-height: 1.6;
        }
        
        /* 按钮样式 */
        .btn {
            display: inline-block;
            padding: 12px 24px;
            background: #667eea;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background 0.3s;
        }
        
        .btn:hover {
            background: #5568d3;
        }
        
        .btn-secondary {
            background: #6c757d;
        }
        
        .btn-secondary:hover {
            background: #5a6268;
        }
        
        /* 表格样式 */
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        
        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        
        th {
            background: #667eea;
            color: white;
            font-weight: bold;
        }
        
        tr:hover {
            background: #f5f5f5;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>内部样式表示例</h1>
        
        <h2>卡片组件</h2>
        
        <div class="card">
            <div class="card-title">🎨 设计理念</div>
            <div class="card-content">
                内部样式表将所有样式集中管理，便于维护和修改。
                适用于单页面应用或测试环境。
            </div>
        </div>
        
        <div class="card">
            <div class="card-title">⚡ 性能优势</div>
            <div class="card-content">
                内部样式表无需额外的HTTP请求，可以加快首屏渲染速度。
                但无法利用浏览器缓存。
            </div>
        </div>
        
        <h2>按钮组件</h2>
        
        <button class="btn">主要按钮</button>
        <button class="btn btn-secondary">次要按钮</button>
        
        <h2>样式对比表</h2>
        
        <table>
            <thead>
                <tr>
                    <th>样式方式</th>
                    <th>优先级</th>
                    <th>可维护性</th>
                    <th>适用场景</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>内联样式</td>
                    <td>最高</td>
                    <td>低</td>
                    <td>临时样式</td>
                </tr>
                <tr>
                    <td>内部样式表</td>
                    <td>中</td>
                    <td>中</td>
                    <td>单页面应用</td>
                </tr>
                <tr>
                    <td>外部样式表</td>
                    <td>低</td>
                    <td>高</td>
                    <td>生产环境</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

外部样式表

创建独立的CSS文件

style.css 文件：

/* ========================================
   东巴文（db-w.cn）- 主样式表
   ======================================== */

/* CSS变量 */
:root {
    --primary-color: #667eea;
    --secondary-color: #764ba2;
    --text-color: #333;
    --text-light: #666;
    --bg-color: #f5f5f5;
    --white: #ffffff;
    --border-radius: 10px;
    --box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
}

/* 重置样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
}

/* 容器 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* 头部 */
.header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: var(--white);
    padding: 20px 0;
    box-shadow: var(--box-shadow);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.logo {
    font-size: 24px;
    font-weight: bold;
}

.nav {
    display: flex;
    gap: 20px;
}

.nav a {
    color: var(--white);
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 5px;
    transition: var(--transition);
}

.nav a:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* 卡片 */
.card {
    background: var(--white);
    border-radius: var(--border-radius);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.card-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--primary-color);
}

.card-content {
    color: var(--text-light);
}

/* 按钮 */
.btn {
    display: inline-block;
    padding: 12px 24px;
    background: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: var(--transition);
}

.btn:hover {
    background: var(--secondary-color);
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.btn-outline:hover {
    background: var(--primary-color);
    color: var(--white);
}

/* 表单 */
.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--text-color);
}

.form-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    transition: var(--transition);
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* 表格 */
.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
}

.table th,
.table td {
    padding: 12px;
    text-align: left;
}

.table th {
    background: var(--primary-color);
    color: var(--white);
    font-weight: bold;
}

.table tr:nth-child(even) {
    background: #f9f9f9;
}

.table tr:hover {
    background: #f0f0f0;
}

/* 响应式 */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        gap: 15px;
    }
    
    .nav {
        flex-wrap: wrap;
        justify-content: center;
    }
}

HTML文件引用外部样式表：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部样式表示例 - 东巴文</title>
    
    <!-- 引入外部样式表 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="header">
        <div class="header-content">
            <div class="logo">🎨 东巴文</div>
            <nav class="nav">
                <a href="#">首页</a>
                <a href="#">教程</a>
                <a href="#">案例</a>
                <a href="#">关于</a>
            </nav>
        </div>
    </header>
    
    <div class="container">
        <div class="card">
            <h2 class="card-title">外部样式表的优势</h2>
            <p class="card-content">
                外部样式表将样式与结构分离，便于维护和复用。
                浏览器可以缓存CSS文件，提高页面加载速度。
            </p>
        </div>
        
        <div class="card">
            <h2 class="card-title">CSS变量</h2>
            <p class="card-content">
                使用CSS变量可以统一管理颜色、间距等样式值，
                修改时只需更改变量定义即可全局生效。
            </p>
        </div>
        
        <div class="card">
            <h2 class="card-title">响应式设计</h2>
            <p class="card-content">
                通过媒体查询实现响应式布局，使网页在不同设备上
                都能良好显示。
            </p>
        </div>
        
        <button class="btn">主要按钮</button>
        <button class="btn btn-outline">轮廓按钮</button>
    </div>
</body>
</html>

@import导入

在CSS中导入其他样式表

/* main.css */

/* 导入其他样式表 */
@import url('base.css');
@import url('components.css');
@import url('layout.css');

/* 主样式 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

base.css：

/* 基础样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
}

components.css：

/* 组件样式 */
.btn {
    padding: 12px 24px;
    border-radius: 5px;
    cursor: pointer;
}

.card {
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

东巴文点评：@import会增加HTTP请求，影响性能，建议使用<link>标签或构建工具合并CSS文件。

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>
        /* 优先级计算：ID选择器 > 类选择器 > 元素选择器 */
        
        /* 元素选择器 - 权重：0,0,1 */
        p {
            color: black;
        }
        
        /* 类选择器 - 权重：0,1,0 */
        .text-red {
            color: red;
        }
        
        /* ID选择器 - 权重：1,0,0 */
        #special-text {
            color: blue;
        }
        
        /* 内联样式 - 权重：1,0,0,0 */
        
        /* !important - 最高优先级 */
        .important-text {
            color: green !important;
        }
    </style>
</head>
<body>
    <h1>CSS优先级示例</h1>
    
    <p>普通段落 - 黑色（元素选择器）</p>
    
    <p class="text-red">红色段落 - 红色（类选择器覆盖元素选择器）</p>
    
    <p id="special-text" class="text-red">
        特殊段落 - 蓝色（ID选择器覆盖类选择器）
    </p>
    
    <p id="special-text" class="text-red" style="color: orange;">
        内联样式段落 - 橙色（内联样式覆盖ID选择器）
    </p>
    
    <p class="important-text" style="color: purple;">
        重要段落 - 绿色（!important覆盖所有）
    </p>
    
    <table border="1" style="margin-top: 20px; border-collapse: collapse;">
        <thead>
            <tr>
                <th style="padding: 10px;">选择器类型</th>
                <th style="padding: 10px;">权重</th>
                <th style="padding: 10px;">示例</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="padding: 10px;">!important</td>
                <td style="padding: 10px;">最高</td>
                <td style="padding: 10px;"><code>color: red !important;</code></td>
            </tr>
            <tr>
                <td style="padding: 10px;">内联样式</td>
                <td style="padding: 10px;">1,0,0,0</td>
                <td style="padding: 10px;"><code>style="color: red;"</code></td>
            </tr>
            <tr>
                <td style="padding: 10px;">ID选择器</td>
                <td style="padding: 10px;">0,1,0,0</td>
                <td style="padding: 10px;"><code>#id { color: red; }</code></td>
            </tr>
            <tr>
                <td style="padding: 10px;">类选择器</td>
                <td style="padding: 10px;">0,0,1,0</td>
                <td style="padding: 10px;"><code>.class { color: red; }</code></td>
            </tr>
            <tr>
                <td style="padding: 10px;">元素选择器</td>
                <td style="padding: 10px;">0,0,0,1</td>
                <td style="padding: 10px;"><code>p { color: red; }</code></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

优先级计算

/* 优先级计算示例 */

/* 权重：0,0,1 - 元素选择器 */
p {
    color: black;
}

/* 权重：0,1,0 - 类选择器 */
.text {
    color: blue;
}

/* 权重：0,1,1 - 类选择器 + 元素选择器 */
p.text {
    color: green;
}

/* 权重：1,0,0 - ID选择器 */
#paragraph {
    color: red;
}

/* 权重：1,0,1 - ID选择器 + 元素选择器 */
p#paragraph {
    color: orange;
}

/* 权重：0,2,0 - 两个类选择器 */
.text.special {
    color: purple;
}

最佳实践

1. 样式组织

/* 推荐：按功能模块组织样式 */

/* ========================================
   1. CSS变量
   ======================================== */
:root {
    --primary-color: #667eea;
    --secondary-color: #764ba2;
}

/* ========================================
   2. 重置样式
   ======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ========================================
   3. 基础样式
   ======================================== */
body {
    font-family: 'Segoe UI', sans-serif;
    line-height: 1.6;
}

/* ========================================
   4. 布局样式
   ======================================== */
.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* ========================================
   5. 组件样式
   ======================================== */
.btn {
    padding: 12px 24px;
    border-radius: 5px;
}

/* ========================================
   6. 工具类
   ======================================== */
.text-center { text-align: center; }
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }

2. 命名规范

/* 推荐：使用BEM命名规范 */

/* Block（块）*/
.card {}

/* Element（元素）*/
.card__title {}
.card__content {}
.card__footer {}

/* Modifier（修饰符）*/
.card--featured {}
.card--dark {}

/* 使用示例 */
<div class="card card--featured">
    <h2 class="card__title">标题</h2>
    <div class="card__content">内容</div>
</div>

3. 性能优化

/* 推荐：避免使用通配符和深层嵌套 */

/* 不推荐 */
* {
    margin: 0;
    padding: 0;
}

body div ul li a span {
    color: red;
}

/* 推荐 */
html, body, div, ul, li, a, span {
    margin: 0;
    padding: 0;
}

.nav-link-text {
    color: red;
}

东巴文点评：良好的CSS组织结构和命名规范是项目可维护性的关键。

学习检验

知识点测试

问题1：以下哪种CSS集成方式的优先级最高？

A. 外部样式表 B. 内部样式表 C. 内联样式 D. 它们优先级相同

<details> <summary>点击查看答案</summary>

答案：C

东巴文解释：内联样式的优先级最高，因为它直接写在HTML元素的style属性中。优先级顺序：内联样式 > ID选择器 > 类选择器 > 元素选择器。

</details>

问题2：CSS选择器.card__title的权重是多少？

A. 0,0,1 B. 0,1,0 C. 0,1,1 D. 1,0,0

<details> <summary>点击查看答案</summary>

答案：B

东巴文解释：.card__title是一个类选择器，权重为0,1,0。注意：__只是BEM命名规范的一部分，不影响选择器权重计算。

</details>

实践任务

任务：创建一个使用外部样式表的个人简历页面，包含头部、个人信息、技能列表和工作经历等部分。

<details> <summary>点击查看参考答案</summary>

resume.css：

/* ========================================
   个人简历样式表 - 东巴文
   ======================================== */

/* CSS变量 */
:root {
    --primary-color: #667eea;
    --secondary-color: #764ba2;
    --text-color: #333;
    --text-light: #666;
    --bg-color: #f5f5f5;
    --white: #ffffff;
}

/* 重置样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
}

/* 容器 */
.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

/* 头部 */
.header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: var(--white);
    padding: 40px 20px;
    text-align: center;
    border-radius: 15px;
    margin-bottom: 30px;
}

.header__avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid var(--white);
    margin-bottom: 15px;
}

.header__name {
    font-size: 32px;
    margin-bottom: 10px;
}

.header__title {
    font-size: 18px;
    opacity: 0.9;
    margin-bottom: 15px;
}

.header__contact {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.header__contact-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* 卡片 */
.card {
    background: var(--white);
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.card__title {
    font-size: 24px;
    color: var(--primary-color);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-color);
}

/* 个人信息 */
.info-list {
    list-style: none;
}

.info-list__item {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.info-list__label {
    width: 100px;
    font-weight: bold;
    color: var(--text-light);
}

.info-list__value {
    flex: 1;
}

/* 技能列表 */
.skill-list {
    list-style: none;
}

.skill-list__item {
    margin-bottom: 15px;
}

.skill-list__name {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-weight: bold;
}

.skill-list__bar {
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.skill-list__progress {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 4px;
    transition: width 0.5s ease;
}

/* 工作经历 */
.experience-list {
    list-style: none;
}

.experience-list__item {
    position: relative;
    padding-left: 30px;
    padding-bottom: 30px;
    border-left: 2px solid var(--primary-color);
}

.experience-list__item:last-child {
    padding-bottom: 0;
}

.experience-list__item::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 0;
    width: 14px;
    height: 14px;
    background: var(--primary-color);
    border-radius: 50%;
}

.experience-list__header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.experience-list__company {
    font-size: 18px;
    font-weight: bold;
    color: var(--primary-color);
}

.experience-list__period {
    color: var(--text-light);
    font-size: 14px;
}

.experience-list__position {
    font-weight: bold;
    margin-bottom: 10px;
}

.experience-list__description {
    color: var(--text-light);
}

/* 响应式 */
@media (max-width: 768px) {
    .header__name {
        font-size: 24px;
    }
    
    .header__contact {
        flex-direction: column;
        align-items: center;
    }
    
    .experience-list__header {
        flex-direction: column;
    }
}

resume.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简历 - 东巴文</title>
    <link rel="stylesheet" href="resume.css">
</head>
<body>
    <div class="container">
        <!-- 头部 -->
        <header class="header">
            <img src="https://via.placeholder.com/120" alt="头像" class="header__avatar">
            <h1 class="header__name">张三</h1>
            <p class="header__title">前端开发工程师</p>
            <div class="header__contact">
                <span class="header__contact-item">📧 zhangsan@example.com</span>
                <span class="header__contact-item">📱 138-0000-0000</span>
                <span class="header__contact-item">📍 北京市</span>
            </div>
        </header>
        
        <!-- 个人信息 -->
        <section class="card">
            <h2 class="card__title">📋 个人信息</h2>
            <ul class="info-list">
                <li class="info-list__item">
                    <span class="info-list__label">姓名：</span>
                    <span class="info-list__value">张三</span>
                </li>
                <li class="info-list__item">
                    <span class="info-list__label">年龄：</span>
                    <span class="info-list__value">28岁</span>
                </li>
                <li class="info-list__item">
                    <span class="info-list__label">学历：</span>
                    <span class="info-list__value">本科</span>
                </li>
                <li class="info-list__item">
                    <span class="info-list__label">工作经验：</span>
                    <span class="info-list__value">5年</span>
                </li>
            </ul>
        </section>
        
        <!-- 专业技能 -->
        <section class="card">
            <h2 class="card__title">💪 专业技能</h2>
            <ul class="skill-list">
                <li class="skill-list__item">
                    <div class="skill-list__name">
                        <span>HTML/CSS</span>
                        <span>95%</span>
                    </div>
                    <div class="skill-list__bar">
                        <div class="skill-list__progress" style="width: 95%;"></div>
                    </div>
                </li>
                <li class="skill-list__item">
                    <div class="skill-list__name">
                        <span>JavaScript</span>
                        <span>90%</span>
                    </div>
                    <div class="skill-list__bar">
                        <div class="skill-list__progress" style="width: 90%;"></div>
                    </div>
                </li>
                <li class="skill-list__item">
                    <div class="skill-list__name">
                        <span>Vue.js</span>
                        <span>85%</span>
                    </div>
                    <div class="skill-list__bar">
                        <div class="skill-list__progress" style="width: 85%;"></div>
                    </div>
                </li>
                <li class="skill-list__item">
                    <div class="skill-list__name">
                        <span>React</span>
                        <span>80%</span>
                    </div>
                    <div class="skill-list__bar">
                        <div class="skill-list__progress" style="width: 80%;"></div>
                    </div>
                </li>
            </ul>
        </section>
        
        <!-- 工作经历 -->
        <section class="card">
            <h2 class="card__title">💼 工作经历</h2>
            <ul class="experience-list">
                <li class="experience-list__item">
                    <div class="experience-list__header">
                        <span class="experience-list__company">ABC科技有限公司</span>
                        <span class="experience-list__period">2021-至今</span>
                    </div>
                    <div class="experience-list__position">高级前端开发工程师</div>
                    <p class="experience-list__description">
                        负责公司核心产品的前端开发工作，主导技术架构设计，
                        优化用户体验，提升页面性能。
                    </p>
                </li>
                <li class="experience-list__item">
                    <div class="experience-list__header">
                        <span class="experience-list__company">XYZ互联网公司</span>
                        <span class="experience-list__period">2019-2021</span>
                    </div>
                    <div class="experience-list__position">前端开发工程师</div>
                    <p class="experience-list__description">
                        参与多个Web应用的开发，使用Vue.js和React构建用户界面，
                        实现响应式设计和移动端适配。
                    </p>
                </li>
            </ul>
        </section>
    </div>
</body>
</html>

</details>

东巴文（db-w.cn） - 让编程学习更有趣、更高效！

上一章：拖放API进阶

下一章：CSS选择器