页面结构与布局

提示： 本模板集合了常用的HTML结构和组件，创建新页面时可以直接复制需要的部分。

标题层级

H1 - 主标题

H2 - 二级标题

H3 - 三级标题

H4 - 四级标题

H5 - 五级标题

H6 - 六级标题

<h1>H1 - 主标题</h1>
<h2>H2 - 二级标题</h2>
<h3>H3 - 三级标题</h3>
<h4>H4 - 四级标题</h4>
<h5>H5 - 五级标题</h5>
<h6>H6 - 六级标题</h6>

文本格式化

普通文本段落

加粗文本

斜体文本

下划线文本

~~删除线文本~~

高亮文本

小号文本

行内代码

键盘输入

<p>普通文本段落</p>
<p><strong>加粗文本</strong></p>
<p><em>斜体文本</em></p>
<p><u>下划线文本</u></p>
<p><s>删除线文本</s></p>
<p><mark>高亮文本</mark></p>
<p><small>小号文本</small></p>
<p><code>行内代码</code></p>
<p><kbd>键盘输入</kbd></p>

链接样式

基本链接

按钮式链接

外部链接（打开新窗口）

下载链接

<p><a href="#">基本链接</a></p>
<p><a href="#" class="btn-link">按钮式链接</a></p>
<p><a href="#" class="external-link" target="_blank">外部链接</a>（打开新窗口）</p>
<p><a href="#" class="download-link">下载链接</a></p>

分隔线

<hr class="divider">
<hr class="divider-dashed">
<hr class="divider-dotted">

列表元素

无序列表

列表项目一
列表项目二
列表项目三

<ul>
    <li>列表项目一</li>
    <li>列表项目二</li>
    <li>列表项目三</li>
</ul>

有序列表

第一步
第二步
第三步

<ol>
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
</ol>

定义列表

术语一: 术语一的解释说明
术语二: 术语二的解释说明

<dl>
    <dt>术语一</dt>
    <dd>术语一的解释说明</dd>
    <dt>术语二</dt>
    <dd>术语二的解释说明</dd>
</dl>

嵌套列表

父列表项 1
- 子列表项 1.1
- 子列表项 1.2
父列表项 2
- 子列表项 2.1
- 子列表项 2.2

<ul>
    <li>父列表项 1
        <ul>
            <li>子列表项 1.1</li>
            <li>子列表项 1.2</li>
        </ul>
    </li>
    <li>父列表项 2
        <ul>
            <li>子列表项 2.1</li>
            <li>子列表项 2.2</li>
        </ul>
    </li>
</ul>

带图标列表

已完成的任务
需要注意的项目
信息项目

<ul class="icon-list">
    <li class="icon-check">已完成的任务</li>
    <li class="icon-warning">需要注意的项目</li>
    <li class="icon-info">信息项目</li>
</ul>

表格元素

基本表格

表头列1	表头列2	表头列3
数据1	数据2	数据3
数据4	数据5	数据6
数据7	数据8	数据9

<div class="table-container">
    <table>
        <thead>
            <tr>
                <th>表头列1</th>
                <th>表头列2</th>
                <th>表头列3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
            </tr>
            <tr>
                <td>数据4</td>
                <td>数据5</td>
                <td>数据6</td>
            </tr>
            <tr>
                <td>数据7</td>
                <td>数据8</td>
                <td>数据9</td>
            </tr>
        </tbody>
    </table>
</div>

带边框表格

名称	版本	系统	状态
Clash Verge	v1.2.3	Windows	稳定版
Shadowrocket	v2.1.12	iOS	最新版

<div class="table-container">
    <table class="table-bordered">
        <thead>
            <tr>
                <th>名称</th>
                <th>版本</th>
                <th>系统</th>
                <th>状态</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Clash Verge</td>
                <td>v1.2.3</td>
                <td>Windows</td>
                <td>稳定版</td>
            </tr>
            <tr>
                <td>Shadowrocket</td>
                <td>v2.1.12</td>
                <td>iOS</td>
                <td>最新版</td>
            </tr>
        </tbody>
    </table>
