-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
274 lines (273 loc) · 16.7 KB
/
index.html
File metadata and controls
274 lines (273 loc) · 16.7 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
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/main.css"/>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>不积跬步,无以至千里</h1>
<p>Michael.Lu's Demo 陈列馆</p>
</div>
<div class="col-lg-8 col-md-8 r-padding clearPadding left">
<a href="http://codefine.github.io/demo/artical/pc/taobao" target="_blank">
<div class="panel panel-warning">
<div class="panel-heading">
<h4>淘宝首页 <span class="label label-warning">PC端<span></h4>
</div>
<div class="panel-body flex">
<div class="col-lg-4 col-md-4 col-sm-4 clearPadding r-padding">
<img src="img/artical/taobao-pc.jpg" alt="antario" class="img-rounded">
</div>
<div class="col-lg-8 col-md-8 col-sm-8 hidden-xs flex-cont">
<p class="indent">电商网站几乎是每个初学者都要仿照的网站，养花缭乱的格局中蕴藏着模块化设计的优良思想。而淘宝又是几乎所有电商网站布局最麻烦的。所以，挑战它！</p>
<p class="indent">本例中，主要从模块化布局切入，模块从大到小，css由外而内，整站多数弹出层交互效果均用hover实现,再加入一些简单的js交互例如侧边栏导航条以及轮播图等。</p>
<h4>
<span class="label label-success">css3</span>
<span class="label label-warning">javascript</span>
<span class="label label-user1">模块化布局</span>
<span class="label label-user2">jsonp</span>
<span class="label label-user3">智能搜索条</span>
<span class="label label-user4">hover</span>
<span class="label label-user5">智能轮播</span>
<span class="label label-danger">侧边导航</span>
</h4>
</div>
</div>
</div>
</a>
<a href="http://codefine.github.io/demo/artical/mobile/antario" target="_blank">
<div class="panel panel-warning">
<div class="panel-heading">
<h4>安踏-去打破 <span class="label label-danger">移动端</span> <span class="label label-primary">目前最得意的DEMO</span></h4>
</div>
<div class="panel-body flex">
<div class="col-lg-4 col-md-4 col-sm-4 clearPadding r-padding">
<img src="img/artical/antario.jpg" alt="antario" class="img-rounded">
</div>
<div class="col-lg-8 col-md-8 col-sm-8 hidden-xs flex-cont">
<p class="indent">从淘宝造物节到安踏去打破，如今这样含有丰富动画效果的移动端页面确实能快速抓住人们的眼球。</p>
<p class="indent">本例中，以css3构建的伪圆柱模型为主体，漂浮层为辅，再配合拖拽以及陀螺仪，效果十分绚丽。</p>
<h4>
<span class="label label-primary">html5</span>
<span class="label label-success">css3</span>
<span class="label label-warning">javascript</span>
<span class="label label-user1">keyframes</span>
<span class="label label-user2">rem适配</span>
<span class="label label-user3">景深适配</span>
<span class="label label-user4">预加载</span>
<span class="label label-user5">爆炸</span>
<span class="label label-danger">圆柱</span>
<span class="label label-info">全景拖拽</span>
<span class="label label-default">陀螺仪</span>
</h4>
</div>
</div>
</div>
</a>
<a href="http://codefine.github.io/demo/artical/mobile/house" target="_blank">
<div class="panel panel-warning">
<div class="panel-heading">
<h4>全景家居 <span class="label label-danger">移动端<span></h4>
</div>
<div class="panel-body flex">
<div class="col-lg-4 col-md-4 col-sm-4 clearPadding r-padding">
<img src="img/artical/house.jpg" alt="antario" class="img-rounded">
</div>
<div class="col-lg-8 col-md-8 col-sm-8 hidden-xs flex-cont">
<p class="indent">360度展现现代家居，如果装修公司以此作为实际效果图，相信对于装修者或者购房者来说，绝对是赏心悦目的体验。</p>
<p class="indent">本例中，通过css3旋转和平移构建的立方体，再偏移Z轴得到内视角。配合拖拽，实现360度旋转观看室内的每个角落。</p>
<h4>
<span class="label label-success">css3</span>
<span class="label label-warning">javascript</span>
<span class="label label-info">全景拖拽</span>
<span class="label label-user5">tween算法</span>
<span class="label label-user4">3D硬件加速</span>
</h4>
</div>
</div>
</div>
</a>
<a href="http://codefine.github.io/demo/artical/mobile/taobao" target="_blank">
<div class="panel panel-warning">
<div class="panel-heading">
<h4>淘宝首页 <span class="label label-danger">移动端<span></h4>
</div>
<div class="panel-body flex">
<div class="col-lg-4 col-md-4 col-sm-4 clearPadding r-padding">
<img src="img/artical/taobao-mb.jpg" alt="antario" class="img-rounded">
</div>
<div class="col-lg-8 col-md-8 col-sm-8 hidden-xs flex-cont">
<p class="indent">现在的大型电商网站都会配备移动端页面，由于本人的理解较为浅显，认为其布局与交互大同小异。但是要做就做好，所以换一种新颖的方式去实现。</p>
<p class="indent">本例中，重点放在运用less去简化rem适配。为了对SEO友好，也采用h5新增标签。</p>
<h4>
<span class="label label-primary">html5</span>
<span class="label label-success">css3</span>
<span class="label label-warning">javascript</span>
<span class="label label-danger">less</span>
<span class="label label-user2">rem适配</span>
<span class="label label-user5">轮播图</span>
<span class="label label-user4">语义化</span>
</h4>
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 clearPadding right">
<div class="panel panel-success">
<div class="panel-heading">
<h4>小型DEMO</h4>
</div>
<div class="panel-body">
<div class="row">
<a href="http://codefine.github.io/demo/practise/canvas/clock" target="_blank">
<img src="img/practise/canvas-clock.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="Canvas时钟"/>
</a>
<a href="http://codefine.github.io/demo/practise/canvas/pixelfont" target="_blank">
<img src="img/practise/canvas-pixelfont.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="Canvas像素显字"/>
</a>
<a href="http://codefine.github.io/demo/practise/css3/clock" target="_blank">
<img src="img/practise/css3-clock.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="CSS3时钟"/>
</a>
<a href="http://codefine.github.io/demo/practise/css3/listfold" target="_blank">
<img src="img/practise/css3-listfold.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="CSS3折纸列表"/>
</a>
</div>
<div class="row">
<a href="http://codefine.github.io/demo/practise/css3/navfan" target="_blank">
<img src="img/practise/css3-navfan.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="CSS3扇形导航"/>
</a>
<a href="http://codefine.github.io/demo/practise/css3/tabcube" target="_blank">
<img src="img/practise/css3-tabcube.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="CSS3立方体轮播图"/>
</a>
<a href="http://codefine.github.io/demo/practise/css3/tabrotate" target="_blank">
<img src="img/practise/css3-tabrotate.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="CSS3旋转轮播图"/>
</a>
<a href="http://codefine.github.io/demo/practise/jq/accordion" target="_blank">
<img src="img/practise/jq-accordion.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JQ手风琴效果"/>
</a>
</div>
<div class="row">
<a href="http://codefine.github.io/demo/practise/jq/dragtogrid" target="_blank">
<img src="img/practise/jq-dragtogrid.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JQ拖拽到网格"/>
</a>
<a href="http://codefine.github.io/demo/practise/jq/magnifying" target="_blank">
<img src="img/practise/jq-magnifying.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JQ放大镜效果"/>
</a>
<a href="http://codefine.github.io/demo/practise/jq/tabfocus" target="_blank">
<img src="img/practise/jq-tabfocus.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JQ焦点轮播图"/>
</a>
<a href="http://codefine.github.io/demo/practise/jq/massage" target="_blank">
<img src="img/practise/jq-massage.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JQ模拟短消息"/>
</a>
</div>
<div class="row">
<a href="http://codefine.github.io/demo/practise/js/delaynav" target="_blank">
<img src="img/practise/js-delaynav.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JS延迟导航"/>
</a>
<a href="http://codefine.github.io/demo/practise/js/dommodify" target="_blank">
<img src="img/practise/js-dommodify.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JS-DOM修改保存"/>
</a>
<a href="http://codefine.github.io/demo/practise/js/dragback" target="_blank">
<img src="img/practise/js-dragback.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JS拖拽回放"/>
</a>
<a href="http://codefine.github.io/demo/practise/js/duty" target="_blank">
<img src="img/practise/js-duty.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JS职位信息"/>
</a>
</div>
<div class="row">
<a href="http://codefine.github.io/demo/practise/js/list" target="_blank">
<img src="img/practise/js-list.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JS简易列表"/>
</a>
<a href="http://codefine.github.io/demo/practise/js/priceCount" target="_blank">
<img src="img/practise/js-priceCount.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JS价格计算"/>
</a>
<a href="http://codefine.github.io/demo/practise/js/qqgame" target="_blank">
<img src="img/practise/js-qqgame.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JS-QQ表情小游戏"/>
</a>
<a href="http://codefine.github.io/demo/practise/js/scroll" target="_blank">
<img src="img/practise/js-scroll.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JS滚动条"/>
</a>
</div>
<div class="row">
<a href="http://codefine.github.io/demo/practise/js/scrollbar" target="_blank">
<img src="img/practise/js-scrollbar.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JS智能滚动条"/>
</a>
<a href="http://codefine.github.io/demo/practise/js/selectall" target="_blank">
<img src="img/practise/js-selectall.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JS全选"/>
</a>
<a href="http://codefine.github.io/demo/practise/js/shopping" target="_blank">
<img src="img/practise/js-shopping.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JS抢购倒计时"/>
</a>
<a href="http://codefine.github.io/demo/practise/js/stargrade" target="_blank">
<img src="img/practise/js-stargrade.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JS星级评分"/>
</a>
</div>
<div class="row">
<a href="http://codefine.github.io/demo/practise/js/tabauto" target="_blank">
<img src="img/practise/js-tabauto.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JS轮播选项卡"/>
</a>
<a href="http://codefine.github.io/demo/practise/js/tabauto2" target="_blank">
<img src="img/practise/js-tabauto2.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JS自动轮播图"/>
</a>
<a href="http://codefine.github.io/demo/practise/js/tabstage2" target="_blank">
<img src="img/practise/js-tabstage2.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JS二级选项卡"/>
</a>
<a href="http://codefine.github.io/demo/practise/js/textmove" target="_blank">
<img src="img/practise/js-textmove.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JS文字搬家"/>
</a>
</div>
<div class="row">
<a href="http://codefine.github.io/demo/practise/js/textoperation" target="_blank">
<img src="img/practise/js-textoperation.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JS查找高亮替换"/>
</a>
<a href="http://codefine.github.io/demo/practise/js/thumbnailtab" target="_blank">
<img src="img/practise/js-thumbnailtab.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JS缩略图轮播图"/>
</a>
<a href="http://codefine.github.io/demo/practise/js/bannerrandom" target="_blank">
<img src="img/practise/js-bannerrandom.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JS随机广告"/>
</a>
<a href="http://codefine.github.io/demo/practise/mobile/scroll" target="_blank">
<img src="img/practise/mobile-scroll.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="移动端-滚动条"/>
</a>
</div>
</div>
<div class="panel-footer">
<blockquote>
<p>Twenty-eight years and my life is still. Trying to get up that great big hill of hope. For a destination.</p>
<footer><cite title="Source Title">What's up</cite>-4 Non Blondes</footer>
</blockquote>
<hr>
<p class="indent">
<strong>本网站用Bootstrap搭建，用时不到1天，配色较为简单，旨在陈列我自学期间的一点点积累。</strong>
</p>
<p class="indent">
<strong>时光荏苒，转眼半年过去了。从最初的html和css奋笔疾书到现在js渐入佳境，虽坎坎坷坷，但一步一个脚印，从未停下脚步。</strong>
</p>
<p class="indent">
<strong>整个学习过程几乎是加速状态，这全都得益于那些看得见和看不见的良师益友，在此特别感谢期间为我答疑解惑的前辈和群友们。</strong>
</p>
<p class="indent">
<strong>我相信这是一个可以通过努力就能自由翱翔的时代，而互联网行业就是那片蓝天。</strong>
</p>
<hr>
<address>
<strong>卢敬陶</strong><br>
<strong>Michael.Lu</strong><br>
<a href="mailto:277133779@qq.com">277133779@qq.com</a>
</address>
</div>
</div>
</div>
</div>
</body>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</html>