-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
467 lines (437 loc) · 23.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/index.css">
<!-- <link href="https://fonts.googleapis.com/css?family=Liu+Jian+Mao+Cao|Long+Cang|Ma+Shan+Zheng|Noto+Sans+SC|Noto+Serif+SC|ZCOOL+KuaiLe|ZCOOL+QingKe+HuangYou|ZCOOL+XiaoWei|Zhi+Mang+Xing&display=swap"
rel="stylesheet"> -->
<title>TIblog - 个人网站</title>
</head>
<body>
<!-- header section -->
<header id="home">
<nav class="nav-area">
<div class="container">
<div class="row">
<div class="col-md-2">
<a href="#" class="logo"><img src="img/ti.png" alt=""></a>
</div>
<div class="col-md-10">
<ul id="main-menu">
<li><a href="#home">主页</a></li>
<li><a href="#about">个人简介</a></li>
<li><a href="#blog">博海拾珠</a></li>
<li><a href="#sata">访客数据</a></li>
<li><a href="#comment">留言板</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div class="welcome">
<h1>你好，</h1>
<h1>欢迎来到</h1>
<h1>我的个人网站</h1>
</div>
</header>
<!-- main section -->
<main>
<section class="about" id="about">
<div class="container">
<div class="row">
<div class="col-md-6 self-photo">
<img src="img/team-2.png" alt="profile picture">
</div>
<div class="col-md-6">
<div class="section-title">
<div></div>
<h2>个人简介</h2>
</div>
<p>时间不在于你拥有多少，而在于怎样使用</p>
<ul>
<li><strong>Name :</strong> Tan Mingyao</li>
<li><strong>Age :</strong> 20</li>
<li><strong>Address :</strong> OUC</li>
<li><strong>Email :</strong> [email protected]</li>
<li><strong>Phone :</strong>###</li>
<li><strong>QQ :</strong> ###</li>
<li><strong>Job :</strong> Student</li>
<li><strong>Freelancer :</strong> available</li>
</ul>
</div>
</div>
</div>
</section>
<section class="blog" id="blog">
<div class="container">
<div class="row">
<div class="col-md-12 blog-header">
<div class="section-title">
<div></div>
<h2>博海拾珠</h2>
</div>
</div>
</div>
<div class="card-columns">
<div class="card">
<img src="img/blog-2.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Apache HTTP Server 与 Tomcat 的三种连接方式介绍</h5>
<p class="card-text">首先我们先介绍一下为什么要让 Apache 与 Tomcat 之间进行连接。事实上 Tomcat 本身已经提供了 HTTP 服务，该服务默认的端口是
8080，装好 tomcat 后通过 8080 端口可以直接使用 Tomcat 所运行的应用程序，你也可以将该端口改为 80。
既然 Tomcat 本身已经可以提供这样的服务，我们为什么还要引入 Apache 或者其他的一些专门的 HTTP 服务器呢？原因有下面几个：<br>
1. 提升对静态文件的处理性能<br>
2. 利用 Web 服务器来做负载均衡及容错<br>
3. 无缝的升级应用程序</p>
<a href="https://www.ibm.com/developerworks/cn/opensource/os-lo-apache-tomcat/index.html"
class="boxed-btn" target="_blank">read more</a>
</div>
</div>
<div class="card text-white p-3"
onclick="window.open('https://www.cnblogs.com/zhangpengnike/p/5545715.html')">
<blockquote class="blockquote mb-0 card-body">
<p>常用的SQL语句</p>
<footer class="blockquote-footer">
<small class="text-muted">
zhangzhenpeng <cite title="Source Title">博客园</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<img src="img/blog-1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">基于ShopNC的网上开店模拟实训系统</h5>
<p class="card-text">基于ShopNC的网上开店模拟实训系统，1：1完全仿制淘宝网</p>
<a href="https://www.5xiaobo.com/?id=775" target="_blank" class="boxed-btn">Read More</a>
</div>
</div>
<div class="card bg-primary text-white text-center p-3"
onclick="window.open('https://blog.csdn.net/wqmain/article/details/8941759')">
<blockquote class="blockquote mb-0">
<p>Windows 下 Apache HTTP Server 安装、配置以及与 Tomcat 的整合</p>
<footer class="blockquote-footer text-white">
<small>
千骑卷平冈 <cite title="Source Title">CSDN</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card" onclick="window.open('https://getbootstrap.com/')">
<img src="img/bootstrap.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Bootstrap——世界上最流行的HTML，CSS和JS库</h5>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">使用IntelliJ IDEA开发SpringMVC网站</h5>
<p class="card-text">由于近期一直在做学术方面的工作，项目开发相关工作并没有花太多的时间，
导致这篇文章的更新停步了很长一段时间。现在应大家的要求，补上剩余部分，望能给大家带来一些帮助。
由于时间的原因，在开发环境上面有了一定的更新，但是并不造成太大的影响</p>
<p class="card-text"><small class="text-muted">转载请注明出处：Gaussic</small></p>
<a href="https://my.oschina.net/gaussik/blog/385697"
class="boxed-btn" target="_blank">read more</a>
</div>
</div>
<div class="card" onclick="window.open('https://mvnrepository.com/')">
<img src="img/mvn.jpg" class="card-img-top" alt="mvn">
<div class="card-body">
<h5 class="card-title">Maven存储库：Maven有什么新东西</h5>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">深入理解Spring MVC 思想</h5>
<p class="card-text">一、前言<br>
二、spring mvc 核心类与接口<br>
三、spring mvc 核心流程图<br>
四、spring mvc DispatcherServlet说明<br>
五、spring mvc 父子上下文的说明<br>
六、springMVC-mvc.xml 配置文件片段讲解<br>
七、spring mvc 如何访问到静态的文件，如jpg,js,css<br>
八、spring mvc 请求如何映射到具体的Action中的方法<br>
九、 spring mvc 中的拦截器：<br>
十、 spring mvc 如何使用拦截器<br>
十一、 spring mvc 如何实现全局的异常处理<br>
十二、 spring mvc 如何把全局异常记录到日志中<br>
十三、 如何给spring3 MVC中的Action做JUnit单元测试<br>
十四、 spring mvc 转发与重定向 （带参数重定向）<br>
十五、 spring mvc 处理ajax请求<br>
十六、 spring mvc 关于写几个配置文件的说明<br>
十七、 spring mvc 如何取得Spring管理的bean<br>
十八、 spring mvc 多视图控制器<br>
十九、 mvc:annotation-driven到底做了什么工作<br>
二十、 本文中springMVC.xml配置文件是核心</p>
<p class="card-text"><small class="text-muted">说明：本作者是文章的原创作者，转载请注明出处：本文地址：http://elf8848.iteye.com/blog/875830</small></p>
<a href="https://www.cnblogs.com/baiduligang/p/4247164.html"
class="boxed-btn" target="_blank">read more</a>
</div>
</div>
<div class="card">
<img src="img/blog-4.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">在GitHub Page上部署网页</h5>
<p class="card-text">本篇记录了如何通过GitHub Page发布个人网页，所以适合以下设计师阅读：<br>
1. 有一定前端知识；<br>
2. 想在网页上显示点什么又不想麻烦去折腾域名和服务器；<br>
相关文章有很多，官网也写得很详细，我写得有点啰嗦了，
因为是第一篇关于GitHub的文章所以尽量介绍详细点，避免日后查。之后还会写一篇用GitHub搭建静态博客，也就是CMS(内容管理系统)的文章。</p>
<a href="https://www.jianshu.com/p/5f3effb3eaad"
class="boxed-btn" target="_blank">read more</a>
</div>
</div>
<div class="card text-black-50 bg-secondary p-3"
onclick="window.open('https://www.cnblogs.com/jackyroc/p/7681938.html')">
<blockquote class="blockquote mb-0 card-body">
<p>我是如何利用Github Pages搭建起我的博客，细数一路的坑</p>
<footer class="blockquote-footer">
<small class="text-muted">
JackyRoc <cite title="Source Title" class="text-white">cnblogs</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">如何优雅的选择字体(font-family)</h5>
<p class="card-text">大家都知道，在不同操作系统、不同游览器里面默认显示的字体是不一样的，
并且相同字体在不同操作系统里面渲染的效果也不尽相同，那么如何设置字体显示效果会比较好呢？
下面我们逐步的分析一下</p>
<p class="card-text"><small class="text-muted">转载请注明出处：Michaud</small></p>
<a href="https://www.jianshu.com/p/dac73dea0fec"
class="boxed-btn" target="_blank">read more</a>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">看腻了系统原生图标？来试试这 7 款 Android 图标包</h5>
<p class="card-text">Android 系统的开放性和自由性不仅对开发者十分友好，对于想要更加彻底打造专属「爱机」的用户们也是非常地方便。
在 Android 手机上，我们除了能够做到更换壁纸这种基本操作，还可以把各种并不喜欢的应用图标替换为自己喜欢的风格，
随意「捏」出自己喜欢的布局和界面。
诚然，高标准，定制化的图标与强制的统一布局看起来是很公正洁净。但布局先不说，这堆应用图标里面一定会有某几个是你不怎么喜欢的，
甚至很难去忍受它们（强迫症更甚）。这个时候就应该试试各种 Android 上的图标包，换掉所有难看的图标，桌面重新变得舒服又顺眼。
作为轻度强迫症，在尝试了好几十个图标包之后，我从中挑选出我认为最好的几个混合设置了所有应用的图标，
这篇文章就给大家推荐几个不错的图标包，顺便分享一下我的挑选标准和经验。</p>
<p class="card-text"><small class="text-muted">转载请注明出处：少数派</small></p>
<a href="https://www.jianshu.com/p/dac73dea0fec"
class="boxed-btn" target="_blank">read more</a>
</div>
</div>
</div>
</div>
</section>
<!-- sata section -->
<section class="sata" id="sata">
<div class="container">
<div class="row">
<div class="col-md-12 sata-header">
<div class="section-title">
<div></div>
<h2>访客数据</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center text-uppercase">
<ul>
<li>
<div class="sata-item">
<div class="icon">
<img src="img/project.png" alt="project done image">
</div>
<span class="number">
2345
</span>
<h4>访客</h4>
</div>
</li>
<li>
<div class="sata-item">
<div class="icon">
<img src="img/like.png" alt="project done image">
</div>
<span class="number">
2555
</span>
<h4>点赞</h4>
</div>
</li>
<li>
<div class="sata-item">
<div class="icon">
<img src="img/contact-icon-2.png" alt="project done image">
</div>
<span class="number">
2357
</span>
<h4>留言</h4>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- comment section -->
<section class="comment" id="comment">
<div class="container">
<div class="row">
<div class="col-md-12 comment-header">
<div class="section-title">
<div></div>
<h2>留言板</h2>
</div>
</div>
</div>
<div class="row comment-text">
<div class="col-lg-12">
<div class="comment-item">
<div class="comment-item-inner">
<img src="img/person-1.jpg" alt="Image" class="rounded-circle comment-img">
<div class="comment-connector">
<p class="mb-0"> </p>
</div>
<div class="comment-info">
<div class="comment-description">
<h4>梦回故里</h4>
<p>太牛了，清新的设计，让人爱不释手</p>
</div>
</div>
</div>
<div class="comment-connector-vertical"></div>
</div>
<div class="comment-item">
<div class="comment-item-inner">
<img src="img/person-1.jpg" alt="Image" class="rounded-circle comment-img">
<div class="comment-connector">
<p class="mb-0"> </p>
</div>
<div class="comment-info">
<div class="comment-description">
<h4>vera</h4>
<p>在你的网站上，我看到了最美的风景</p>
</div>
</div>
</div>
<div class="comment-connector-vertical"></div>
</div>
<div class="comment-item">
<div class="comment-item-inner">
<img src="img/person-1.jpg" alt="Image" class="rounded-circle comment-img">
<div class="comment-connector">
<p class="mb-0"> </p>
</div>
<div class="comment-info">
<div class="comment-description">
<h4>天臻</h4>
<p>简约，好看，看了你的知识图片，哇 真强大</p>
</div>
</div>
</div>
<div class="comment-connector-vertical"></div>
</div>
<div class="comment-item">
<div class="comment-item-inner">
<img src="img/person-1.jpg" alt="Image" class="rounded-circle comment-img">
<div class="comment-connector">
<p class="mb-0"> </p>
</div>
<div class="comment-info">
<div class="comment-description">
<h4>小侯子</h4>
<p>哇~网站非常好看~舒适清新~</p>
</div>
</div>
</div>
<div class="comment-connector-vertical"></div>
</div>
<div class="comment-item">
<div class="comment-item-inner">
<img src="img/person-1.jpg" alt="Image" class="rounded-circle comment-img">
<div class="comment-connector">
<p class="mb-0"> </p>
</div>
<div class="comment-info">
<div class="comment-description">
<h4>失丶忆</h4>
<p>简约，好看，看了你的知识图片，哇 真强大</p>
</div>
</div>
</div>
<div class="comment-connector-vertical"></div>
</div>
<div class="comment-item comment-input">
<div class="comment-item-inner">
<div class="comment-info">
<div class="comment-description pb-0">
<div class="input-group">
<input type="text" class="form-control" placeholder="昵称" aria-label="Title">
</div>
<div class="input-group">
<textarea class="form-control" placeholder="留下你的足迹吧......"
aria-label="With textarea"></textarea>
</div>
<a href="#" class="boxed-btn">提交</a>
</div>
</div>
<div class="comment-connector">
<p class="mb-0"> </p>
</div>
<img src="img/person-1.jpg" alt="Image" class="rounded-circle comment-img">
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- footer section-->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<ul class="social">
<li><a href="#"><i class="fa fa-weixin"></i></a></li>
<li><a href="#"><i class="fa fa-qq"></i></a></li>
<li><a href="#"><i class="fa fa-weibo"></i></a></li>
<li><a href="#"><i class="fa fa-edge"></i></a></li>
<li><a href="#"><i class="fa fa-chrome"></i></a></li>
</ul>
<div class="copyright-text">
<p>Copyright © 2020 <span>### </span>|<span> ###</span></p>
</div>
</div>
</div>
</div>
</footer>
<!--preloader section-->
<div class="loader-section">
<div class="loader">
<div class="loader-outer"></div>
<div class="loader-inner"></div>
</div>
</div>
<!-- video as bg -->
<video autoplay="autoplay" loop="loop" id="bg-mp4">
<source src="img/bg.mp4" type="video/mp4">
</video>
<span class="bg-video"><i class="fa fa-pause"></i></span>
<!-- bgm -->
<audio loop="loop" preload="auto" id="bg-music">
<source src="music/Pearlescent.mp3">
</audio>
<span class="bgm"><i class="fa fa-music"></i></span>
<!--go to top -->
<span class="go-top"><i class="fa fa-angle-double-up"></i></span>
<!--go to bottom -->
<span class="go-bottom"><i class="fa fa-angle-double-down"></i></span>
<script src="js/jquery-3.4.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/main.js"></script>
</body>
</html>