</div>

条纹表格

选项	描述	默认值
开启系统代理	允许应用接管系统代理设置	开启
自动更新	定期自动更新订阅配置	关闭
启动时连接	程序启动时自动连接到代理	开启

<div class="table-container">
    <table class="table-striped">
        <thead>
            <tr>
                <th>选项</th>
                <th>描述</th>
                <th>默认值</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>开启系统代理</td>
                <td>允许应用接管系统代理设置</td>
                <td>开启</td>
            </tr>
            <tr>
                <td>自动更新</td>
                <td>定期自动更新订阅配置</td>
                <td>关闭</td>
            </tr>
            <tr>
                <td>启动时连接</td>
                <td>程序启动时自动连接到代理</td>
                <td>开启</td>
            </tr>
        </tbody>
    </table>
</div>

响应式表格

工具名称	支持平台	主要协议	使用难度	最后更新
Clash Verge	Windows, macOS, Linux	SS, SSR, Vmess, Trojan	中等	2023-05-15
ClashMeta	Android	SS, SSR, Vmess, Trojan	简单	2023-06-20

<div class="table-responsive">
    <table>
        <thead>
            <tr>
                <th>工具名称</th>
                <th>支持平台</th>
                <th>主要协议</th>
                <th>使用难度</th>
                <th>最后更新</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Clash Verge</td>
                <td>Windows, macOS, Linux</td>
                <td>SS, SSR, Vmess, Trojan</td>
                <td>中等</td>
                <td>2023-05-15</td>
            </tr>
            <tr>
                <td>ClashMeta</td>
                <td>Android</td>
                <td>SS, SSR, Vmess, Trojan</td>
                <td>简单</td>
                <td>2023-06-20</td>
            </tr>
        </tbody>
    </table>
</div>

第一部分

提示： 这里是一个提示框示例，可以用来显示重要信息。

这里是正文内容，可以添加链接和解释说明。

小贴士标题

这里是小贴士内容，可以提供额外的建议或技巧。

第二部分

工具名称初级

工具简短描述

PC Windows 标签3

按钮文本

第三部分

步骤 1: 步骤标题

步骤的详细说明。

步骤 2: 步骤标题

步骤的详细说明。可以添加链接或其他说明。

提示

关于步骤的额外提示或建议。

第四部分

其他内容说明：

链接示例1 - 描述文本
链接示例2 - 描述文本
链接示例3 - 描述文本

结尾文字，总结或额外说明。

提示框与通知

基础提示框

提示： 这是一个基本提示框，用于展示一般性的提示信息。

<div class="note">
    <p><strong>提示：</strong> 这是一个基本提示框，用于展示一般性的提示信息。</p>
</div>

警告提示框

⚠️ 警告

这是一个警告提示框，用于显示需要特别注意的重要信息。

<div class="warning-box">
    <h4>⚠️ 警告</h4>
    <p>这是一个警告提示框，用于显示需要特别注意的重要信息。</p>
</div>

成功提示框

✅ 成功提示

这是一个成功提示框，用于显示操作成功或正确配置的信息。

<div class="success-box">
    <h4>✅ 成功提示</h4>
    <p>这是一个成功提示框，用于显示操作成功或正确配置的信息。</p>
</div>

错误提示框

❌ 错误提示

这是一个错误提示框，用于显示操作失败或配置错误的信息。

<div class="error-box">
    <h4>❌ 错误提示</h4>
    <p>这是一个错误提示框，用于显示操作失败或配置错误的信息。</p>
</div>

信息提示框

ℹ️ 信息提示

这是一个信息提示框，用于展示补充说明或额外的背景信息。

