forked from aliceui/aliceui.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathstart.html
More file actions
221 lines (213 loc) · 24.9 KB
/
start.html
File metadata and controls
221 lines (213 loc) · 24.9 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
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
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Alice - 开始使用</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="nico-spm 0.5.5" />
<link type="image/x-icon" href="../static/favicon.ico" rel="icon">
<link rel="stylesheet" href="../static/css/normalize.css" />
<link rel="stylesheet" href="../static/css/site.css" />
<link rel="stylesheet" href="../static/css/solarized.css" />
<link rel="stylesheet" href="../static/style.css" />
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1239219615670154" crossorigin="anonymous"></script>
<style>
/* alipay iconfont */
@font-face {
font-family: "rei";
src: url("https://i.alipayobjects.com/common/fonts/rei.eot?20130423"); /* IE9 */
src: url("https://i.alipayobjects.com/common/fonts/rei.eot?20130423#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("https://i.alipayobjects.com/common/fonts/rei.woff?20130423") format("woff"), /* chrome 6+、firefox 3.6+、Safari5.1+、Opera 11+ */
url("https://i.alipayobjects.com/common/fonts/rei.ttf?20130423") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
url("https://i.alipayobjects.com/common/fonts/rei.svg?20130423#rei") format("svg"); /* iOS 4.1- */
}
.iconfont {
font-family: "rei"!important;
font-style: normal;
font-weight: normal;
cursor: default;
-webkit-font-smoothing: antialiased;
}
</style>
<script src="../static/js/sea.js?nowrap"></script>
<!--[if lt IE 9]>
<script src="../static/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<script src="../dist/bundle.js?nowrap"></script>
<div id="body-wrapper">
<div class="head-area">
<div class="title-area">
<h1>
<a href="../">Alice</a>
</h1>
<p class="description">写样式的更好方式</p>
<img src="/static/alice-top.png" alt="alice" />
</div>
<iframe src="http://ghbtns.com/github-btn.html?user=aliceui&repo=aliceui.org&type=watch&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="90" height="20"></iframe>
</div>
<div class="nav-area">
<ol class="main-nav">
<li><a href="/"><i title="首页" class="iconfont"></i> 首页</a></li>
<li><a href="build.html">构建模块和样式库</a></li>
<li><a href="framework.html">基础框架</a></li>
<li><a href="javascript.html">JavaScript</a></li>
<li><a href="rule.html">规范和最佳实践</a></li>
<li><a href="start.html">开始使用</a></li>
<li><a href="tool.html">工具</a></li>
<li><a href="widget.html">通用样式库</a></li>
</ol>
</div>
<div class="main-area">
<div class="side-area"><ul><li><a href="#一个简单的例子">一个简单的例子</a></li><li><a href="#引用和下载">引用和下载</a></li><li><a href="#就这些？！">就这些？！</a></li></ul></div>
<script type="text/template" id="list-template">
<li><a href="#"><i class="iconfont" title="单箭头右">å</i></a></li>
</script>
<div class="content-area">
<h1>开始使用</h1>
<div class="content"><!--filepath:docs/start.md --> <blockquote>
<p>You jump, I jump! <em>「Titanic」1997</em></p>
</blockquote>
<p>准备要使用 Alice 了吗，天，太激动太正能量了！请随我来。</p>
<p><img src="https://i.alipayobjects.com/e/201303/2P3fLYiHrA.jpg" alt=""></p>
<hr>
<h2 id="一个简单的例子">一个简单的例子<a href="#一个简单的例子" class="anchor">¶</a></h2><div class="highlight"><pre><code class="xml"><span class="doctype"><!DOCTYPE html></span>
<span class="tag"><<span class="title">html</span>></span>
<span class="tag"><<span class="title">head</span>></span>
<span class="tag"><<span class="title">meta</span> <span class="attribute">charset</span>=<span class="value">"UTF-8"</span>></span>
<span class="tag"><<span class="title">title</span>></span>Alice 的简单例子<span class="tag"></<span class="title">title</span>></span>
<span class="tag"><<span class="title">link</span> <span class="attribute">media</span>=<span class="value">"all"</span> <span class="attribute">href</span>=<span class="value">"https://a.alipayobjects.com/alice/one/1.2.2/one.css"</span> <span class="attribute">rel</span>=<span class="value">"stylesheet"</span>></span>
<span class="tag"><<span class="title">style</span>></span><span class="css">
<span class="class">.wrapper</span> <span class="rules">{
<span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">990</span>px</span></span>;
<span class="rule"><span class="attribute">margin</span>:<span class="value"> <span class="number">0</span> auto</span></span>;
<span class="rule">}</span></span>
<span class="tag">h1</span> <span class="rules">{
<span class="rule"><span class="attribute">font-size</span>:<span class="value"> <span class="number">26</span>px</span></span>;
<span class="rule">}</span></span>
<span class="class">.ui-grid-row</span> <span class="rules">{
<span class="rule"><span class="attribute">margin-bottom</span>:<span class="value"> <span class="number">15</span>px</span></span>;
<span class="rule">}</span></span>
</span><span class="tag"></<span class="title">style</span>></span>
<span class="tag"></<span class="title">head</span>></span>
<span class="tag"><<span class="title">body</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"wrapper"</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"ui-grid-row"</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"ui-grid-25"</span>></span>
<span class="tag"><<span class="title">h1</span>></span>这是一个简陋的页面<span class="tag"></<span class="title">h1</span>></span>
<span class="tag"></<span class="title">div</span>></span>
<span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"ui-grid-row"</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"ui-grid-25"</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"ui-nav"</span>></span>
<span class="tag"><<span class="title">ul</span> <span class="attribute">class</span>=<span class="value">"ui-nav-main"</span>></span>
<span class="tag"><<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"ui-nav-item"</span>></span>
<span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"#"</span>></span>一级导航 1<span class="tag"></<span class="title">a</span>></span>
<span class="tag"><<span class="title">ul</span> <span class="attribute">class</span>=<span class="value">"ui-nav-submain"</span>></span>
<span class="tag"><<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"ui-nav-subitem ui-nav-subitem-current"</span>></span><span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"#"</span>></span>二级导航 1-1<span class="tag"></<span class="title">a</span>></span><span class="tag"></<span class="title">li</span>></span>
<span class="tag"><<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"ui-nav-subitem"</span>></span><span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"#"</span>></span>二级导航 1-2<span class="tag"></<span class="title">a</span>></span><span class="tag"></<span class="title">li</span>></span>
<span class="tag"><<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"ui-nav-subitem"</span>></span><span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"#"</span>></span>二级导航 1-3<span class="tag"></<span class="title">a</span>></span><span class="tag"></<span class="title">li</span>></span>
<span class="tag"></<span class="title">ul</span>></span>
<span class="tag"></<span class="title">li</span>></span>
<span class="tag"><<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"ui-nav-item ui-nav-item-current"</span>></span>
<span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"#"</span>></span>一级导航 2<span class="tag"></<span class="title">a</span>></span>
<span class="tag"><<span class="title">ul</span> <span class="attribute">class</span>=<span class="value">"ui-nav-submain"</span>></span>
<span class="tag"><<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"ui-nav-subitem"</span>></span><span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"#"</span>></span>二级导航 2-1<span class="tag"></<span class="title">a</span>></span><span class="tag"></<span class="title">li</span>></span>
<span class="tag"><<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"ui-nav-subitem ui-nav-subitem-current"</span>></span><span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"#"</span>></span>二级导航 2-2<span class="tag"></<span class="title">a</span>></span><span class="tag"></<span class="title">li</span>></span>
<span class="tag"><<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"ui-nav-subitem"</span>></span><span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"#"</span>></span>二级导航 2-3<span class="tag"></<span class="title">a</span>></span><span class="tag"></<span class="title">li</span>></span>
<span class="tag"></<span class="title">ul</span>></span>
<span class="tag"></<span class="title">li</span>></span>
<span class="tag"><<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"ui-nav-item"</span>></span>
<span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"#"</span>></span>一级导航 3<span class="tag"></<span class="title">a</span>></span>
<span class="tag"><<span class="title">ul</span> <span class="attribute">class</span>=<span class="value">"ui-nav-submain"</span>></span>
<span class="tag"><<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"ui-nav-subitem"</span>></span><span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"#"</span>></span>二级导航 3-1<span class="tag"></<span class="title">a</span>></span><span class="tag"></<span class="title">li</span>></span>
<span class="tag"><<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"ui-nav-subitem"</span>></span><span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"#"</span>></span>二级导航 3-2<span class="tag"></<span class="title">a</span>></span><span class="tag"></<span class="title">li</span>></span>
<span class="tag"><<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"ui-nav-subitem ui-nav-subitem-current"</span>></span><span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"#"</span>></span>二级导航 3-3<span class="tag"></<span class="title">a</span>></span><span class="tag"></<span class="title">li</span>></span>
<span class="tag"></<span class="title">ul</span>></span>
<span class="tag"></<span class="title">li</span>></span>
<span class="tag"><<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"ui-nav-item"</span>></span><span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"#"</span>></span>一级导航 4<span class="tag"></<span class="title">a</span>></span><span class="tag"></<span class="title">li</span>></span>
<span class="tag"></<span class="title">ul</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"ui-nav-subcontainer"</span>></span><span class="tag"></<span class="title">div</span>></span>
<span class="tag"></<span class="title">div</span>></span>
<span class="tag"></<span class="title">div</span>></span>
<span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"ui-grid-row"</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"ui-grid-6"</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"ui-box"</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"ui-box-head"</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"ui-box-head-border"</span>></span>
<span class="tag"><<span class="title">h3</span> <span class="attribute">class</span>=<span class="value">"ui-box-head-title"</span>></span>区块标题<span class="tag"></<span class="title">h3</span>></span>
<span class="tag"><<span class="title">span</span> <span class="attribute">class</span>=<span class="value">"ui-box-head-text"</span>></span>其他文字<span class="tag"></<span class="title">span</span>></span>
<span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"#"</span> <span class="attribute">class</span>=<span class="value">"ui-box-head-more"</span>></span>更多<span class="tag"></<span class="title">a</span>></span>
<span class="tag"></<span class="title">div</span>></span>
<span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"ui-box-container"</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"ui-box-content"</span>></span>
<span class="tag"><<span class="title">ul</span> <span class="attribute">class</span>=<span class="value">"ui-list"</span>></span>
<span class="tag"><<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"ui-list-item"</span>></span><span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"#"</span>></span>如何申请认证？<span class="tag"></<span class="title">a</span>></span><span class="tag"></<span class="title">li</span>></span>
<span class="tag"><<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"ui-list-item"</span>></span><span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"#"</span>></span>如何提现？<span class="tag"></<span class="title">a</span>></span><span class="tag"></<span class="title">li</span>></span>
<span class="tag"><<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"ui-list-item"</span>></span><span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"#"</span>></span>支付宝数字证书有什么作用？<span class="tag"></<span class="title">a</span>></span><span class="tag"></<span class="title">li</span>></span>
<span class="tag"><<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"ui-list-item"</span>></span><span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"#"</span>></span>如何申请认证？<span class="tag"></<span class="title">a</span>></span><span class="tag"></<span class="title">li</span>></span>
<span class="tag"></<span class="title">ul</span>></span>
<span class="tag"></<span class="title">div</span>></span>
<span class="tag"></<span class="title">div</span>></span>
<span class="tag"></<span class="title">div</span>></span>
<span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"ui-grid-19"</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"ui-tipbox ui-tipbox-success"</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"ui-tipbox-icon"</span>></span>
<span class="tag"><<span class="title">i</span> <span class="attribute">class</span>=<span class="value">"iconfont"</span> <span class="attribute">title</span>=<span class="value">"成功"</span>></span>&#xF046;<span class="tag"></<span class="title">i</span>></span>
<span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"ui-tipbox-content"</span>></span>
<span class="tag"><<span class="title">h3</span> <span class="attribute">class</span>=<span class="value">"ui-tipbox-title"</span>></span>成功标题<span class="tag"></<span class="title">h3</span>></span>
<span class="tag"><<span class="title">p</span> <span class="attribute">class</span>=<span class="value">"ui-tipbox-explain"</span>></span>完成的说明完成的说明。<span class="tag"></<span class="title">p</span>></span>
<span class="tag"><<span class="title">p</span> <span class="attribute">class</span>=<span class="value">"ui-tipbox-explain"</span>></span><span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"#"</span>></span>查询缴费记录<span class="tag"></<span class="title">a</span>></span> | <span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"#"</span>></span>我的支付宝<span class="tag"></<span class="title">a</span>></span><span class="tag"></<span class="title">p</span>></span>
<span class="tag"></<span class="title">div</span>></span>
<span class="tag"></<span class="title">div</span>></span>
<span class="tag"></<span class="title">div</span>></span>
<span class="tag"></<span class="title">div</span>></span>
<span class="tag"></<span class="title">div</span>></span>
<span class="tag"></<span class="title">body</span>></span>
<span class="tag"></<span class="title">html</span>></span></code></pre></div><p>把上述代码复制到一个新的 html 文件中，然后用浏览器打开；或者可以直接访问 <a href="http://jsfiddle.net/Ltye2/111/">jsfiddle 演示</a>。</p>
<p>你会看到一个使用了 grid、box、nav 和 tipbox 四个模块的页面。</p>
<p>这里我们引用了一个 <a href="https://a.alipayobjects.com/alice/one/1.2.2/one.css">one.css</a> 文件，
这是一个打包了所有 alice 模块的集合文件。</p>
<p>使用 alice 的通用样式模块非常简单，只需要引入样式，复制对应的 HTML 结构，就能构建需要的页面了。
相关的文档和 HTML 结构可以访问菜单上的 <a href="/docs/framework.html">基础框架</a>、<a href="/docs/widget.html">通用样式库</a>、<a href="/docs/javascript.html">JavaScript</a> 这三个链接。</p>
<h2 id="引用和下载">引用和下载<a href="#引用和下载" class="anchor">¶</a></h2><ol>
<li><p>可以直接使用上面的 css 文件，这里提供一个未压缩的版本。</p>
<p><a href="https://a.alipayobjects.com/alice/one/1.2.2/one-debug.css"><a href="https://a.alipayobjects.com/alice/one/1.2.2/one-debug.css">https://a.alipayobjects.com/alice/one/1.2.2/one-debug.css</a></a></p>
<p>这个文件来自于 <a href="https://github.com/aliceui/one">aliceui/one</a>，可以自行 clone 到本地并构建之。</p>
</li>
<li><p>或者通过 <a href="https://github.com/spmjs/spm/tree/2.x/">spm2</a> 工具下载到本地。（这个工具在后面会大量使用）</p>
<pre>$ spm install alice/one</pre><p>这行命令会把所有的 Alice 模块安装到 sea-modules 目录中，您可以自由合并和调用。</p>
</li>
<li><p>当然也可以到我们的 <a href="https://github.com/aliceui/">github 仓库</a> 中 clone 对应的模块自行构建。</p>
</li>
<li><p>利用支付宝的 cdn 和 combo 服务。</p>
<div class="highlight"><pre><code class="xml"><span class="tag"><<span class="title">link</span> <span class="attribute">media</span>=<span class="value">"all"</span> <span class="attribute">href</span>=<span class="value">"https://a.alipayobjects.com/??alice/base/1.0.2/base.css,alice/button/1.2.0/button.css,alice/grid/1.0.0/grid.css"</span> <span class="attribute">rel</span>=<span class="value">"stylesheet"</span>></span></code></pre></div></li>
</ol>
<h2 id="就这些？！">就这些？！<a href="#就这些？！" class="anchor">¶</a></h2><p>你也看到了，通用模块就那么几个，也不怎么好看，你兴许大概不想用。</p>
<p>但是 Alice 本身不是一个只提供这些组件的解决方案，你可以使用这一套模块开发体系<a href="/docs/build.html">搭建自己的模块</a>。</p>
</div>
</div>
</div>
</div>
<div id="footer-wrapper">
<footer>
<p class="powered">
<a href="http://aralejs.org">Arale</a> •
<a href="http://aliceui.org">Alice</a> •
<a href="http://seajs.org">Sea.js</a> •
<a href="http://spmjs.io">spmjs.io</a> •
<a href="http://lab.lepture.com/nico/">nico-spm</a>
</p>
</footer>
</div>
<script>
window['aliceui.org'].init();
</script>
</body>
</html>