-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
146 lines (142 loc) · 6.87 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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="import" href="chrome-extension://melpgahbngpgnbhhccnopmlmpbmdaeoi/src/templates/feedback.html">
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6"><img src="./img/icon.jpg"></div>
<div class="col-md-6 text-right text-uppercase">
<h1>李福泉</h1>
<h3>前端工程师</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a href="https://github.com/lifuquan/demo" target="_blank">
<img class="img-responsive" src="./img/banner.jpg">
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>项目</h2>
</div>
</div>
<div class="row">
<div class="col-md-6">
<img class="img-responsive" src="./img/netease.jpg" data-toggle="modal" data-target="#project1">
<h3>前端微专业课程实践</h3>
<p><a href="./demo1/index.html" target="_blank">lifuquan.github.io/demo/demo1</a></p>
</div>
<div class="col-md-6">
<img class="img-responsive" src="./img/todomvc.jpg" data-toggle="modal" data-target="#project2">
<h3>增强版TodoMVC</h3>
<p><a href="./todomvc/index.html" target="_blank">lifuquan.github.io/demo/todomvc</a></p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<img class="img-responsive" src="./img/cat_clicker.jpg" data-toggle="modal" data-target="#project3">
<h3>小猫点击</h3>
<p><a href="./cat_clicker/index.html" target="_blank">lifuquan.github.io/demo/cat_clicker</a></p>
</div>
<div class="col-md-6">
<img class="img-responsive" src="./img/cat_clicker_knockout.jpg" data-toggle="modal" data-target="#project4">
<h3>小猫点击-Knockout版</h3>
<p><a href="./cat_clicker_knockout/index.html" target="_blank">lifuquan.github.io/demo/cat_clicker_knockout</a></p>
</div>
</div>
</div>
<script src="chrome-extension://melpgahbngpgnbhhccnopmlmpbmdaeoi/src/js/libs/GE.min.js"></script>
<!-- Modal -->
<div class="modal fade" id="project1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">前端微专业课程实践</h4>
</div>
<div class="modal-body">
<a href="./demo1/index.html" target="_blank">
<img class="img-responsive" src="./img/netease.jpg">
</a>
<br>
<p>这是网易前端微专业课程布置的课程实践大作业。在完成该项目的过程，主要做了以下工作：</p>
<p>阅读交互稿、视觉稿，进行页面制作；</p>
<p>进行JavaScript交互，实现JavaScript动画；</p>
<p>编写一个简易的字符串模板解析函数，用于把JSON数据渲染到页面上；
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="project2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">增强版TodoMVC</h4>
</div>
<div class="modal-body">
<a href="./todomvc/index.html" target="_blank">
<img class="img-responsive" src="./img/todomvc.jpg">
</a>
<br>
<p>基于Backbone版TodoMVC。</p>
<p>添加任务优先级，用户可设置优先级，可根据优先级筛选任务。</p>
<p>增加了任务的添加时间和最后期限。</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="project3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">小猫点击</h4>
</div>
<div class="modal-body">
<a href="./cat_clicker/index.html" target="_blank">
<img class="img-responsive" src="./img/cat_clicker.jpg">
</a>
<br>
<p>点击小猫名字列表，可切换到相应小猫的图片。点击图片，可更新点击次数，并随点击次数改变小猫头衔。</p>
<p>使用MV*设计模式，解耦模型和视图（未使用框架来组织代码）。</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="project4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">小猫点击-Knockout版</h4>
</div>
<div class="modal-body">
<a href="./cat_clicker_knockout/index.html" target="_blank">
<img class="img-responsive" src="./img/cat_clicker_knockout.jpg">
</a>
<br>
<p>使用knockout框架重复实现小猫点击应用。</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>