-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
227 lines (224 loc) · 10.5 KB
/
index.html
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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>开始 - Kico Style</title>
<meta name="theme-color" content="#3498db">
<link href="css/doc.css" rel="stylesheet" type="text/css"/>
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1"/>
</head>
<body>
<header>
<div class="wrap">
<div class="head-title">
<h3 class="site-title">Kico Style</h3>
<div class="toggle-btn"></div>
</div>
<ul class="head-menu">
<li class="active"><a href="index.html">开始</a></li>
<li><a href="style.html">全局样式</a></li>
<li><a href="components.html">附加组件</a></li>
<li><a href="animation.html">动画与特效</a></li>
<li><a href="https://www.binkic.com" target="_blank">缤奇官网</a></li>
</ul>
</div>
</header>
<main class="container">
<div class="docs-title">
<div class="wrap">
<h1>开始</h1>
<p>Kico Style 是一个由青少年前端工程学习者保罗设计的一个轻量化前端框架。</p>
</div>
</div>
<div class="docs-content">
<div class="wrap">
<section id="start">
<div class="section-title">
<h2>开始使用</h2>
</div>
<div class="section-content">
<p>1. 欢迎享用<del>可口</del>的 Kico Style 1.0。</p>
<p>
<a class="btn blue" href="https://www.binkic.com/product/kico" target="_blank">下载最新版</a>
<a class="btn yellow" href="https://github.com/Dreamer-Paul/Kico-Style">♥ Star</a>
<a class="btn green" href="https://hi-paul.space/talk/kico-style-story.html">开发故事</a>
</p>
<p>2. 在头部引用 Kico Style 的样式表</p>
<pre><link href="css/binkic.css" rel="stylesheet" type="text/css"/></pre>
<p>或者在你的 CSS 里面这样做：</p>
<pre>@import url("binkic.css"); /* 引用缤奇基层框架 */</pre>
<p>3. 在头部插入给页面提供响应式功能的属性</p>
<pre><meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1" /></pre>
</div>
</section>
<section id="setup">
<div class="section-title">
<h2>简要规范</h2>
</div>
<div class="section-content">
<p>底层编写需要按照先写 <header>，之后是 <main>，最后 <footer> 的方法。当然其之间也可以添加 <aside>（侧边栏）一类的标签。这三个标签的含义分别对应页眉，正文和页尾。在本框架内，它们一般为 body 元素的子元素，我们不建议您将此类标签插入至任一子元素。</p>
<pre><header>
// 头部内容区（顶部菜单等）
</header>
<main class="container">
// 正文内容区
</main>
<footer>
// 页尾内容区（友情链接等）
</footer></pre>
<p>如要限制正文区的宽度，并需要在页面左右侧保留边距，请添加一个类名为“wrap”的DIV盒子。</p>
<pre><main class="container">
<div class="wrap">
<p>这段文字的宽度将被约束在1200像素</p>
</div>
</main></pre>
<blockquote>PS：上面添加的"container"类可以让其子元素无论如何放大缩小也不会溢出屏幕。</blockquote>
<p>wrap 也提供了多种扩展类，可以使用不同宽度的同时，也可以清除边距。</p>
<div class="bk-table">
<table class="border">
<thead>
<tr>
<th>类名</th>
<th>行为</th>
</tr>
</thead>
<tbody>
<tr>
<td>wrap</td>
<td>保留 20px 的边距，宽度限制到 1200px</td>
</tr>
<tr>
<td>wrap min</td>
<td>保留 20px 的边距，宽度限制到 800px</td>
</tr>
<tr>
<td>wrap mid</td>
<td>保留 20px 的边距，宽度限制到 1000px</td>
</tr>
<tr>
<td>wrap max</td>
<td>保留 20px 的边距，宽度限制到 1600px</td>
</tr>
<tr>
<td>wrap full</td>
<td>保留 20px 的边距，不限制宽度</td>
</tr>
<tr>
<td>wrap clear</td>
<td>清除边距</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section id="class-use">
<div class="section-title">
<h2>推荐的类名</h2>
</div>
<div class="section-content">
<p>以下为开发者保罗在日常制作项目时采用的一些命名方案，可供大家参考和学习。</p>
<blockquote>Header 子元素的布置可参考下列选择器：</blockquote>
<div class="bk-table">
<table class="border">
<thead>
<tr>
<td>类名</td>
<td>用途</td>
</tr>
</thead>
<tbody>
<tr>
<td>.head-title</td>
<td>页眉标题区，可放站点标题、可供菜单显示的切换按钮</td>
</tr>
<tr>
<td>.head-menu</td>
<td>页眉菜单区，可放站点主要的菜单项</td>
</tr>
<tr>
<td>.site-title</td>
<td>站点标题，同时可放小标题（如有）</td>
</tr>
<tr>
<td>.toggle-btn-btn</td>
<td>切换显示菜单的按钮，用于手机版菜单的显示和隐藏</td>
</tr>
<tr>
<td>.search-btn</td>
<td>切换显示搜索的按钮，用于搜索面板的显示和隐藏</td>
</tr>
</tbody>
</table>
</div>
<blockquote>Main 子元素的布置可参考下列选择器：</blockquote>
<div class="bk-table">
<table class="border">
<thead>
<tr>
<td>类名</td>
<td>用途</td>
</tr>
</thead>
<tbody>
<tr>
<td>main-title</td>
<td>正文头部区，可放正文标题等</td>
</tr>
<tr>
<td>main-content</td>
<td>正文内容区，可放章节（section）等标签</td>
</tr>
</tbody>
</table>
</div>
<blockquote>Footer 子元素的布置可参考下列选择器：</blockquote>
<div class="bk-table">
<table class="border">
<thead>
<tr>
<td>类名</td>
<td>用途</td>
</tr>
</thead>
<tbody>
<tr>
<td>foot-menu</td>
<td>页尾菜单区，可放友情链接等</td>
</tr>
<tr>
<td>sub-footer</td>
<td>页尾扩展区，可放版权信息，社交链接等</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section id="class-not-use">
<div class="section-title">
<h2>切忌的类名</h2>
</div>
<div class="section-content">
<p>由于本框架存在精简的扩展类名，所以在使用本框架的时候切忌使用 <code>red</code>，<code>blue</code>，<code>inline</code> 等词作为元素的样式设定类，按照其他著名前端项目的一贯作风，这些做法都是不可取的（例：示例一），当然如果你实在要用这个名称，前面也得加一个用于区分它的名称吧？（例：示例二）</p>
<pre>.blue{
display: flex;
background: #666;
}
.box-blue{
display: flex;
background: #666;
}</pre>
</div>
</section>
</div>
</div>
</main>
<footer>
<p>© 2017 By <a href="https://hi-paul.space" title="保罗的博客" target="_blank">Dreamer-Paul</a>.</p>
</footer>
<script src="js/docs.js"></script>
<script src="js/binkic.js"></script>
</body>
</html>