-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
328 lines (321 loc) · 14.1 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
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
<!DOCTYPE html>
<html lang="en">
<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>personal</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/chocolat.css" rel="stylesheet" charset="utf-8">
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/easing.js"></script>
<script src="js/modernizr.custom.97074.js"></script>
<script src="js/jquery.hoverdir.js"></script>
<script src="js/banner.js"></script>
<script src="js/circle.js"></script>
<script>
$(function () {
//跳转到指定区域
$(".banner .scroll").click(function () {
$("html, body").animate({scrollTop: $(this.hash).offset().top}, 1000);
});
//鼠标悬停在作品集图片上的动画效果
console.log($(".thumbs > li"));
$(".thumbs > li").each(function () {
$(this).hoverdir();
})
//回到顶部
$(window).scroll(function (ev) {
if ($(this).scrollTop() > 600) {
$("#toTop").show();
} else {
$("#toTop").hide();
}
});
$("#toTop").click(function () {
$("html, body").animate({scrollTop: 0}, 1000);
});
})
</script>
</head>
<body>
<!-- banner -->
<div class="banner" id="home">
<div class="container banner-grids">
<div class="nav col-md-6">
<h2>龙新</h2>
<ul class="nav-list">
<li><a href="#home" class="scroll">Hello</a></li>
<li><a href="#about" class="scroll">关于我</a></li>
<li><a href="#portfolio" class="scroll">作品集</a></li>
<li><a href="#services" class="scroll">专业技能</a></li>
<li><a href="#contact" class="scroll">联系方式</a></li>
</ul>
</div>
<!-- pic -->
<div class="slide col-md-6"></div>
</div>
</div>
<!-- about -->
<div class="about" id="about">
<div class="container">
<div class="about-info">
<h3>关于我</h3>
<h4>为什么想做前端</h4>
<p>前端是一门有趣的学问,它能把页面呈现给全球每一个上网的用户.通过与后台服务器进行有效的数据交换与传输,从而实现页面的动态效果. JavaScript是全世界最流行的编程语言,它拥有全世界最活跃最火爆的开发交流社区. web前端领域越来越流行跟JavaScript离不开关系. 所以能够从事前端工作是一件很有意义的事情.</p>
</div>
<div class="about-grids">
<div class="about-grid col-md-6">
<div class="about-grid-in">
<h4>我的专业技能</h4>
<p>能够熟练使用Html+Css搭建出页面的静态效果,使用自定义媒体查询和BootStrap实现页面的响应式效果. 熟练使用JavaScript、Jquery实现页面的交互效果. 理解原生Ajax以及跨域的原理.</p>
</div>
</div>
<div class="about-grid col-md-6">
<div class="about-grid-in">
<h4>我的目标</h4>
<p>立志成为一名优秀的前端开发者.对工作主动,有责任心,有狼性,能够独立解决项目中出现的开发难题.</p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<!-- skills -->
<div class="my-skills">
<div class="container">
<div class="skill-info">
<h3>我的技能</h3>
</div>
<div class="skill-grids">
<div class="col-md-3">
<div class="skill-grid-in">
<canvas class="circle" id="circle-1" width="160" height="160"></canvas>
<p>Network Technique</p>
</div>
</div>
<div class="col-md-3">
<div class="skill-grid-in">
<canvas class="circle" id="circle-2" width="160" height="160"></canvas>
<p>HTML5</p>
</div>
</div>
<div class="col-md-3">
<div class="skill-grid-in">
<canvas class="circle" id="circle-3" width="160" height="160"></canvas>
<p>CSS3</p>
</div>
</div>
<div class="col-md-3">
<div class="skill-grid-in">
<canvas class="circle" id="circle-4" width="160" height="160"></canvas>
<p>JavaScript</p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<!-- portfolio -->
<div class="portfolio" id="portfolio">
<div class="container">
<h3>作品集</h3>
<ul class="thumbs">
<li class="col-md-6 col-lg-4">
<a href="portfolio/makeyourown/index.html" class="" target="_blank">
<img src="images/p1.png" alt="">
<div>
<h5>响应式个人页面</h5>
<p>使用Css3实现动画效果,html5语义化标签,采用BootStrap的栅格布局和自定义媒体查询实现页面的响应式效果,javascript实现页面交互效果</p>
</div>
</a>
</li>
<li class="col-md-6 col-lg-4">
<a href="portfolio/JD/index.html" class="" target="_blank">
<img src="images/p2.png" alt="">
<div>
<h5>仿京东首页+详情页</h5>
<p>严格按照京东首页PSD文件的结构与样式进行网页布局，实现首页的每一个购物楼层、头部、底部、商品详情页等等。</p>
<p>使用原生js、jquery实现搜索框提示、左侧分类航栏的切换，banner图的自动播放，通过判断页面滚动高度实现左侧楼层导航的显示、切换和跳转等交互效果</p>
</div>
</a>
</li>
<li class="col-md-6 col-lg-4">
<a href="portfolio/awesome/index.html" class="" target="_blank">
<img src="images/p3.png" alt="">
<div>
<h5>暖色调的响应式页面</h5>
<p>主要采用bootstrap栅格布局实现页面响应式效果,组件实现自定义轮播效果,javascript实现导航栏的延迟页面跳转,slide区域的选项切换</p>
</div>
</a>
</li>
<li class="col-md-6 col-lg-4">
<a href="portfolio/snake/snake2.html" class="" target="_blank">
<img src="images/p4.png" alt="">
<div>
<h5>贪吃蛇小Demo</h5>
<p>使用canvas+原生Javascript绘制的贪吃蛇小游戏</p>
</div>
</a>
</li>
<li class="col-md-6 col-lg-4">
<a href="portfolio/spectral/index.html" class="" target="_blank">
<img src="images/p5.png" alt="">
<div>
<h5>Html5 up 响应式页面</h5>
<p>参照html5 up上一个作品,使用Css3实现动画效果,采用BootStrap的栅格布局和自定义媒体查询实现页面的响应式效果</p>
</div>
</a>
</li>
<li class="col-md-6 col-lg-4">
<a href="portfolio/music/index.html" class="" target="_blank">
<img src="images/p6.png" alt="">
<div>
<h5>仿网易云音乐</h5>
<p>使用ajax请求后台服务器php脚本文件,将数据动态地展现到页面中，并实现页面的交互效果. 使用模块化的方式呈现不同的页面，通过ajax去请求不同的html和js文件来实现在不刷新页面的情况下异步加载不同模块.
<br>
使用html5的localStorage动态储存页面的数据信息，让客户端在规定的时间内请求缓存以减少服务器的负载. 通过localStorage存储已收藏歌曲的信息，并保存在收藏歌单中.</p>
</div>
</a>
</li>
<li class="col-md-6 col-lg-4">
<a href="portfolio/weido/index.html" class="" target="_blank">
<img src="images/p7.png" alt="">
<div>
<h5>仿豆瓣App</h5>
<p>使用Vue.js框架组件化搭建豆瓣App页面,使用Vue进行各个页面的数据绑定,选项切换.使用Swiper实现豆瓣首页轮播图效果,通过配置router实现多级路由以及多个页面相互的跳转
</p>
</div>
</a>
</li>
<li class="col-md-6 col-lg-4">
<a href="portfolio/oa/index.html" class="" target="_blank">
<img src="images/p8.png" alt="">
<div>
<h5>办公OA系统</h5>
<p>使用bootstrap实现页面响应式效果,实现各个版块的功能和静态页面的搭建.使用bootstr组件实现模态框信息栏、轮播图切换、标签管理等交互效果.</p>
</div>
</a>
</li>
<div class="clear"></div>
</ul>
</div>
</div>
<!-- services -->
<div class="services" id="services">
<div class="container">
<div class="ser-head">
<h3>主要专业技能</h3>
</div>
<div class="ser-grids">
<div class="ser-grid col-md-4">
<div class="ser-grid-in btm-clr">
<div class="icon">
<span class="glyphicon glyphicon-star"></span>
</div>
<h3>计算机语言</h3>
<p>熟悉HTML、CSS、JavaScript, 对后端语言Java、PHP有一定了解</p>
</div>
</div>
<div class="ser-grid col-md-4">
<div class="ser-grid-in btm-clr">
<div class="icon">
<span class="glyphicon glyphicon-globe"></span>
</div>
<h3>前端框架与库</h3>
<p>熟悉Vue.Js、Jquery、Bootstrap等框架的使用</p>
</div>
</div>
<div class="ser-grid col-md-4">
<div class="ser-grid-in btm-clr">
<div class="icon">
<span class="glyphicon glyphicon-thumbs-up"></span>
</div>
<h3>Html5/Css3 原生JS</h3>
<p>熟悉HTML5/CSS3等相关技术, 能用原生JS编写程序</p>
</div>
</div>
<div class="clearfix"></div>
<div class="ser-grid col-md-4">
<div class="ser-grid-in btm-clr">
<div class="icon">
<span class="glyphicon glyphicon-map-marker"></span>
</div>
<h3>WEB</h3>
<p>熟悉Ajax、Canvas等前端开发技术，熟悉W3C标准</p>
</div>
</div>
<div class="ser-grid col-md-4">
<div class="ser-grid-in btm-clr">
<div class="icon">
<span class="glyphicon glyphicon-cog"></span>
</div>
<h3>交互</h3>
<p>使用JavaScript、jquery实现网页各种交互效果</p>
</div>
</div>
<div class="ser-grid col-md-4">
<div class="ser-grid-in btm-clr">
<div class="icon">
<span class="glyphicon glyphicon-pencil"></span>
</div>
<h3>移动端</h3>
<p>熟悉响应式页面/手机端页面的开发</p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<!-- contact -->
<div class="contact" id="contact">
<div class="container">
<div class="contact-grids">
<div class="contact-grid col-sm-4">
<div class="contact-grid-in">
<div class="icon">
<span class="glyphicon glyphicon-map-marker"></span>
</div>
<p>中国 重庆</p>
</div>
</div>
<div class="contact-grid col-sm-4">
<div class="contact-grid-in">
<div class="icon">
<span class="glyphicon glyphicon-envelope"></span>
</div>
<p><a href="##">806952601@qq.com</a></p>
</div>
</div>
<div class="contact-grid col-sm-4">
<div class="contact-grid-in">
<div class="icon">
<span class="glyphicon glyphicon-earphone"></span>
</div>
<p>13983932527</p>
</div>
</div>
<div class="clear"></div>
</div>
<div class="contact-info">
<form>
<input type="text" placeholder="Your Name" required>
<input type="text" placeholder="Your E-Mail" required>
<input type="text" placeholder="Subject" required>
<textarea placeholder="Your Message" required></textarea>
<input type="submit" value="SEND MESSAGE">
</form>
</div>
</div>
</div>
<!-- footer -->
<div class="footer">
<div class="container">
<p>2017 LX. | <a href="##"> 岁月如歌</a></p>
</div>
</div>
<!-- footer end -->
<a href="#" id="toTop"></a>
</body>
</html>