<div class="info-box">
    <h4>ℹ️ 信息提示</h4>
    <p>这是一个信息提示框，用于展示补充说明或额外的背景信息。</p>
</div>

小贴士卡片

小贴士标题

这里是小贴士内容，可以提供额外的建议或技巧。可以包含链接或其他格式化内容。

<div class="tip-card">
    <h3>小贴士标题</h3>
    <p>这里是小贴士内容，可以提供额外的建议或技巧。可以包含<a href="#">链接</a>或其他格式化内容。</p>
</div>

卡片与面板

工具卡片

工具名称初级

工具简短描述文本，介绍其主要功能和特点

PC Windows 标签3

查看教程

<div class="tool-cards">
    <div class="tool-card">
        <div class="tool-icon">
            <img src="../../assets/images/placeholder.png" alt="工具名称" class="no-preview">
        </div>
        <div class="tool-info">
            <h3>工具名称 <span class="difficulty difficulty-beginner">初级</span></h3>
            <p>工具简短描述文本，介绍其主要功能和特点</p>
            <div class="tool-tags">
                <span class="tag">PC</span>
                <span class="tag">Windows</span>
                <span class="tag">标签3</span>
            </div>
            <a href="#" class="btn-view">查看教程</a>
        </div>
    </div>
</div>

难度标签

初级中级高级

<span class="difficulty difficulty-beginner">初级</span>
<span class="difficulty difficulty-intermediate">中级</span>
<span class="difficulty difficulty-advanced">高级</span>

标签样式

默认标签主要次要成功危险警告信息

<span class="tag">默认标签</span>
<span class="tag tag-primary">主要</span>
<span class="tag tag-secondary">次要</span>
<span class="tag tag-success">成功</span>
<span class="tag tag-danger">危险</span>
<span class="tag tag-warning">警告</span>
<span class="tag tag-info">信息</span>

特性卡片

🚀

高速连接

提供稳定快速的连接体验，适合各类网络环境

🔒

安全防护

采用先进加密技术，保护您的网络数据安全

🌐

全球节点

覆盖全球多个区域的服务器节点，随时随地连接

<div class="feature-cards">
    <div class="feature-card">
        <div class="feature-icon">🚀</div>
        <h3>高速连接</h3>
        <p>提供稳定快速的连接体验，适合各类网络环境</p>
    </div>
    <div class="feature-card">
        <div class="feature-icon">🔒</div>
        <h3>安全防护</h3>
        <p>采用先进加密技术，保护您的网络数据安全</p>
    </div>
    <div class="feature-card">
        <div class="feature-icon">🌐</div>
        <h3>全球节点</h3>
        <p>覆盖全球多个区域的服务器节点，随时随地连接</p>
    </div>
</div>

基础卡片

卡片标题

卡片内容区域，可以包含任意HTML元素，如文字、图片、列表等。

查看详情

<div class="basic-card">
    <h3>卡片标题</h3>
    <p>卡片内容区域，可以包含任意HTML元素，如文字、图片、列表等。</p>
    <a href="#" class="card-link">查看详情</a>
</div>

步骤卡片

步骤 1: 步骤标题

步骤的详细说明文字。可以添加链接和解释内容。

<div class="step">
    <h3>步骤 1: 步骤标题</h3>
    <p>步骤的详细说明文字。可以添加<a href="#">链接</a>和解释内容。</p>
    <img src="../../assets/images/placeholder.png" alt="步骤示意图" class="step-image">
</div>

基础内容

文本格式

这是普通段落文本。这是加粗文本，这是斜体文本，这是下划线文本，这是代码片段。

这是一个引用块，可以用来引用其他来源的内容或特别强调的信息。

表格示例

表头1	表头2	表头3
内容1	内容2	内容3
内容4	内容5	内容6

列表类型

有序列表：

第一项内容
第二项内容
第三项内容

无序列表：

列表项目一
列表项目二
列表项目三

常用组件

⚠️ 警告

