教程 - VisitorUI

快速开始

1 下载 VisitorUI

首先，您需要下载 VisitorUI 的 CSS 文件。您可以通过以下链接下载：

下载 VisitorUI

2 引入 CSS 文件

在您的 HTML 文件中引入 VisitorUI CSS 文件：

确保 CSS 文件路径正确。如果您将文件放在不同目录，请相应调整路径。

3 使用组件

现在您可以使用 VisitorUI 的类名来应用样式了。例如，创建一个主要按钮：

效果如下：

基础组件教程

创建表单

使用 VisitorUI 创建现代化的表单：

<div class="visitor-form-group">
  <label class="visitor-form-label" for="email">邮箱地址</label>
  <input type="email" class="visitor-form-control" id="email" placeholder="输入邮箱">
</div>

<div class="visitor-form-group">
  <label class="visitor-form-label" for="password">密码</label>
  <input type="password" class="visitor-form-control" id="password" placeholder="输入密码">
</div>

<button class="visitor-btn visitor-btn-primary">登录</button>
                

创建卡片

使用卡片组件展示内容：

<div class="visitor-card" style="max-width: 400px;">
  <div class="visitor-card-header">
    <h3 class="visitor-card-title">卡片标题</h3>
    <p class="visitor-card-subtitle">这是一个副标题</p>
  </div>
  <div class="visitor-card-body">
    <p>卡片内容区域，可以放置文本、图像或其他内容。</p>
    <span class="visitor-badge visitor-badge-primary">新</span>
  </div>
  <div class="visitor-card-footer">
    <button class="visitor-btn visitor-btn-primary">了解更多</button>
  </div>
</div>
                

进阶教程

自定义主题

您可以通过覆盖 CSS 变量来自定义 VisitorUI 的主题：

:root {
  --visitor-primary: #ff6b6b;
  --visitor-secondary: #4ecdc4;
  --visitor-border-radius: 16px;
}
                

将这些 CSS 变量定义放在引入 VisitorUI CSS 文件之后，即可覆盖默认值。

响应式设计

VisitorUI 默认就是响应式的，但您也可以使用自己的媒体查询来进一步定制：

@media (max-width: 768px) {
  .visitor-card {
    margin: 10px;
  }
  
  .visitor-btn {
    width: 100%;
    margin-bottom: 10px;
  }
}
                