-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
235 lines (219 loc) · 10.5 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
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<title></title>
<link rel="stylesheet" href="./lib/fullpage/css/jquery.fullpage.css"/>
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="./css/index.css"/>
<script src="./lib/jquery/jquery.js"></script>
<script src="./lib/Konva-1.0.2/konva.js"></script>
<script src="./lib/fullpage/js/jquery.fullpage.js"></script>
<script src="./lib/bootstrap/js/bootstrap.js"></script>
<script src="./js/index.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="page">
<div class="section sectionOne">
<div class="sectionOneBox">
</div>
<div class="sectionOneMsg">
<div>
<h1>Hello, I'm RedSprite</h1>
<p>马玲玲的个人博客</p>
<a href="#" class="btn btn-default btn-lg">
关于我
</a>
<a href="#" class="btn btn-default btn-lg">
我的作品
</a>
</div>
</div>
</div>
<div class="section sectionTwo">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#page1">RedSpite博客</a>
</div>
<div class="collapse navbar-collapse navbar-right" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#page2">关于我</a></li>
<li><a href="#page3">求职意向</a></li>
<li><a href="#page4">作品集</a></li>
<li><a href="#page5">技术掌握</a></li>
<li><a href="#page6">我的经历</a></li>
<li><a href="#page7">联系我</a></li>
</ul>
</div>
</nav>
<div class="aboutMe">
<h2>
关于我
<span></span>
</h2>
<img src="./images/head.png" alt=""/>
<div class="">
<p class="col-xs-6 col-xs-offset-3">
<span>
我叫马玲玲，30岁，坐标南京，是一名前端工程师。前端是一门有容乃大的行业，我并不是计算机专业出生。
在自学前端之前，唯一接触过的就是大学里的C语言。庆幸的是JS与C很相像，给我很大的信心来学习。
</span>
<span>
很多刚接触前端的童鞋看到这份简历会误以为我是大神，其实远远不是，JQ只是前端框架里最简单的一个。学习的路还很长，志同道合的朋友可以加我，一起进步。 我的微博XXXXX，
微信XXXXXXXX。
</span>
</p>
</div>
</div>
</div>
<div class="section sectionOneThree">
<h2>
求职意向
<span></span>
</h2>
<div class='qzyx col-xs-10 col-xs-offset-1'>
<div class="col-xs-3">
<img src="./images/web.png" alt=""/>
<h4>ps切图</h4>
<p>
从PSD上切出页面需要的图片
将小图标合成spirts优化。
</p>
</div>
<div class="col-xs-3">
<img src="./images/css.png" alt=""/>
<h4>ps切图</h4>
<p>
从PSD上切出页面需要的图片
将小图标合成spirts优化。
</p>
</div>
<div class="col-xs-3">
<img src="./images/js.png" alt=""/>
<h4>ps切图</h4>
<p>
从PSD上切出页面需要的图片
将小图标合成spirts优化。
</p>
</div>
<div class="col-xs-3">
<img src="./images/h5.png" alt=""/>
<h4>ps切图</h4>
<p>
从PSD上切出页面需要的图片
将小图标合成spirts优化。
</p>
</div>
</div>
</div>
<div class="section sectionOneFour">
<h2>
作品集
<span></span>
</h2>
<p>写jq前端功能的时候，我的宗旨是能手写就手写，不依赖插件。手写代码更简洁高效，也更能提升自己技术。</p>
<div class="imgs col-xs-10 col-xs-offset-1">
<ul class="">
<li class='col-xs-6 col-lg-3'><a href="#"><img class="img-responsive" src="./images/01.jpg"
alt=""/></a></li>
<li class='col-xs-6 col-lg-3'><a href="#"><img class="img-responsive" src="./images/02.jpg"
alt=""/></a></li>
<li class='col-xs-6 col-lg-3'><a href="#"><img class="img-responsive" src="./images/03.jpg"
alt=""/></a></li>
<li class='col-xs-6 col-lg-3'><a href="#"><img class="img-responsive" src="./images/04.jpg"
alt=""/></a></li>
<li class='col-xs-6 col-lg-3'><a href="#"><img class="img-responsive" src="./images/05.jpg"
alt=""/></a></li>
<li class='col-xs-6 col-lg-3'><a href="#"><img class="img-responsive" src="./images/06.jpg"
alt=""/></a></li>
<li class='col-xs-6 col-lg-3'><a href="#"><img class="img-responsive" src="./images/07.jpg"
alt=""/></a></li>
<li class='col-xs-6 col-lg-3'><a href="#"><img class="img-responsive" src="./images/08.jpg"
alt=""/></a></li>
</ul>
col-xs-3
</div>
</div>
<div class="section sectionOneFive">
<h2>
技术掌握
<span></span>
</h2>
<div id="dv" class="col-xs-10 col-md-5 col-xs-offset-1"></div>
<div id="dv1" class="col-xs-10 col-md-5 col-xs-offset-1 col-md-offset-0"></div>
</div>
<div class="section sectionOneSix">
<h2>
我的经历
<span></span>
</h2>
<div class="exp">
<div class="rg">
<h4>南京青年北路足浴有限公司</h4>
<p> 技术部/前端工程师</p>
负责官网页面制作。PSD切图后构建页面框架</br>
利用JS、CSS3书写前端功能，让页面更充实丰富</br>
并将代码上传到代码托管平台上
</div>
<div class="left">
<p>09/2015</p>
<p>-</p>
<p>现在</p>
</div>
<span></span>
<div class="left">
<p>06/2016</p>
<p>-</p>
<p>09/2012</p>
</div>
<div class="rg">
<h4>南京青年北路足浴有限公司</h4>
<p> 技术部/前端工程师</p>
负责官网页面制作。PSD切图后构建页面框架</br>
利用JS、CSS3书写前端功能，让页面更充实丰富</br>
并将代码上传到代码托管平台上
</div>
</div>
</div>
<div class="section sectionOneSeven">
<h2>
联系我
<span></span>
</h2>
<div class="footer">
</div>
</div>
</div>
</div>
</div>
<audio autoplay loop style="display:none">
<!--<source src="http://sc1.111ttt.com/2016/1/12/04/205041718593.mp3" type="audio/mpeg">-->
<source src="http://sc1.111ttt.com/2016/1/06/25/199251943186.mp3" type="audio/mpeg">
</audio>
</body>
</html>
<!--分屏滚动
导航栏可以控制滚动,滚动和导航栏是想回交互的
返回顶部的按钮
第一页的控制按钮
股东之后的回调函数
-->
<!--页面适配???使用框架后还需要使用适配吗???-->
<!--
bootstrap响应式的布局
需要添加container吗,一个页面不可以嵌套但是可以使用多个container
使用栅格布局先布局
然后使用class类名来格式化页面
主要是组件的使用
-->