-
Notifications
You must be signed in to change notification settings - Fork 93
/
bootstarp.html
260 lines (210 loc) · 7.11 KB
/
bootstarp.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
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Terry的响应式个人简历 - GBtags.com</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet">
<style>
/* 定义辅助CSS来美化简历头部 */
body{
font-family: 'microsoft yahei',Arial,sans-serif;
}
.cvheader{
border-bottom: 1px solid #DFDFDF;
padding-top:30px;
padding-bottom:20px;
}
.cvheader h1{
margin:0;
}
.address{
background: #efb73e;
color: #fff;
padding: 10px 0;
}
/* 定义辅助CSS来美化简历主体 */
.cvbody{
padding-top: 50px;
}
.cbox{
margin-bottom: 30px;
color: #FFF;
padding: 50px;
}
/* 定义cbox颜色 */
.green{
background: #2ecc71;
}
.orange{
background: orange;
}
.red{
background: #dd4814;
}
.bbox{
border: 1px solid #DFDFDF;
border-radius: 5px;
margin-bottom:30px;
padding: 50px;
}
.footer{
margin: 30px 0 30px;
padding: 50px;
background: #CCC;
color: #FFF;
}
</style>
</head>
<body>
<!-- 定义简历的头部 //-->
<div class="container">
<div class="row cvheader">
<div class="col-lg-7 col-md-7 col-xs-12">
<!-- 添加颜色//-->
<h1 class="text-primary">Terry Lee</h1>
<!-- 添加图标 //-->
<p><span class="glyphicon glyphicon-paperclip"></span> 前端工程师 && UI设计师</p>
</div>
<div class="col-lg-3 col-md-3 col-xs-12">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-4">
<p id="contact" class="address text-center">联系</p>
</div>
<div class="col-lg-8 col-md-8 col-xs-8">
<p><span class="glyphicon glyphicon-envelope"></span> [email protected]</p>
<p><span class="glyphicon glyphicon-earphone"></span> 13901239073</p>
<p><span class="glyphicon glyphicon-road"></span> 北京市朝阳区劲松三区</p>
</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-xs-12">
<p>
<!-- 这里定义图片为响应式，并且添加圆角效果，以便保证图片在不同设备上都可以完美显示 //-->
<img data-toggle="tooltip" data-placement="left" id="avatar" title="我是Terry" class="img-responsive img-rounded" src="http://www.gbtags.com/gb/networks/avatars/13d6393f-a44c-4180-8cb6-7bf0e4776283.png" alt="">
</p>
</div>
</div>
</div>
<!-- 定义简历的主体部分 //-->
<div class="container">
<div class="row cvbody">
<!-- 这里定义两个区域，布局定义如下：//-->
<div class="col-lg-6 col-md-6 col-xs-12">
<div class="row">
<div class="cbox green">
<h4>个人介绍</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus asperiores eum consequatur hic rem earum repudiandae dicta! Est officiis similique fugiat quod quibusdam rerum ipsum eos soluta tempore cupiditate! Accusantium?
</p>
</div>
<div class="cbox red">
<h4>个人技能</h4>
<p>
<!-- 这里使用Bootstrap3的组件添加技能 //-->
HTML/CSS/Javascript
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:80%"></div>
</div>
Java/J2EE
<div class="progress">
<div class="progress-bar progress-bar-primary" style="width:90%"></div>
</div>
数据库
<div class="progress">
<div class="progress-bar progress-bar-info" style="width:80%"></div>
</div>
Photoshop/UI
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width:50%"></div>
</div>
</p>
</div>
<div class="cbox orange">
<h4>语言水平</h4>
<p>
<canvas id="en" width="150" height="150" class="pull-left"></canvas>
<canvas id="zh" width="150" height="150" class="pull-right"></canvas>
<p class="clearfix"></p>
</p>
</div>
</div>
</div>
<!-- 为了清楚的分割两个区域，这里我们添加了一个空白区域，或者也可以在CSS中定义Margin实现//-->
<div class="col-lg-1 col-md-1 col-xs-12"></div>
<div class="col-lg-5 col-md-5 col-xs-12">
<div class="row">
<div class="bbox">
<h4>教育背景</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione enim adipisci minima perspiciatis ad nesciunt iure asperiores voluptatem neque aperiam molestias cupiditate facilis a eveniet iste sapiente ab repellendus dignissimos.</p>
</div>
<div class="bbox">
<h4>工作经验</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis dolorem mollitia repellendus. Magni laudantium placeat repudiandae tempore iure deleniti obcaecati. Architecto delectus doloremque quo. Dicta ratione vero eos pariatur itaque.</p>
</div>
<div class="bbox">
<h4>个人爱好</h4>
<p>
<span class="glyphicon glyphicon-tree-deciduous"></span> 骑马
<span class="glyphicon glyphicon-plane"></span> 旅游
<p><span class="glyphicon glyphicon-cutlery"></span> 美食</p>
<p><span class="glyphicon glyphicon-music"></span> 音乐</p>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- 定义简历页底 //-->
<div class="container">
<div class="row"><div class="footer text-center">关注-微博</div></div>
</div>
<!-- 引入jQuery类库和Bootstrap3的Javascript类库 //-->
<script type='text/javascript' src="http://libs.baidu.com/jquery/1.11.1/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://192.168.1.103:8081/target/target-script-min.js#anonymous"></script>
<script>
/*Javascript源代码*/
$(function(){
$('#contact').popover({placement:'bottom', container: 'body', html:true, content:'<p>QQ: 36181610</p><p>微博：weibo.com/gbtags</p><p>微信：gbtags</p>'});
$('#avatar').tooltip({'placement':'bottom'});
$.getScript('http://www.chartjs.org/assets/Chart.js',function(){
var zhdata = [{
label: '中文水平',
value: 90,
highlight: "#FFC870",
color: "#F7464A"
}, {
value: 10,
color: "#EEEEEE"
}
]
var zhoptions = {
animation: true,
segmentShowStroke : false
};
var c = $('#zh');
var ct = c.get(0).getContext('2d');
var zhChart = new Chart(ct).Doughnut(zhdata, zhoptions);
var endata = [{
label: '英文水平',
value: 80,
highlight: "#5AD3D1",
color: "#4D5360"
}, {
value: 20,
color: "#EEEEEE"
}
]
var enoptions = {
animation: true,
segmentShowStroke : false
};
var c = $('#en');
var ct = c.get(0).getContext('2d');
var enchart = new Chart(ct).Doughnut(endata, enoptions);
});
});
</script>
</body>
</html>