代码预览 · 移动端通用 UI 组件库 · 西安小草网络-驰旭教育

r04/about.html · 约 2406 字符
1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
6<title>使用说明</title>
7<link rel="stylesheet" href="style.css">
8</head>
9<body>
10<div class="app">
11  <header class="top">
12    <div class="top-title">使用说明</div>
13    <div class="sub">🎨 UI Kit</div>
14  </header>
15  <main class="main">
16
17<div class="card">
18  <h3><span class="dot"></span>关于组件库</h3>
19  <p style="font-size:14px;line-height:1.7;color:#475569;">纯 CSS + 少量 JS 的轻量移动端组件库，不依赖任何框架，可直接引入 <b>style.css</b> 使用。所有颜色、圆角、间距均通过 CSS 变量暴露，改一处即可整体换肤。</p>
20</div>
21<div class="card">
22  <h3><span class="dot"></span>核心特性</h3>
23  <div class="cell"><div class="ic">🧩</div><div class="tt">30+ 移动端组件</div></div>
24  <div class="cell"><div class="ic">⚡</div><div class="tt">零依赖 · 原生 CSS</div></div>
25  <div class="cell"><div class="ic">🌗</div><div class="tt">CSS 变量主题定制</div></div>
26  <div class="cell"><div class="ic">📱</div><div class="tt">390px 移动端适配</div></div>
27</div>
28<div class="card">
29  <h3><span class="dot"></span>快速开始</h3>
30  <div class="code"># 引入样式
31&lt;link rel="stylesheet" href="style.css"&gt;
32
33# 使用按钮
34&lt;button class="btn btn-primary"&gt;
35  主要按钮
36&lt;/button&gt;
37
38# 切换主题
39:root{ --primary:#06b6d4; }</div>
40</div>
41<div class="card">
42  <h3><span class="dot"></span>资源信息</h3>
43  <div class="list"><div class="kv"><span>分类</span><b>移动端组件库</b></div><div class="kv"><span>组件数</span><b>30+</b></div><div class="kv"><span>依赖</span><b>无</b></div><div class="kv"><span>版本</span><b>v1.0.0</b></div></div>
44  <p class="muted" style="margin-top:10px;">页面示例文案与配色仅作演示用途，可自由替换。</p>
45</div>
46
47  </main>
48  <nav class="nav">
49    <a href="index.html" class="">🏠<span>总览</span></a>
50    <a href="basic.html" class="">🧩<span>组件</span></a>
51    <a href="form.html" class="">📝<span>表单</span></a>
52    <a href="feedback.html" class="">💬<span>反馈</span></a>
53    <a href="about.html" class="on">ℹ️<span>说明</span></a>
54  </nav>
55</div>
56<script></script>
57</body>
58</html>
💻 代码预览 · 移动端通用 UI 组件库
