-
Notifications
You must be signed in to change notification settings - Fork 42
/
index.html
193 lines (190 loc) · 5.54 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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>widget 原生JavaScript组件库</title>
<link rel="shortcut icon" href="./public/image/favicon.ico" type="images/x-icon"/>
<link rel="icon" href="./public/image/favicon.png" type="images/png"/>
<link rel="stylesheet" type="text/css" href="./public/style/cssreset-min.css">
<link rel="stylesheet" type="text/css" href="./public/style/common.css">
<style type="text/css">
header{
margin-bottom: 100px;
}
.container{
padding-bottom: 120px;
}
.main{
width:960px;
margin:0 auto;
}
footer{
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
line-height: 40px;
z-index: 99;
}
.mod-head{
width: 960px;
padding-top: 120px;
margin: 0 auto 50px;
line-height: 1.2;
text-align: center;
}
.mod-head h1{
font-size: 48px;
}
.mod-head p{
font-size: 16px;
}
.mod-list{
width: 960px;
margin: 0 auto 20px;
text-align: center;
}
.mod-list li{
display: inline-block;
margin:0 5px;
}
.mod-list .btn{
display: block;
padding: 6px 12px;
background-color: #fff;
border: 1px solid #333;
border-radius: 3px;
color: #333;
transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.mod-list .btn:hover{
background-color: #333;
color:#fff;
}
.mod-botton{
width: 960px;
height: 32px;
margin: 0 auto 20px;
text-align: center;
}
.mod-content{
width:840px;
margin:0 10px 0 auto;
}
.mod-content ul{
overflow: hidden;
}
.mod-content li{
float: left;
width: 50%;
margin-bottom: 10px;
line-height: 20px;
}
.mod-content a:hover{
border-bottom: 1px dotted #666;
}
.mod-foot{
text-align: center;
padding:0 30px;
color:#999;
}
.mod-foot a{
color:#999;
}
::selection {
color: white;
background-color: #333;
}
</style>
</head>
<body>
<div class="wrapper">
<header>
<div class="mod-head">
<h1 style="margin-bottom: 20px;">widget 原生JavaScript组件库</h1>
<p>随着现在各种框架的兴起，我们很少去思考用原生JS是如何工作的，了解原生JS也非常重要～</p>
</div>
<div class="mod-list">
<ul>
<li><a class="btn" href="https://blog.huanghanlian.com/" target="_blank">个人网站</a></li>
<li><a class="btn" href="https://github.com/huanghanzhilian/widget" target="_blank">查看GitHub</a></li>
<li><a class="btn" href="https://github.com/huanghanzhilian/widget/archive/master.zip" target="_blank">下载 .zip</a></li>
</ul>
</div>
</header>
<div class="container">
<div class="main">
<div class="mod-content">
<ul>
<li>
<p><a class="hot" href="/range/" target="_blank">滑动条-range-原生js封装</a><p>
<p>new range("selector",options,callback(api));</p>
</li>
<li>
<p><a class="hot" href="/scrollbar/" target="_blank">滚动条-scrollbar-原生js封装</a><p>
<p>new scrollbar("selector",options,callback(api));</p>
</li>
<li>
<p><a class="hot" href="/calendar/" target="_blank">日历-原生js封装</a><p>
<p>new calendar("selector",options);</p>
</li>
<li>
<p><a class="hot" href="/bannerha/" target="_blank">无缝轮播图-原生js封装</a><p>
<p>new bannerha(selector,{options});</p>
</li>
<li>
<p><a class="hot" href="/tabpanel/" target="_blank">Tab面板-原生js封装</a><p>
<p>new tabpanel(selector,{options});</p>
</li>
<li>
<p><a class="hot" href="/scrollup/" target="_blank">无缝向上滚动-原生js封装</a><p>
<p>new scrollup(selector,{options});</p>
</li>
<li>
<p><a class="hot" href="/magnifier/" target="_blank">放大镜-原生js封装</a><p>
<p>new magnifier(selector,{options});</p>
</li>
<li>
<p><a class="hot" href="/accordion/" target="_blank">手风琴-原生js封装</a><p>
<p>new accordion(selector,{options});</p>
</li>
<li>
<p><a class="hot" href="/countdown/" target="_blank">倒计时-原生js封装</a><p>
<p>new countdown(selector,{options});</p>
</li>
<li>
<p><a class="hot" href="/select/" target="_blank">下拉框-原生js封装</a><p>
<p>new select(selector,{options});</p>
</li>
<li>
<p><a class="hot" href="/tabs/" target="_blank">标签页-tabs-原生js封装</a><p>
<p>new tabs(selector,{options});</p>
</li>
<li>
<p><a class="hot" href="/imagezoom/" target="_blank">图片聚焦-imagezoom-原生js封装</a><p>
<p>new imagezoom(selector,{options});</p>
</li>
<li>
<p><a class="hot" href="/dialog/" target="_blank">弹出框-dialog-原生js封装</a><p>
<p>new dialog(selector,options,callback(api));</p>
</li>
<li>
<p><a class="hot" href="/citys/" target="_blank">城市三级联动 - citys-原生js封装</a><p>
<p>new citys("selector",options,callback(api));</p>
</li>
<li>
<p><a class="hot" href="/inputFormat/" target="_blank">格式化输入框-inputFormat-原生js封装</a><p>
<p>new inputFormat("selector",options,callback(api));</p>
</li>
</ul>
</div>
</div>
</div>
<footer>
<div class="mod-foot">
<p>Copyright © <span>widget.huanghanlian.com</span></p>
</div>
</footer>
</div>
</body>
</html>