-
Notifications
You must be signed in to change notification settings - Fork 3
/
timeline.html
731 lines (709 loc) · 28.4 KB
/
timeline.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
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
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base target="_blank" />
<title>Timeline</title>
<link rel="stylesheet" href="https://at.alicdn.com/t/font_lbyfqsobskz0vn29.css">
<style media="screen">
html,body {
padding: 0;
margin: 0;
background-image: url(./assets/images/line.jpg)
}
.time-line {
display: block;
list-style: none;
width: 980px;
margin: 50px auto;
color: #fff;
padding: 0;
}
ul.time-line > li {
position: relative;
padding: 30px 0;
}
ul.time-line > li:after {
content: '';
display: block;
height: 100%;
position: absolute;
left: 50%;
top: 0;
width: 6px;
background: #5b607d;
margin-left: -3px;
}
ul.time-line > li:first-child:after {
height: 50%;
top: 50%;
}
ul.time-line > li:last-child:after {
height: 50%;
}
ul.time-line > li span.year,
ul.time-line > li span.month {
width: 3em;
height: 3em;
display: block;
position: absolute;
left: 50%;
top: 50%;
margin-top: -1.5em;
margin-left: -1.5em;
line-height: 3em;
background: #5b607d;
border-radius: 50%;
box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.53);
text-align: center;
z-index: 2;
}
ul.time-line > li span.month {
width: 2em;
height: 2em;
line-height: 2em;
margin-top: -1em;
margin-left: -1em;
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.4);
}
/* 左右包裹元素 */
ul.time-line > li .left,
ul.time-line > li .right {
padding: 50px;
width: 50%;
box-sizing: border-box;
left: 0;
}
ul.time-line > li .right {
left: 50%;
position: relative;
}
/* 描述 */
ul.time-line > li .left article,
ul.time-line > li .right article {
left: -50%;
padding: 20px;
border-radius: 5px;
background-color: #967fb5;
position: relative;
line-height: 1.8em;
font-size: 14px;
box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.25);
opacity: 0;
transition: .5s all;
}
ul.time-line > li .right article {
left: 50%;
}
/* 显示描述 */
ul.time-line > li .left article.show {
left: 0;
opacity: 1;
}
ul.time-line > li .right article.show {
left: 0;
opacity: 1;
}
/* 描述三角 */
ul.time-line > li .left article:after,
ul.time-line > li .right article:after {
content: '';
border-width: 10px;
display: block;
position: absolute;
right: -20px;
top: 50%;
border-style: solid;
border-color: transparent transparent transparent #967fb5;
margin-top: -10px;
}
ul.time-line > li .right article:after {
left: -20px;
border-color: transparent #967fb5 transparent transparent;
right: auto;
}
/* 描述主题 */
ul.time-line > li .left.theme-red article,
ul.time-line > li .right.theme-red article {
background-color: #a8618d;
}
ul.time-line > li .left.theme-green article,
ul.time-line > li .right.theme-green article {
background-color: #3e999e;
}
ul.time-line > li .left.theme-red article:after {
border-color: transparent transparent transparent #a8618d;
}
ul.time-line > li .right.theme-red article:after {
border-color: transparent #a8618d transparent transparent;
}
ul.time-line > li .left.theme-green article:after {
border-color: transparent transparent transparent #3e999e;
}
ul.time-line > li .right.theme-green article:after {
border-color: transparent #3e999e transparent transparent;
}
/* 描述样式 */
ul.time-line > li article h2 {
border-bottom: solid 1px rgba(238, 238, 238, 0.5);
padding: 20px;
font-size: 20px;
margin: -20px -20px 20px -20px;
text-align: right;
}
ul.time-line > li article.text-left {
text-align: left;
}
ul.time-line > li article a {
color: #fff;
}
/* 查看详情 */
ul.time-line > li article .detail {
margin-top: 20px;
max-height: 0;
padding-top: 25px;
overflow: hidden;
box-sizing: content-box;
transition: all .5s;
cursor: pointer;
position: relative;
}
ul.time-line > li article .detail:before,
ul.time-line > li article .detail:after {
content: '查看详情 下';
display: block;
position: absolute;
top: 0;
transition: all .5s;
opacity: 1;
font-family: iconfont, sans-serif;
}
ul.time-line > li article .detail:hover:before,
ul.time-line > li article .detail:hover:after {
text-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
}
ul.time-line > li article .detail:after {
margin-top: 20px;
content: '详情 上';
opacity: 0;
}
ul.time-line > li article .detail.show {
max-height: 500px;
}
ul.time-line > li article .detail.show:before {
margin-top: -20px;
opacity: 0;
}
ul.time-line > li article .detail.show:after {
margin-top: 0;
opacity: 1;
}
ul.time-line > li article blockquote p {
margin: 0;
}
/* tags */
ul.time-line > li article .tags span {
border: solid 1px #fff;
border-radius: 4px;
padding: 3px 5px;
}
.iconfont {
font-weight: 100;
margin-right: .5em;
}
#attention {
position: fixed;
right: 0;
border-radius: 5px 0 0 5px;
background: #fff;
padding: 10px;
text-align: right;
box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.44);
line-height: 1.8em;
font-family: cursive;
font-size: 12px;
top: 10px;
}
i.icon-huangze,
i.icon-tzc,
i.icon-toomao {
background-image: url(./assets/images/icon-tzc.jpg);
height: 1em;
width: 1em;
display: inline-block;
background-size: contain;
border-radius: 50%;
vertical-align: middle;
margin-right: 5px;
}
i.icon-toomao {
background-image: url(./assets/images/icon-toomao.jpg);
}
i.icon-huangze {
background-image: url(./assets/images/icon-huangze.jpg);
}
.hint--bottom:after {
font-style: normal;
}
</style>
<link rel="stylesheet" href="https://cdn.bootcss.com/hint.css/2.5.0/hint.base.min.css">
</head>
<body>
<p id='attention'>It's a developing edtion, not final version.<br>非最终版,还在开发中...</p>
<ul class='time-line'>
<li>
<span class='year'>now</span>
</li>
<li>
<div class="left theme-red">
<article>
<h2>
<i class='iconfont icon-html5' title='前端工程师'></i>
<i class='icon-toomao hint--bottom' aria-label='浙江蓝麦电子商务股份有限公司'></i>
向标准看齐
</h2>
<h4 class='tags'>
<span>Riot</span>
<span>WebComponents</span>
<span>CustomElement</span>
</h4>
<p>使用 Riot 进行组件化,浏览器兼容较好的采用 CustomElement V0 标准。</p>
<p>使用 Riot 的主要因素:</p>
<p>1. 与<a href="https://github.com/zhoukekestar/modules/blob/master/src/webcom/README.md">之前的组件化</a>标准类似,迁移成本最低</p>
<p>2. 相比其他框架的优势(引用自官网) </p>
<blockquote>
<p>Close to standards.</p>
<p>Small learning curve.</p>
<p>Small, but complete.</p>
</blockquote>
<div class="detail">
<p>
最大化接近标准,主要是近年来,web 发展迅猛,光编译工具就有 grunt,gulp,webpack,browserify 等等,
前端框架也是层出不穷, 其中包括但不限于 angular, vue, react, polymer 等
</p>
<p>
个人觉得他们的出现是由于 webcomponents 的可实施性和兼容性问题。
但因为解决这个问题而抛弃了太多了标准。所以,个人倾向于类似 riot 的这种小而美,接近标准,少一些私有接口,更重要的是标准带来的便利性。
</p>
<p>未来,比较看好 Polymer , 毕竟 <a href="https://github.com/zhoukekestar/notes/issues/11">Youtube 和 Chrome</a> 都用上了。</p>
<p>相关开源的项目:</p>
<p>
<i class='iconfont icon-github'></i>
<a href="https://github.com/zhoukekestar/form-json">form-json</a>
<span>基于 form 的 application/form-json 扩展</span>
</p>
<p>
<i class='iconfont icon-github'></i>
<a href="https://github.com/zhoukekestar/input-validator">input-validator</a>
<span>基于 form-validate 的扩展</span>
</p>
<p>
<i class='iconfont icon-github'></i>
<a href="https://github.com/zhoukekestar/webcomponents">webcomponents</a>
<span>采用 CustomElement 标准的组件</span>
</p>
<p>
<i class='iconfont icon-github'></i>
<a href="https://github.com/zhoukekestar/modules/blob/master/src/webcom/README.md">webcom</a>
<span>与 riot 类似的组件化工具</span>
</p>
</div>
</article>
</div>
<span class='month'>05</span>
</li>
<li>
<div class="right">
<article>
<h2>
<i class='iconfont icon-html5' title='前端工程师'></i>
<i class='icon-toomao hint--bottom' aria-label='浙江蓝麦电子商务股份有限公司'></i>
灵活的接口调用
</h2>
<h4 class='tags'>
<span>GraphQL</span>
<span>MySQL</span>
<span>Nodejs</span>
</h4>
<p>率先在运营后台接口采用GraphQL标准,实现用户权限与认证模块相关功能,使得前端接口调用更为灵活,接口对接效率大大提升。</p>
<div class="detail">
<p>
由于运营后台的权限认证与公司主要业务关联性不大,加上后台业务比较繁重,故由前端采用nodejs实现该功能。</p>
鉴权方式采用JWT方式,nodejs使用与java后台约定的密钥加密,使得接口调用做到无共享架构。
</p>
<p>相关开源的项目:<p>
<p>
<i class='iconfont icon-github'></i>
<a href="https://github.com/zhoukekestar/graphql-quick-start">graphql-quick-start</a>
<span>GraphQL的快速构建工具</span>
</p>
</div>
</article>
</div>
<span class='month'>01</span>
</li>
<li>
<span class='year'>2017</span>
</li>
<li>
<div class="left theme-red">
<article>
<h2>
<i class='iconfont icon-html5' title='前端工程师'></i>
<i class='icon-toomao hint--bottom' aria-label='浙江蓝麦电子商务股份有限公司'></i>
更高效的前端(2016-01 ~ 2016-12)
</h2>
<h4 class='tags'>
<span>Docker</span>
<span>Git</span>
<span>Weex</span>
<span>Android</span>
</h4>
<ul>
<li>提出采用 Micro Services 的业务架构,将独立并可通用的业务模块封装成微服务,使业务之间耦合度降低,提高了项目的可维护性。</li>
<li>提出采用git + Docker化部署方案,并在前端领域得到了技术总监的许可,先于后端在阿里云上进行docker部署。</li>
<li>采用`git push + auto build + deploy image`的工作流,在测试环境实现了代码变更的自动部署,极大提高了部署效率。正式环境也只需点击确认按钮即可发布。</li>
<li>提出使用Weex编写android和iOS客户端,统一复用三端代码</li>
</ul>
<div class="detail">
<p>关于Docker,之前,阿里云有推出他自己的云引擎ACE,最先采用的部署方式的ACE,后来,渐渐因为nodejs版本更新不及时,
相应速度和稳定性方面的问题,渐渐转向docker。</p>
<p>关于weex,也是因为2015的12月参加了阿里的D2,首次接触到weex,提出3端一致(晚于react)给我较大的震撼,一直惦记着。
到2016年6月开源,一直关注,云栖大会上,拉上技术部的小伙伴一起参加了。
期间,能够看到后台重点推docker,前端重点推weex。于是,我也写了一个android版的
<a href="https://github.com/zhoukekestar/weex-quick-start">weex-quick-start</a>
进行技术调研。</p>
<p>相关开源项目:</p>
<p>
<i class='iconfont icon-github'></i>
<a href="https://github.com/zhoukekestar/weex-quick-start">weex-quick-start</a>
<span>快速搭建android版的Weex</span>
</p>
</div>
</article>
</div>
<span class='month'>01</span>
</li>
<li>
<span class='year'>2016</span>
</li>
<li>
<div class="right theme-green">
<article>
<h2>
<i class='iconfont icon-html5' title='前端工程师'></i>
<i class='icon-toomao hint--bottom' aria-label='浙江蓝麦电子商务股份有限公司'></i>
业余的前端(2015-07 ~ 2015-12)</h2>
<h4 class='tags'>
<span>Nodejs</span>
<span>AMD</span>
<span>Polymer</span>
</h4>
<ul>
<li>提出前后端分离的解决方案,使得项目得到较大的优化。使得项目问题定位更准确,前端优化更为灵活。</li>
<li>采用nodejs编写前端,并用模块化方式(require.js)组织前端功能模块。使得项目更易于维护。</li>
<li>实施组件化(特指封装一段HTML,JS,CSS)方案,将逻辑或布局复杂且相对的独立的组件进行封装,使得页面组织更为清晰,代码维护更为便捷。</li>
</ul>
<div class='detail'>
<p>
参考
<a href="https://github.com/tmallfe/tmallfe.github.io/issues/34">(tmall和polymer)</a>,
造了一个简单组件化轮子modules/webcom。
这使得前端页面的代码重用率有较大提升,项目推进速度加快。
</p>
<p>相关开源项目:</p>
<p>
<i class='iconfont icon-github'></i>
<a href="https://github.com/zhoukekestar/modules">modules</a>
<span>一切皆模块</span>
</p>
</div>
</article>
</div>
<span class='month'>07</span>
</li>
<li>
<span class='year'>2015</span>
</li>
<li>
<div class="left">
<article>
<h2>
<i class='iconfont icon-java' title='Java工程师'></i>
<i class='icon-toomao hint--bottom' aria-label='浙江蓝麦电子商务股份有限公司'></i>
业余的后端(2014-03 ~ 2015-06)
</h2>
<h4 class='tags'>
<span>Java</span>
<span>RESTful</span>
<span>JSP</span>
<span>Servlet</span>
<span>Mybatis</span>
<span>MySQL</span>
</h4>
<ul>
<li>公司基础技术服务的搭建,如:服务器的Linux安装,SVN,FTP搭建,Web Server(apache,nginx,tomcat)的搭建。</li>
<li>负责公司的后台的接口设计、实现和部署(包括公司和阿里云服务器)。提出采用RESTful风格的接口规范,以及整体迁移阿里云的建议,并得到采纳。</li>
<li>负责实现后台安全模块、后台支付模块。对接第三方支付,如支付宝支付,银联支付,满足了当时公司的支付需求,使得公司快速实现现金流的运转。</li>
<li>使用servlet写服务,JSP写web页面。负责土冒后台管理、土冒移动端页面、微信活动。满足了公司初期的后台管理。及时快速地发布土冒移动版、微信优惠活动,使得公司影响力与日俱增。</li>
</ul>
<div class="detail">
<p>相关开源的项目:</p>
<p>
<i class='iconfont icon-github'></i>
<a href="https://github.com/zhoukekestar/SSH-Start">SSH-start</a>
<span>学习三大框架的笔记</span>
</p>
<p>
<i class='iconfont icon-github'></i>
<a href="https://github.com/zhoukekestar/zkk-components">zkk-components</a>
<span>模块化Java</span>
</p>
<p>
<i class='iconfont icon-github'></i>
<a href="https://github.com/zhoukekestar/modules-for-java">modules-for-java</a>
<span>模块化Java</span>
</p>
</div>
</article>
</div>
<span class='month'>03</span>
</li>
<li>
<div class="right">
<article>
<h2>
<i class='iconfont icon-college'></i>
<i class='icon-tzc hint--bottom' aria-label='台州学院'></i>
科目作品
</h2>
<h4 class='tags'>
<span>OpenGL</span>
<span>Socket</span>
<span>Java</span>
<span>C#</span>
</h4>
<ul>
<li>
基于Java和Socket的简易聊天,
<a href="https://github.com/zhoukekestar/college-legacy/tree/master/chat/src">college-legacy/chat</a>
</li>
<li>
基于C#和Socket的五子棋对战,
<a href="https://github.com/zhoukekestar/college-legacy/tree/master/gobang">college-legacy/gobang</a>
</li>
<li>
基于C++和OpenGl的数字魔方,
<a href="https://github.com/zhoukekestar/college-legacy/tree/master/magic-cube">college-legacy/magic-cube</a>
</li>
</ul>
<div class="detail">
<p>跟高中一样,在别人眼中并不是很好的大学,但在我看来,这所大学给予的很多很多,一度让我怀疑,我当初如果上更好的大学,能有这样的资源让我成长吗?感恩台州学院。</p>
<p>相关开源的项目:</p>
<p>
<i class='iconfont icon-github'></i>
<a href="https://github.com/zhoukekestar/college-legacy">college-legacy</a>
<span>大学遗留项目</span>
</p>
</div>
</article>
</div>
<span class='month'>02</span>
</li>
<li>
<span class='year'>2014</span>
</li>
<li>
<div class='left theme-red'>
<article>
<h2>
<i class='iconfont icon-college'></i>
<i class='icon-tzc hint--bottom' aria-label='台州学院'></i>
移动生活(2013-09 ~ 2014-02)
</h2>
<h4 class='tags'>
<span>C</span>
<span>Linux</span>
<span>JAVA</span>
</h4>
<p>项目描述:竞赛的课题,通过下发红外指令,远程控制一些可由遥控器控制的家电(车库,空调,电视等)。实践理论假设,并发表一篇论文。</p>
<p>职责:带领小组成员通过开发嵌入式系统的软件和JSP控制页面,实现预定目标。</p>
<p>成果:一篇公开发表的论文: <a href="http://d.wanfangdata.com.cn/Periodical/hljkjxx201511146">远程控制家具的软件设计]</a>。</p>
<div class='detail'>
<p>项目进行过程中,需要查阅大量linux和嵌入式的资料,自学能力得到较大提升。对Linux和C有了更深入的了解,其中也了解到了pipe、thread等概念。对C在底层系统的应用有了一定的了解</p>
<p>由于项目是嵌入式系统开发,不是单片机开发,所以,该项目没有物电学生的参与,项目成果都是计算机专业的学生。</p>
<p>相关开源项目:</p>
<p>
<i class='iconfont icon-github'></i>
<a href="https://github.com/zhoukekestar/MobileLife">MobileLife</a>
<span>包括Java后台和嵌入式部分源码</span>
</p>
</div>
</article>
</div>
<span class='month'>09</span>
</li>
<li>
<div class="right theme-green">
<article class='text-left'>
<h2>
<i class='iconfont icon-college'></i>
<i class='icon-tzc hint--bottom' aria-label='台州学院'></i>
农场项目 (2013-06 ~ 2013-09)
</h2>
<h4 class='tags'>
<span>ASP</span>
<span>C#</span>
<span>SQL-Server</span>
</h4>
<p>项目描述:通过收集农场温湿度,实时监控并可人为控制各种农场设备,以达到远程管理农场的目的。</p>
<p>职责:项目软件Web客户端和后台通讯负责人。</p>
<p>方案:采用C#做为后台服务器,SQL-Server为数据持久层,使用ASP实时展现温湿度数据,并下发控制指令至后台服务器,并由后台服务器发送指令(如:打开风机使温度降低)。</p>
<p>成果:基本实现农场各项数据的实时监控,并能够下达指令,控制各种设备达到远程管理的效果。</p>
<div class='detail'>
<p>这是老师外接的一个项目,由2个计算机应用的同学,2个物理与电子信息科学的同学(负责设计电路,使用ZigBee搭建内网,收集温湿度等数据,通过2G/3G网络上传至服务器)共同完成。</p>
<p>通过项目的参与,完整地了解整个的项目的流程,学校的理论知识也得到了实践。</p>
<p>相关开源项目:</p>
<p>
<i class='iconfont icon-github'></i>
<a href="https://github.com/zhoukekestar/college-legacy/tree/master/farm">college-legacy/farm</a>
<span>农场部分代码</span>
</p>
</div>
</article>
</div>
<span class='month'>06</span>
</li>
<li>
<div class="left">
<article>
<h2>
<i class='iconfont icon-college'></i>
<i class='icon-tzc hint--bottom' aria-label='台州学院'></i>
ACM省赛 (2013-05)
</h2>
<h4 class='tags'>
<span>C</span>
<span>C++</span>
<span>Math</span>
</h4>
<p>
ACM竞赛,三人团队赛获得
<a href="http://acm.tzc.edu.cn/acmhome/heroList.do?method=showTeamList&year=2013">浙江省赛银奖</a>
</p>
<div class='detail'>
当时我作为ACM会长,和同寝室的ACM队长
<a href="http://acm.tzc.edu.cn/acmhome/userDetail.do?userName=shfs">shfs</a>,还有一个学姐
<a href="http://acm.tzc.edu.cn/acmhome/userDetail.do?&userName=thalia">thalia</a>组成的Team
(压力还挺大的),来到浙江大学紫荆港校区比赛,也是第一次来杭州,能取得这样的成绩,也是挺兴奋的。
</div>
</article>
</div>
<span class='month'>05</span>
</li>
<li>
<span class='year'>2013</span>
</li>
<li>
<span class='year'>2012</span>
</li>
<li>
<div class='right'>
<article>
<h2>
<i class='iconfont icon-college'></i>
<i class='icon-tzc hint--bottom' aria-label='台州学院'></i>
ACM (2011-09 ~ 2013-05)
</h2>
<h4 class='tags'>
<span>C</span>
<span>C++</span>
<span>Math</span>
</h4>
<p>
ACM训练,学习各种算法,各种刷题。查看个人
<a href="http://acm.tzc.edu.cn/acmhome/userDetail.do?userName=zhoukeke">题目列表</a>
</p>
<div class='detail'>
<p>
以刷题为主,训练基本的语法和算法知识。特别是在大一的暑假,在学长的带领下,接触到了快排,堆徘等排序算法,也通过不同的算法
<a href="http://acm.tzc.edu.cn/acmhome/showstatus.do?&userName=zhoukeke&problemId=1283">折腾过排序。</a>
</p>
<p>也学习深搜、广搜、几何、贪心、动态规划等等</p>
</div>
</article>
</div>
<span class='month'>09</span>
</li>
<li>
<div class='left theme-red'>
<article>
<h2>
<i class='iconfont icon-college'></i>
<i class='icon-huangze hint--bottom' aria-label='黄泽中学'></i>
高中生涯
</h2>
<h4 class='tags'>
<span>Math</span>
</h4>
<p>优秀毕业学生 & 高三组数学竞赛,省二等奖。<a href='https://zhoukekestar.github.io/assets/2011_math.html'>查看获奖具体名单</a>.</p>
<div class='detail'>
虽然高中遗憾错过嵊州一中,在别人看来也比较Low的学校,在我眼中,我所受到的教育并不比一中,二中差。也是在毕业的这个暑假,开始自学C语言。
</div>
</article>
</div>
<span class='month'>05</span>
</li>
<li>
<span class='year'>2011</span>
</li>
<li>
<span class='year'>o_o</span>
</li>
</ul>
<script>
var elementInViewport = function (el) {
var rect = el.getBoundingClientRect()
// For invisible element.
if (rect.top + rect.bottom + rect.left + rect.right + rect.height + rect.width === 0) {
return false;
}
if (rect.top >= 0
&& rect.top <= ((window.innerHeight || document.documentElement.clientHeight) - 100)) {
return true;
}
if (rect.bottom >= 100
&& rect.top <= ((window.innerHeight || document.documentElement.clientHeight) - 100)) {
return true;
}
return false;
}
var articles = [].slice.apply(document.querySelectorAll('li article'));
var scrollHandler = function () {
articles.forEach(function (article) {
if (elementInViewport(article)) {
article.classList.add('show');
} else {
article.classList.remove('show');
}
})
}
window.onscroll = scrollHandler;
scrollHandler();
document.body.addEventListener('click', function (e) {
if (e.target.classList.contains('detail')) {
e.target.classList.toggle('show');
}
})
</script>
<!-- GA -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-96916405-4', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>