这是一个警告提示框，用于显示需要特别注意的重要信息。

✅ 成功提示

这是一个成功提示框，用于显示操作成功或正确配置的信息。

折叠面板

点击展开更多内容

这里是折叠内容，可以包含详细的说明、代码或额外信息。

用户只有在需要时才会展开查看，有助于保持页面简洁。

标签系统

主要次要成功危险警告信息

按钮样式

主要按钮次要按钮边框按钮

进阶内容

代码块

// JavaScript代码示例
function exampleFunction() {
    const data = {
        name: 'ToolStore',
        version: '1.0.0'
    };
    
    console.log('示例代码:', data);
    return data;
}

终端命令

$ sudo apt update
$ sudo apt install clash
$ clash -d . -f config.yaml

交互式内容

选项卡1

选项卡2

选项卡3

这是第一个选项卡的内容。可以包含任何HTML元素。

这是第二个选项卡的内容。用于分类展示相关但不同的内容。

这是第三个选项卡的内容。适合用于切换不同平台的操作指南。

图片展示

常见问题解答

问题1：这是一个常见问题？

这是对问题1的详细回答。提供清晰、简洁的解释，必要时可以包含链接或图片辅助说明。

问题2：这是另一个常见问题？

这是对问题2的详细回答。可以列出步骤或提供相关资源链接。

第一步操作
第二步操作
第三步操作

按钮与交互控件

基础按钮

默认按钮主要按钮次要按钮成功按钮危险按钮边框按钮小尺寸按钮大尺寸按钮

<a href="#" class="btn">默认按钮</a>
<a href="#" class="btn btn-primary">主要按钮</a>
<a href="#" class="btn btn-secondary">次要按钮</a>
<a href="#" class="btn btn-success">成功按钮</a>
<a href="#" class="btn btn-danger">危险按钮</a>
<a href="#" class="btn btn-outline">边框按钮</a>
<a href="#" class="btn btn-small">小尺寸按钮</a>
<a href="#" class="btn btn-large">大尺寸按钮</a>

图标按钮

下载外部链接继续

<a href="#" class="btn btn-icon"><span class="icon-download"></span> 下载</a>
<a href="#" class="btn btn-icon"><span class="icon-external"></span> 外部链接</a>
<a href="#" class="btn btn-icon btn-primary"><span class="icon-arrow"></span> 继续</a>

按钮组

按钮1 按钮2 按钮3

<div class="btn-group">
    <a href="#" class="btn">按钮1</a>
    <a href="#" class="btn">按钮2</a>
    <a href="#" class="btn">按钮3</a>
</div>

折叠面板

点击展开更多内容

这里是折叠内容，可以包含详细的说明、代码或额外信息。

用户只有在需要时才会展开查看，有助于保持页面简洁。

<details>
    <summary>点击展开更多内容</summary>
    <div class="details-content">
        <p>这里是折叠内容，可以包含详细的说明、代码或额外信息。</p>
        <p>用户只有在需要时才会展开查看，有助于保持页面简洁。</p>
    </div>
</details>

选项卡界面

选项卡1

选项卡2

选项卡3

这是第一个选项卡的内容。可以包含任何HTML元素。

这是第二个选项卡的内容。用于分类展示相关但不同的内容。

这是第三个选项卡的内容。适合用于切换不同平台的操作指南。

<div class="tabs">
    <div class="tab-header">
        <div class="tab active" data-tab="tab1">选项卡1</div>
        <div class="tab" data-tab="tab2">选项卡2</div>
        <div class="tab" data-tab="tab3">选项卡3</div>
    </div>
    <div class="tab-content">
        <div class="tab-pane active" id="tab1">
            <p>这是第一个选项卡的内容。可以包含任何HTML元素。</p>
        </div>
        <div class="tab-pane" id="tab2">
            <p>这是第二个选项卡的内容。用于分类展示相关但不同的内容。</p>
        </div>
        <div class="tab-pane" id="tab3">
            <p>这是第三个选项卡的内容。适合用于切换不同平台的操作指南。</p>
        </div>
    </div>
