-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdocs.html
More file actions
140 lines (104 loc) · 6.88 KB
/
docs.html
File metadata and controls
140 lines (104 loc) · 6.88 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>文档 - yangyang3917的网页</title>
</head>
<body style="background-color:#f7f7f0">
<a href="https://yangyang3917.github.io">前往网页</a>
<h1 id="文档">文档</h1>
<h2 id="1.渐变文本">1.渐变文本</h2>
<h3 id="用法">用法</h3>
<h4 id="①先在html的head部分引入渐变文本css（位于根目录cssjianbianwenben.css）：">①先在html的head部分引入渐变文本css（位于根目录/css/jianbianwenben.css）：</h4>
<pre style="background-color: black;"><code>
<span style="color:#808080"><</span><span style="color:#1d73f1">link</span><span style="color:#9cdcfe"> rel</span><span style="color:#ffffff">=</span><span style="color:#ce9178">"stylesheet"</span><span style="color:#9cdcfe"> href</span><span style="color:#ffffff">=</span><span style="color:#ce9178">"css/jianbianwenben.css"</span><span style="color:#808080">></span>
</code></pre>
<h4 id="②在html代码中调用渐变文本css：">②在html代码中调用渐变文本css：</h4>
<p><code><p class="jianbianwenben" style="--color-start: #ff0000; --color-end: #f031ba; --font-size: 30px; --font-weight: medium;">文本</p></code></p>
<p>可以使用<strong>style=“”</strong>来自定义渐变起始颜色（变量名为<strong>“–color- start”</strong>，默认为#ff6b6b）、终止颜色（变量名为<strong>“–color-end”</strong>，默认为#4ecdc4）、字号（变量名为<strong>“–font-size”</strong>，默认为25px）和字重（变量名为<strong>“–font-weight”</strong>，默认为Light）</p>
<h3 id="附件">附件</h3>
<p><strong>字重对照表</strong></p>
<table>
<colgroup>
<col />
<col />
</colgroup>
<thead>
<tr>
<th> 字重 </th>
<th> 对应中文 </th>
</tr>
</thead>
<tbody>
<tr>
<td> Bold </td>
<td> 粗体 </td>
</tr>
<tr>
<td> BoldItalic </td>
<td> 粗体斜体 </td>
</tr>
<tr>
<td> Italic </td>
<td> 斜体 </td>
</tr>
<tr>
<td> Light </td>
<td> 细体 </td>
</tr>
<tr>
<td> LightItalic </td>
<td> 斜细体 </td>
</tr>
<tr>
<td> Medium </td>
<td> 中等 </td>
</tr>
<tr>
<td> MediumItalic </td>
<td> 中等斜体 </td>
</tr>
<tr>
<td> Regular </td>
<td> 标准 </td>
</tr>
</tbody>
</table>
<h3 id="另：链接文本中的用法">另：链接文本中的用法</h3>
<p>若想在链接文本（点击文本后打开链接）上添加渐变颜色，只需这样写即可</p>
<p><code><a href="链接" target="_blank" class="jianbianwenben" style="--color-start: #26ff00; --color-end: #ffff01;">文本</a></code></p>
<h2 id="2.通知系统">2.通知系统</h2>
<h3 id="用法">用法</h3>
<h4 id="①先在html的head部分引入通知系统css（位于根目录cssnotifications.css）：">①先在html的head部分引入通知系统css（位于根目录/css/notifications.css）：</h4>
<p><code><link rel="stylesheet" href="css/notifications.css"></code></p>
<h4 id="②在html中添加script标签来定义通知函数（同时也引入通知管理器js，路径在根目录jsnotificationmanager.js）：">②在html中添加<code><script></code>标签来定义通知函数（同时也引入通知管理器js，路径在根目录/js/notificationManager.js）：</h4>
<pre style="background-color: black;"><code>
<span style="color:#808080"><</span><span style="color:#1d73f1">script</span><span style="color:#808080">></span>
<span style="color:#c586c0">import</span> <span style="color:#9cdcfe">NotificationManager</span> <span style="color:#c586c0">from</span><span style="color:#ce9178"> './js/notificationManager.js'</span><span style="color:#ffffff">;</span>
<span style="color:#9cdcfe">window</span><span style="color:#dcdc9f">.[通知函数名] =</span><span style="color:#f19f1c"> ()</span><span style="color:#1d73f1"> =></span><span style="color:#f19f1c"> {</span>
<span style="color:#9cdcfe">NotificationManager</span><span style="color:#dcdc9f">.getInstance</span><span style="color:#c586c0">()</span><span style="color:#dcdc9f">.add</span><span style="color:#c586c0">(</span>
<span style="color:#ce9178">'success'</span><span style="color:#ffffff">,</span><span style="color:#548b4c">//通知类型，可用值：success（绿底）、warn（黄底）、error（红底）和info（蓝底）</span>
<span style="color:#ce9178">'文件上传成功'</span><span style="color:#ffffff">,</span><span style="color:#548b4c">//通知标题（加粗）</span>
<span style="color:#ce9178">'耗时 2.3 秒，大小 15.6 MB'</span><span style="color:#ffffff">,</span><span style="color:#548b4c">//通知内容</span>
<span style="color:#1d73f1">{</span>
<span style="color:#9cdcfe">enterDuration:</span><span style="color:#a7cea8"> 300,</span><span style="color:#548b4c">// 进入动画时间（单位：ms）</span>
<span style="color:#9cdcfe">exitDuration:</span><span style="color:#a7cea8"> 500,</span><span style="color:#548b4c">// 退出动画时间（单位：ms）</span>
<span style="color:#9cdcfe">displayDuration:</span><span style="color:#a7cea8"> 4500 </span><span style="color:#548b4c">// 显示时间（单位：ms）</span>
<span style="color:#1d73f1">}</span>
<span style="color:#c586c0">)</span><span style="color:#ffffff">;</span>
<span style="color:#f19f1c">}</span><span style="color:#ffffff">;</span>
<span style="color:#808080"></</span><span style="color:#1d73f1">script</span><span style="color:#808080">></span>
</code></pre>
<h4 id="③在代码中直接调用通知函数名，如点击按钮通知则为：">③在代码中直接调用<em>[通知函数名]</em>，如点击按钮通知则为：</h4>
<p><code><button onclick="<em>[通知函数名()]</em>"按钮显示的文字></button></code></p>
<h2 id="3.背景">3.背景</h2>
<h3 id="关于">关于</h3>
<p>背景是调用的刘明野的工具箱的每日Bing图的api实现一天一更新的</p>
<h3 id="用法">用法</h3>
<h4 id="①先在html的head部分引入背景css（位于根目录cssbackground.css）：">①先在html的head部分引入背景css（位于根目录/css/background.css）：</h4>
<p><code><link rel="stylesheet" href="css/background.css"></code></p>
<h4 id="②再在html的body部分引入背景js（位于根目录jsbackground.js）：">②再在html的body部分引入背景js（位于根目录/js/background.js）：</h4>
<p><code><script src="js/background.js" defer></script></code></p>
<h4 id="③在访问网页时等待加载即可（只有每天第一次访问才需要联网获取）">③在访问网页时等待加载即可（只有每天第一次访问才需要联网获取）</h4>
</body>
</html>