-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
432 lines (428 loc) · 23.8 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>博客初始界面</title>
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_1194436_6vw5tjr6dgk.css">
<script src="./js/index.js"> </script>
<script src="./js/animate.js"></script>
<script src="./js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="header">
<div class="headerBox">
<h1>XXX个人博客</h1>
<ul class="nav">
<li><a href="index.html">网站首页</a></li>
<li><a href="priblog.html">个人博客日记</a> </li>
<li class="drop"><a href="#">网站制作</a>
<ul class="droplist">
<li><a href="">HTML|CSS</a></li>
<li><a href="">网站制作</a></li>
<li><a href="">推荐工具</a></li>
</ul>
</li>
<li><a href="detail.html">详细界面</a></li>
<li><a href="aboutme.html">关于我</a></li>
<li><a href="timeline.html">时间轴</a></li>
</ul>
<div class="rearch">
<a href=""class="iconfont icon-sousuo"></a>
</div>
</div>
</div>
<script>
//jquery实现下拉框
$(function () {
let dropBtn=$('li:has(.droplist)');
let drop=$('.droplist');
dropBtn.on('mouseenter',function () {
let index=$(this).index('li:has(.droplist)');
$(drop[index]).slideDown();
})
dropBtn.on('mouseleave',function () {
let index=$(this).index('li:has(.droplist)');
$(drop[index]).slideUp();
})
dropBtn.hover(function () {
let index=$(this).index('li:has(.droplist)');
})
})
</script>
<div class="connnect1">
<div class="connect1-left">
<div class="image">
<a href="" class="item"><img src="./image/1.jpg" alt="blank"></a>
<a href="" class="item"><img src="./image/2.jpg" alt="blank"></a>
<a href="" class="item"><img src="./image/3.jpg" alt="blank"></a>
<a href="" class="item"><img src="./image/4.jpg" alt="blank"></a>
</div>
<div class="fadercontrols">
<div class="leftbtn">
<img src="./image/left.png" alt="">
</div>
<div class="rightbtn">
<img src="./image/right.png" alt="">
</div>
</div>
<ul class="btnList">
<li class="page" data-target="0"><div class="btn"></div></li>
<li class="page" data-target="1"><div class="btn"></div></li>
<li class="page" data-target="2"><div class="btn"></div></li>
<li class="page" data-target="3"><div class="btn"></div></li>
</ul>
<!-- <script>-->
<!-- $(document).ready(function(){-->
<!-- $(".btn").click( function(){-->
<!-- $(this).addClass("active");-->
<!-- $(this).parent('li').siblings().children().removeClass("active")-->
<!-- });-->
<!-- });-->
<!-- //轮播-->
<!-- </script>-->
</div>
<div class="connect1-middle">
<div class="middle1">
<a href=""><img src="./image/h2.jpg" alt=""><span class="que">为什么说10月24日是程序员的节日？</span></a>
</div>
<div class="middle1">
<a href=""><img src="./image/h1.jpg" alt=""><span class="que">个人网站做好了，百度不收录怎么办？来，看看他们怎么做的。</span></a>
</div>
</div>
<div class="connect1-right">
<h3 style="color: #89919a">我的名片</h3>
<ul class="text">
<li>网名：DanceSmile|即步非烟</li>
<li>职业：Web前端设计师、网页设计</li>
<li>仙居：人间梦境</li>
<li>Email:[email protected]</li>
</ul>
<div class="labelImg">
<ul>
<li>tubiao</li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<div class="connnect2">
<div class="connect2-left">
<div class="diaryList">
<ul>
<li class="active"><a>个人博客日记</a></li>
<li><a>css3|html5</a></li>
<li><a>网站建设</a></li>
<li><a>推荐工具</a></li>
<li><a>设计心得</a></li>
</ul>
</div>
<div class="diaryTab">
<ul class="tabImage">
<li>
<a href=""><img src="./image/h2.jpg" alt=""><span class="que">为什么说10月24日是程序员的节日？</span></a>
</li>
<li>
<a href=""><img src="./image/b02.jpg" alt=""><span class="que">个人网站做好了，百度不收录怎么办？来，看看他们怎么做的。</span></a>
</li>
</ul>
<ul class="tabList">
<li class="hot">
<h1><i>1</i> <a href="">安静地做一个爱设计的女子</a></h1>
<p>自从入了这行，很多人跟我说可以做网络教程，我也有考虑，但最终没有实现，因为我觉得在这个教程泛滥的时代，直接做一套免费的原创个人博客模板更为实在。每当看到自己喜欢的配色图片</p>
</li>
<li>
<h1><i>2</i> <a href="">安静地做一个爱设计的女子</a></h1>
<p>自从入了这行，很多人跟我说可以做网络教程，我也有考虑，但最终没有实现，因为我觉得在这个教程泛滥的时代，直接做一套免费的原创个人博客模板更为实在。每当看到自己喜欢的配色图片</p>
</li>
<li>
<h1><i>3</i> <a href="">安静地做一个爱设计的女子</a></h1>
<p>自从入了这行，很多人跟我说可以做网络教程，我也有考虑，但最终没有实现，因为我觉得在这个教程泛滥的时代，直接做一套免费的原创个人博客模板更为实在。每当看到自己喜欢的配色图片</p>
</li>
<li>
<h1><i>4</i> <a href="">安静地做一个爱设计的女子</a></h1>
<p>自从入了这行，很多人跟我说可以做网络教程，我也有考虑，但最终没有实现，因为我觉得在这个教程泛滥的时代，直接做一套免费的原创个人博客模板更为实在。每当看到自己喜欢的配色图片</p>
</li>
<li>
<h1><i>5</i> <a href="">安静地做一个爱设计的女子</a></h1>
<p>自从入了这行，很多人跟我说可以做网络教程，我也有考虑，但最终没有实现，因为我觉得在这个教程泛滥的时代，直接做一套免费的原创个人博客模板更为实在。每当看到自己喜欢的配色图片</p>
</li>
</ul>
</div>
</div>
<div class="connect2-right">
<div class="title">
最近更新<div class="wid"></div>
</div>
<ul class="updateList">
<li><a href="">201905实训期</a></li>
<li><a href="">前端开发</a></li>
<li><a href="">前端开发</a></li>
<li><a href="">前端开发</a></li>
</ul>
</div>
</div>
<div class="main">
<div class="connect3">
<div class="conne">
<div class="title">
<div class="title-left">特别推荐<div class="wid"></div></div>
<ul class="title-right">
<li><a href="">帝国cms</a></li><li>/</li>
<li><a href="">个人博客</a></li><li>/</li>
<li><a href="">网站设计</a></li><li>/</li>
<li><a href="">设计</a></li><li>/</li>
</ul>
</div>
<div class="list">
<div class="cover-right"></div>
<div class="cover-bottom"></div>
<div class="box">
<a class="image"><img src="./image/1.png" alt=""></a>
<h4>【个人博客空间申请】金牛云服，免费领空间啦</h4>
<p>还在愁域名购买了，如何选择主机或者服务器吗？其实选择主机或者服务器有几个重要的选项，比如，线路，CPU，内存，带宽，网页空间，数据库，月流量等等。那什么是主机，什么是服务器，他们的区别</p>
<a href="" target="_blank" class="readmore">文章阅读</a>
</div>
<div class="box">
<a class="image"><img src="./image/b02.jpg" alt=""></a>
<h4>【个人博客空间申请】金牛云服，免费领空间啦</h4>
<p>还在愁域名购买了，如何选择主机或者服务器吗？其实选择主机或者服务器有几个重要的选项，比如，线路，CPU，内存，带宽，网页空间，数据库，月流量等等。那什么是主机，什么是服务器，他们的区别</p>
<a href="/notice/30.html" target="_blank" class="readmore">文章阅读</a>
</div>
<div class="box">
<a class="image"><img src="./image/2.png" alt=""></a>
<h4>【个人博客空间申请】金牛云服，免费领空间啦</h4>
<p>还在愁域名购买了，如何选择主机或者服务器吗？其实选择主机或者服务器有几个重要的选项，比如，线路，CPU，内存，带宽，网页空间，数据库，月流量等等。那什么是主机，什么是服务器，他们的区别</p>
<a href="/notice/30.html" target="_blank" class="readmore">文章阅读</a>
</div>
<div class="box">
<a class="image"><img src="./image/a2.jpg" alt=""></a>
<h4>【个人博客空间申请】金牛云服，免费领空间啦</h4>
<p>还在愁域名购买了，如何选择主机或者服务器吗？ 其实选择主机或者服务器有几个重要的选项，比如，线路</p>
<a href="/notice/30.html" target="_blank" class="readmore">文章阅读</a>
</div>
<div class="box">
<a class="image"><img src="./image/1.png" alt=""></a>
<h4>gsjag</h4>
<p>还在愁域名购买了，如何选择主机或者服务器吗？ 其实选择主机或者服务器有几个重要的选项，比如，线路</p>
<a href="/notice/30.html" target="_blank" class="readmore">文章阅读</a>
</div>
<div class="box">
<a class="image"><img src="./image/1.png" alt=""></a>
<h4>gsjag</h4>
<p>还在愁域名购买了，如何选择主机或者服务器吗？ 其实选择主机或者服务器有几个重要的选项，比如，线路</p>
<a href="/notice/30.html" target="_blank" class="readmore">文章阅读</a>
</div>
</div>
</div>
<!-- <div class="mostnew">-->
<!-- <div class="title">最新博文</div>-->
<!-- <ul class="article">-->
<!-- <li>-->
<!-- <div class="menu">-->
<!-- <a href="" target="_blank" class="label">设计心得</a>-->
<!-- <a href=""><h1>[顶]</h1><h3>作为一个设计师，遇到质疑时，你是否能恪守原则?</h3></a>-->
<!-- </div>-->
<!-- <div class="photo"><img src="./image/a1.jpg" alt=""></div></a>-->
<!-- <div class="kuang">-->
<!-- <p>就拿我自己来说吧，有时候会很矛盾，设计好的作品，不把它分享出来，会觉得待在自己电脑里面实在是没有意义。干脆就发布出去吧。我也害怕收到大家不好的评论，有些评论，可能说者无意，但是对于每一个用心的站长来说，都会受很深 </p>-->
<!-- <div class="boo"></div><a href="" class="actorimg"><img src="./image/avatar.jpg" border="0" alt="" class="actor"></a>-->
<!-- <div class="date"><span>2018-11-08</span><span>【<a href="">设计心得</a>】</span></div>-->
<!-- </div></div>-->
<!-- </li>-->
<!-- <li></li>-->
<!-- <li></li>-->
<!-- </ul>-->
<!-- </div>-->
<div class="mostnew">
<div class="title">最新博文<div class="wid"></div></div>
<ul class="article">
<li>
<a href=""><h1>[顶]</h1><h3>作为一个设计师，遇到质疑时，你是否能恪守原则?</h3></a>-->
<div class="menu">
<a class="photo" href=""><img alt="" class="lazyclass" aa="./image/a1.jpg"></a>
<i><a href="">个人博客日记</a></i>
<div class="textBlock">
<p>就拿我自己来说吧，有时候会很矛盾，设计好的作品，不把它分享出来，会觉得待在自己电脑里面实在是没有意义。干脆就发布出去吧。我也害怕收到大家不好的评论，有些评论，可能说者无意，但是对于每一个用心的站长来说，都会受很深 </p>
<div class="date">
<img src="./image/avatar.jpg" alt="" class="actor"></a>
<div class="label"><span>2018-11-08</span><span>【<a href="">设计心得</a>】</span>
<div class="rmoreBtn"><a href="">阅读更多</a></div>
</div>
</div>
</div>
</div>
</li>
<li>
<a href=""><h1>[顶]</h1><h3>Come on，让我们一起行动起来把，与时间来一场赛跑</h3></a>-->
<div class="menu">
<a class="photo" href=""><img aa="./image/a1.jpg" alt="" class="lazyclass"></a>
<i><a href="">个人博客日记</a></i>
<div class="textBlock">
<p>就拿我自己来说吧，有时候会很矛盾，设计好的作品，不把它分享出来，会觉得待在自己电脑里面实在是没有意义。干脆就发布出去吧。我也害怕收到大家不好的评论，有些评论，可能说者无意，但是对于每一个用心的站长来说，都会受很深 </p>
<div class="date">
<img src="./image/avatar.jpg" alt="" class="actor"></a>
<div class="label"><span>2018-11-08</span><span>【<a href="">设计心得</a>】</span>
<div class="rmoreBtn"><a href="">阅读更多</a></div>
</div>
</div>
</div>
</div>
</li>
<li>
<a href=""><h3>【个人博客空间申请】金牛云服，免费领空间啦</h3></a>-->
<div class="menu">
<a class="photo" href=""><img aa="./image/b02.jpg" alt="" class="lazyclass"></a>
<i><a href="">个人博客日记</a></i>
<div class="textBlock">
<p>就拿我自己来说吧，有时候会很矛盾，设计好的作品，不把它分享出来，会觉得待在自己电脑里面实在是没有意义。干脆就发布出去吧。我也害怕收到大家不好的评论，有些评论，可能说者无意，但是对于每一个用心的站长来说，都会受很深 </p>
<div class="date">
<img src="./image/avatar.jpg" alt="" class="actor"></a>
<div class="label"><span>2018-11-08</span><span>【<a href="">设计心得</a>】</span>
<div class="rmoreBtn"><a href="">阅读更多</a></div>
</div>
</div>
</div>
</div>
</li>
<li>
<a href=""><h3>作为一个设计师，遇到质疑时，你是否能恪守原则?</h3></a>-->
<div class="menu">
<a class="photo" href=""><img aa="./image/a1.jpg" alt="" class="lazyclass"></a>
<i><a href="">个人博客日记</a></i>
<div class="textBlock">
<p>就拿我自己来说吧，有时候会很矛盾，设计好的作品，不把它分享出来，会觉得待在自己电脑里面实在是没有意义。干脆就发布出去吧。我也害怕收到大家不好的评论，有些评论，可能说者无意，但是对于每一个用心的站长来说，都会受很深 </p>
<div class="date">
<img src="./image/avatar.jpg" alt="" class="actor"></a>
<div class="label"><span>2018-11-08</span><span>【<a href="">设计心得</a>】</span>
<div class="rmoreBtn"><a href="">阅读更多</a></div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- connect3的结束-->
</div>
<div class="connect4">
<div class="clicksort">
<div class="title">点击排行<div class="wid"></div></div>
<div class="top">
<div class="element">
<a href=""><img src="./image/b02.jpg" alt=""><span class="que">安静的做一个爱设计的女子</span></a>
</div>
</div>
<div class="clicksort-bootom">
<ul>
<li>
<div class="num">
<i></i>
</div>
<a href="" title="十条设计原则教你学会如何设计网页布局!">十条设计原则教你学会如何设计网页布局!</a></li>
<li>
<div class="num"><i></i></div>
<a href="" title="作为一个设计师,如果遭到质疑你是否能恪守自己的原则?">作为一个设计师,如果遭到质疑你是否能恪守自己的原则?</a></li>
<li>
<div class="num"><i></i></div>
<a href="" title="Come on,行动起来吧!我们和时间来一场赛跑!">Come on,行动起来吧!我们和时间来一场赛跑!</a></li>
<li>
<div class="num"><i></i></div>
<a href="" title="为什么说10月24日是程序员的节日？">为什么说10月24日是程序员的节日？</a></li>
<li>
<div class="num"><i></i></div>
<a href="" title="个人网站做好了，百度不收录怎么办？来，看看他们怎么做的。" target="_blank">个人网站做好了，百度不收录怎么办？来，看看他们怎么做的。</a></li>
<li>
<div class="num"><i></i></div>
<a href="" title="【个人博客空间申请】金牛云服，免费领空间啦">【个人博客空间申请】金牛云服，免费领空间啦</a></li>
<li>
<div class="num"><i></i></div>
<a href="" title="如何快速建立自己的个人博客网站">如何快速建立自己的个人博客网站</a></li>
</ul>
</div>
</div>
<div class="recommend">
<div class="title">站长推荐<div class="wid"></div></div>
<div class="top">
<div class="element">
<a href=""><img src="./image/h2.jpg" alt=""><span class="que">为什么说10月24日是程序员的节日？</span></a>
</div>
</div>
<div class="recommend-bottom">
<ul>
<li>
<div class="recomImg">
<a href=""><img src="./image/a2.jpg" alt=""></a>
</div>
<div class="recomText">
<a href="">【个人博客空间申请】金牛云服，免费领空间啦</a>
</div>
</li>
<li>
<div class="recomImg">
<a href=""><img src="./image/a3.jpg" alt=""></a>
</div>
<div class="recomText">
<a href="">【个人博客空间申请】金牛云服，免费领空间啦</a>
</div>
</li>
<li>
<div class="recomImg">
<a href=""> <img src="./image/2.png" alt=""></a>
</div>
<div class="recomText">
<a href="">【个人博客空间申请】金牛云服，免费领空间啦</a>
</div>
</li>
<li>
<div class="recomImg">
<a href=""><img src="./image/1.png" alt=""></a>
</div>
<div class="recomText">
<a href="">【个人博客空间申请】金牛云服，免费领空间啦</a>
</div>
</li>
<li>
<div class="recomImg">
<a href=""><img src="./image/a2.jpg" alt=""></a>
</div>
<div class="recomText">
<a href="">【个人博客空间申请】金牛云服，免费领空间啦</a>
</div>
</li>
<li>
<div class="recomImg">
<a href=""><img src="./image/a1.jpg" alt=""></a>
</div>
<div class="recomText">
<a href="">【个人博客空间申请】金牛云服，免费领空间啦</a>
</div>
</li>
<li>
<div class="recomImg">
<a href=""><img src="./image/a2.jpg" alt=""></a>
</div>
<div class="recomText">
<a href="">【个人博客空间申请】金牛云服，免费领空间啦</a>
</div>
</li>
</ul>
</div>
</div>
<!--connect4的结束 -->
</div>
<div style="clear: both;"></div>
<!-- main的结束 -->
</div>
<footer>
<a href="#">
<div class="zhitop"></div>
</a>
<div class="box">
<div>@2019.05.19</div>
<div>nuc.Zhongbei Univercity</div>
</div>
</footer>
</body>
</html>