</div>

多媒体元素

响应式图片

<img src="../../assets/images/placeholder.png" alt="响应式图片示例" class="responsive-image">

带说明的图片

<figure class="image-container">
    <img src="../../assets/images/placeholder.png" alt="带说明的图片" class="tutorial-image">
    <figcaption>图片说明文字 - 点击图片可放大查看</figcaption>
</figure>

图片边框样式

<img src="../../assets/images/placeholder.png" alt="带边框的图片" class="image-bordered">

图片阴影效果

<img src="../../assets/images/placeholder.png" alt="带阴影的图片" class="image-shadow">

图片画廊

<div class="image-gallery">
    <figure class="gallery-item">
        <img src="../../assets/images/placeholder.png" alt="画廊图片1" class="gallery-image">
        <figcaption>图片1说明</figcaption>
    </figure>
    <figure class="gallery-item">
        <img src="../../assets/images/placeholder.png" alt="画廊图片2" class="gallery-image">
        <figcaption>图片2说明</figcaption>
    </figure>
    <figure class="gallery-item">
        <img src="../../assets/images/placeholder.png" alt="画廊图片3" class="gallery-image">
        <figcaption>图片3说明</figcaption>
    </figure>
</div>

视频嵌入

视频嵌入示例

<div class="video-container">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

代码和命令行

行内代码

使用 npm install clash-verge 命令安装软件。

<p>使用 <code>npm install clash-verge</code> 命令安装软件。</p>

代码块

// JavaScript代码示例
function exampleFunction() {
    const data = {
        name: 'ToolStore',
        version: '1.0.0'
    };
    
    console.log('示例代码:', data);
    return data;
}

<pre><code class="language-javascript">// JavaScript代码示例
function exampleFunction() {
    const data = {
        name: 'ToolStore',
        version: '1.0.0'
    };
    
    console.log('示例代码:', data);
    return data;
}</code></pre>

终端命令

$ sudo apt update
$ sudo apt install clash
$ clash -d . -f config.yaml

<div class="terminal-block">
    <pre><code>$ sudo apt update
$ sudo apt install clash
$ clash -d . -f config.yaml</code></pre>
</div>

文件内容示例

config.yaml

port: 7890
socks-port: 7891
allow-lan: true
mode: Rule
log-level: info
proxies:
  - name: "服务器1"
    type: ss
    server: example.com
    port: 443
    cipher: aes-256-gcm
    password: password

<div class="file-content">
    <div class="file-header">config.yaml</div>
    <pre><code>port: 7890
socks-port: 7891
allow-lan: true
mode: Rule
log-level: info
proxies:
  - name: "服务器1"
    type: ss
    server: example.com
    port: 443
    cipher: aes-256-gcm
    password: password</code></pre>
</div>

下载和引用

下载按钮

Clash Verge v1.2.3 Windows | 10.5MB

<a href="#" class="download-button">
    <span class="download-icon"></span>
    <div class="download-info">
        <span class="download-title">Clash Verge v1.2.3</span>
        <span class="download-meta">Windows | 10.5MB</span>
    </div>
</a>

文件下载列表

配置文件模板

适用于新手的基础配置模板

下载

高级配置示例

包含更多自定义规则的高级配置

下载

<div class="download-list">
    <div class="download-item">
        <div class="download-name">配置文件模板</div>
        <div class="download-description">适用于新手的基础配置模板</div>
        <a href="#" class="btn-download">下载</a>
    </div>
    <div class="download-item">
        <div class="download-name">高级配置示例</div>
        <div class="download-description">包含更多自定义规则的高级配置</div>
        <a href="#" class="btn-download">下载</a>
    </div>
</div>

引用块

这是一个引用块，可以用来引用其他来源的内容或特别强调的信息。
— 引用来源

<blockquote>
    <p>这是一个引用块，可以用来引用其他来源的内容或特别强调的信息。</p>
    <cite>— 引用来源</cite>
</blockquote>

常见问题解答

基本FAQ格式

问题1：这是一个常见问题？

这是对问题1的详细回答。提供清晰、简洁的解释，必要时可以包含链接或图片辅助说明。

问题2：这是另一个常见问题？

这是对问题2的详细回答。可以列出步骤或提供相关资源链接。

第一步操作
第二步操作
第三步操作

<div class="faq-container">
    <details class="faq-item">
        <summary>问题1：这是一个常见问题？</summary>
        <div class="faq-answer">
            <p>这是对问题1的详细回答。提供清晰、简洁的解释，必要时可以包含链接或图片辅助说明。</p>
        </div>
    </details>
    
    <details class="faq-item">
        <summary>问题2：这是另一个常见问题？</summary>
        <div class="faq-answer">
            <p>这是对问题2的详细回答。可以列出步骤或提供相关资源链接。</p>
            <ol>
                <li>第一步操作</li>
                <li>第二步操作</li>
                <li>第三步操作</li>
            </ol>
        </div>
    </details>
</div>

分类FAQ

安装问题

如何安装软件？

安装步骤说明...

使用问题

如何配置代理？

配置代理步骤说明...

<div class="faq-section">
    <h4>安装问题</h4>
    <div class="faq-container">
        <details class="faq-item">
            <summary>如何安装软件？</summary>
            <div class="faq-answer">
                <p>安装步骤说明...</p>
            </div>
        </details>
    </div>
</div>

<div class="faq-section">
    <h4>使用问题</h4>
    <div class="faq-container">
        <details class="faq-item">
            <summary>如何配置代理？</summary>
            <div class="faq-answer">
                <p>配置代理步骤说明...</p>
            </div>
        </details>
    </div>
</div>

高级组件和布局

分栏布局

左栏标题

左栏内容，可以是文字、图片或其他元素。

右栏标题

右栏内容，可以是文字、图片或其他元素。

<div class="two-column">
    <div class="column">
        <h4>左栏标题</h4>
        <p>左栏内容，可以是文字、图片或其他元素。</p>
    </div>
    <div class="column">
        <h4>右栏标题</h4>
        <p>右栏内容，可以是文字、图片或其他元素。</p>
    </div>
</div>

三栏布局

第一栏

第一栏内容

第二栏

第二栏内容

第三栏

第三栏内容

<div class="three-column">
    <div class="column">
        <h4>第一栏</h4>
        <p>第一栏内容</p>
    </div>
    <div class="column">
        <h4>第二栏</h4>
        <p>第二栏内容</p>
    </div>
    <div class="column">
        <h4>第三栏</h4>
        <p>第三栏内容</p>
    </div>
</div>

图文并排

图文并排标题

这是与图片并排的文字内容，可以详细描述图片所展示的内容或提供相关的补充信息。

适合用于步骤说明、产品展示等需要图文结合的场景。

<div class="image-text-container">
    <div class="image-part">
        <img src="../../assets/images/placeholder.png" alt="图文并排示例">
    </div>
    <div class="text-part">
        <h4>图文并排标题</h4>
        <p>这是与图片并排的文字内容，可以详细描述图片所展示的内容或提供相关的补充信息。</p>
        <p>适合用于步骤说明、产品展示等需要图文结合的场景。</p>
    </div>
</div>

比较表

ClashMeta

Shadowrocket

Clash Verge

平台支持

Android

iOS

Windows, macOS, Linux

规则支持

✓

自定义配置

部分支持

有限支持

完全支持

<div class="comparison-table">
    <div class="comparison-header">
        <div class="comparison-cell header-cell"></div>
        <div class="comparison-cell header-cell">ClashMeta</div>
        <div class="comparison-cell header-cell">Shadowrocket</div>
        <div class="comparison-cell header-cell">Clash Verge</div>
    </div>
    <div class="comparison-row">
        <div class="comparison-cell feature-cell">平台支持</div>
        <div class="comparison-cell">Android</div>
        <div class="comparison-cell">iOS</div>
        <div class="comparison-cell">Windows, macOS, Linux</div>
    </div>
    <div class="comparison-row">
        <div class="comparison-cell feature-cell">规则支持</div>
        <div class="comparison-cell">✓</div>
        <div class="comparison-cell">✓</div>
        <div class="comparison-cell">✓</div>
    </div>
    <div class="comparison-row">
        <div class="comparison-cell feature-cell">自定义配置</div>
        <div class="comparison-cell">部分支持</div>
        <div class="comparison-cell">有限支持</div>
        <div class="comparison-cell">完全支持</div>
    </div>
</div>

时间线

2023年1月

Clash Verge 1.0 发布

首个正式版本发布，提供基础代理功能

2023年6月

Clash Verge 1.2 更新

增加多种新功能，优化用户界面

2023年12月

Clash Verge 2.0 发布

全新架构，性能大幅提升

<div class="timeline">
    <div class="timeline-item">
        <div class="timeline-date">2023年1月</div>
        <div class="timeline-content">
            <h4>Clash Verge 1.0 发布</h4>
            <p>首个正式版本发布，提供基础代理功能</p>
        </div>
    </div>
    <div class="timeline-item">
        <div class="timeline-date">2023年6月</div>
        <div class="timeline-content">
            <h4>Clash Verge 1.2 更新</h4>
            <p>增加多种新功能，优化用户界面</p>
        </div>
    </div>
    <div class="timeline-item">
        <div class="timeline-date">2023年12月</div>
        <div class="timeline-content">
            <h4>Clash Verge 2.0 发布</h4>
            <p>全新架构，性能大幅提升</p>
        </div>
    </div>
</div>

模板使用说明

提示： 此模板文件包含了创建文档页面所需的各种HTML组件和样式示例。创建新页面时，可以直接复制需要的部分并根据实际需求修改内容。

使用步骤：

复制此模板创建新的HTML文件
根据页面内容修改标题、描述和关键词
从模板中选择需要的组件并复制到相应位置
替换示例内容为实际内容
确保更新右侧目录导航的链接

最佳实践

保持页面结构一致性，使用统一的样式和命名规范。在添加新的自定义样式前，先检查是否已有现成的组件可用。

页面标题

页面结构与布局

标题层级

H1 - 主标题

H2 - 二级标题

H3 - 三级标题

H4 - 四级标题

H5 - 五级标题

H6 - 六级标题

文本格式化

链接样式

分隔线

列表元素

无序列表

有序列表

定义列表

嵌套列表

带图标列表

表格元素

基本表格

带边框表格

条纹表格

响应式表格

第一部分

小贴士标题

第二部分

工具名称 初级

第三部分

步骤 1: 步骤标题

步骤 2: 步骤标题

提示

第四部分

提示框与通知

基础提示框

警告提示框

⚠️ 警告

成功提示框

✅ 成功提示

错误提示框

❌ 错误提示

信息提示框

ℹ️ 信息提示

小贴士卡片

小贴士标题

卡片与面板

工具卡片

工具名称 初级

难度标签

标签样式

特性卡片

高速连接

安全防护

全球节点

基础卡片

卡片标题

步骤卡片

步骤 1: 步骤标题

基础内容

文本格式

表格示例

列表类型

常用组件

⚠️ 警告

✅ 成功提示

折叠面板

标签系统

按钮样式

进阶内容

代码块

终端命令

交互式内容

图片展示

常见问题解答

按钮与交互控件

基础按钮

图标按钮

按钮组

折叠面板

选项卡界面

多媒体元素

工具名称初级

工具名称初级