forked from qufei1993/Examples
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
279 lines (279 loc) · 13.2 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
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>曲振飞个人博客 | IT技术分享</title>
<link rel="stylesheet" type="text/css" href="css/public.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src="js/index.js"></script>
</head>
<body>
<!-- search -->
<div class="search" id="search-bg">
<input type="text" class="cli-btn" id="cli-btn" placeholder="搜索"/>
</div>
<div id="search-inp" class="search-inp">
<i class="fa fa-times-circle fa-2x" id="close-search"></i>
<div class="sea-center">
<form action="#" method="post">
<input type="text" name="sea-input" class="sea-input" placeholder="搜索"/>
<input type="submit" name="btn" class="submit"/>
</form>
<i class="fa fa-search fa-2x"></i>
</div>
</div>
<!-- site-top -->
<div class="sitetop">
<div class="container clearfix">
<div class="sitet-fl">
<a href="#">欢迎来到曲振飞的个人博客！</a>
</div>
<div class="sitet-fr">
<a href="#">高级搜索</a><a href="#"><i class="fa fa-map"></i>网站地图</a><a href="#">Tag标签</a><a href="#">Rss订阅</a><a href="#"><span>[ </span>设为首页<span> ]</span></a><a href="#"><span>[ </span>加入收藏<span> ]</span></a>
</div>
</div>
</div>
<!-- header -->
<div class="header-bg">
<header class="container">
<div class="logo">
<img src="images/logo01.png" alt="曲振飞的个人博客"/>
</div>
<div class="info">
<h1 class="head-tit">曲振飞的个人博客</h1>
<p class="head-info">专注于Web全栈开发、APP设计、网站建设</p>
</div>
<ul class="nav-ul">
<li><a href="index.html">网站首页</a></li>
<li><a href="list.html">Html5/CSS3</a></li>
<li><a href="list.html">后台开发</a></li>
<li><a href="list.html">移动开发</a></li>
<li><a href="list.html">资源分享</a></li>
<li><a href="list.html">心得笔记</a></li>
<li><a href="list.html">在线交流</a></li>
</ul>
</header>
</div>
<!-- -->
<section class="container clearfix">
<!-- left start -->
<section class="blog-left">
<!-- banner -->
<div id="banner" class="banner">
<div id="banner01" hidden></div>
<div id="banner02" hidden></div>
<div id="banner03" hidden></div>
<ul class="nav-wrap">
<li><a href="#"><img src="images/banner01.jpg"></a></li>
<li><a href="#"><img src="images/banner02.jpg"></a></li>
<li><a href="#"><img src="images/banner03.jpg"></a></li>
</ul>
<div class="lables">
<div class="lab">
<a href="#banner01">1</a>
<a href="#banner02">2</a>
<a href="#banner03">3</a>
</div>
</div>
</div>
<div style="clear:both;"></div>
<div class="topnews">
<h2 class="news-tit">
文章推荐
</h2>
<div class="items">
<div class="item-fl"><img src="images/02.jpg" /></div>
<div class="item-fr"><h3 class="tit"><a href="article.html">住在手机里的朋友</a></h3>
<p class="info">通信时代，无论是初次相见还是老友重逢，交换联系方式，常常是彼此交换名片，然后郑重或是出于礼貌用手机记下对方的电话号码。在快节奏的生活里，我们不知不觉中就成为住在别人手机里的朋友。又因某些意外，变成了别人手机里匆忙的过客，这种快餐式的友谊 ...</p>
<p class="autor">
<a href="#" class="bk"><i class="fa fa-tags"></i>个人博客</a>
<a href="#" class="date"><i class="fa fa-tags"></i>2014-02-19</a>
<a href="#" class="pl"><i class="fa fa-commenting-o"></i>评论(30)</a>
<a href="#" class="ll"><i class="fa fa-tags"></i>浏览(459)</a>
</p>
</div>
</div>
<div class="items">
<div class="item-fl"><img src="images/02.jpg" /></div>
<div class="item-fr"><h3 class="tit"><a href="#">住在手机里的朋友</a></h3>
<p class="info">通信时代，无论是初次相见还是老友重逢，交换联系方式，常常是彼此交换名片，然后郑重或是出于礼貌用手机记下对方的电话号码。在快节奏的生活里，我们不知不觉中就成为住在别人手机里的朋友。又因某些意外，变成了别人手机里匆忙的过客，这种快餐式的友谊 ...</p>
<p class="autor">
<a href="#" class="bk"><i class="fa fa-tags"></i>个人博客</a>
<a href="#" class="date"><i class="fa fa-tags"></i>2014-02-19</a>
<a href="#" class="pl"><i class="fa fa-commenting-o"></i>评论(30)</a>
<a href="#" class="ll"><i class="fa fa-tags"></i>浏览(459)</a>
</p>
</div>
</div>
<div class="items">
<div class="item-fl"><img src="images/02.jpg" /></div>
<div class="item-fr"><h3 class="tit"><a href="#">住在手机里的朋友</a></h3>
<p class="info">通信时代，无论是初次相见还是老友重逢，交换联系方式，常常是彼此交换名片，然后郑重或是出于礼貌用手机记下对方的电话号码。在快节奏的生活里，我们不知不觉中就成为住在别人手机里的朋友。又因某些意外，变成了别人手机里匆忙的过客，这种快餐式的友谊 ...</p>
<p class="autor">
<a href="#" class="bk"><i class="fa fa-tags"></i>个人博客</a>
<a href="#" class="date"><i class="fa fa-tags"></i>2014-02-19</a>
<a href="#" class="pl"><i class="fa fa-commenting-o"></i>评论(30)</a>
<a href="#" class="ll"><i class="fa fa-tags"></i>浏览(459)</a>
</p>
</div>
</div>
<div class="items">
<div class="item-fl"><img src="images/02.jpg" /></div>
<div class="item-fr"><h3 class="tit"><a href="#">住在手机里的朋友</a></h3>
<p class="info">通信时代，无论是初次相见还是老友重逢，交换联系方式，常常是彼此交换名片，然后郑重或是出于礼貌用手机记下对方的电话号码。在快节奏的生活里，我们不知不觉中就成为住在别人手机里的朋友。又因某些意外，变成了别人手机里匆忙的过客，这种快餐式的友谊 ...</p>
<p class="autor">
<a href="#" class="bk"><i class="fa fa-tags"></i>个人博客</a>
<a href="#" class="date"><i class="fa fa-tags"></i>2014-02-19</a>
<a href="#" class="pl"><i class="fa fa-commenting-o"></i>评论(30)</a>
<a href="#" class="ll"><i class="fa fa-tags"></i>浏览(459)</a>
</p>
</div>
</div>
<div class="items">
<div class="item-fl"><img src="images/02.jpg" /></div>
<div class="item-fr"><h3 class="tit"><a href="#">住在手机里的朋友</a></h3>
<p class="info">通信时代，无论是初次相见还是老友重逢，交换联系方式，常常是彼此交换名片，然后郑重或是出于礼貌用手机记下对方的电话号码。在快节奏的生活里，我们不知不觉中就成为住在别人手机里的朋友。又因某些意外，变成了别人手机里匆忙的过客，这种快餐式的友谊 ...</p>
<p class="autor">
<a href="#" class="bk"><i class="fa fa-tags"></i>个人博客</a>
<a href="#" class="date"><i class="fa fa-tags"></i>2014-02-19</a>
<a href="#" class="pl"><i class="fa fa-commenting-o"></i>评论(30)</a>
<a href="#" class="ll"><i class="fa fa-tags"></i>浏览(459)</a>
</p>
</div>
</div>
</div>
</section>
<!-- right start -->
<section class="blog-right">
<div class="about">
<h3><i class="fa fa-list-ul"></i>关于站长</h3>
<div class="about-us">
<img src="images/fei.png" class="about-us-img"/>
<div class="about-us-info">
<p>曲振飞,一个热忠、从事于互联网的90后青年.专注于网站建站、网站设计及优化.以用户体验、WEB标准为主旨,将网站的整体设计与网页设计的相关原理紧密结合.</p>
</div>
</div>
<ul class="about-ul">
<li><a href="#"><i class="fa fa-facebook-official fa-4x"></i>Facebook</a></li>
<li><a href="#"><i class="fa fa-pinterest fa-4x"></i>新浪微博</a></li>
<li><a href="#"><i class="fa fa-comments fa-4x"></i>微信</a></li>
<li><a href="#"><i class="fa fa-github fa-4x"></i>Github</a></li>
</ul>
</div>
<!-- moreselect -->
<div class="moreselect">
<h2 id="more-tit" class="more-tit more-t-a">
<a href="#" class="more-t-active" onmouseover="show(0)">点击排行</a>
<a href="#" onmouseover="show(1)">最新文章</a>
<a href="#" onmouseover="show(2)">站长推荐</a>
</h2>
<div id="more-content">
<ul class="more-con">
<li class="more-li"><i>1</i><a href="#">手机的16个惊人小秘密，据说99.999%的人都不知</a></li>
<li class="more-li"><i>2</i><a href="#">手机的16个惊人小秘密，据说99.999%的人都不知</a></li>
<li class="more-li"><i>3</i><a href="#">手机的16个惊人小秘密，据说99.999%的人都不知</a></li>
<li class="more-li"><i>4</i><a href="#">手机的16个惊人小秘密，据说99.999%的人都不知</a></li>
<li class="more-li"><i>5</i><a href="#">手机的16个惊人小秘密，据说99.999%的人都不知</a></li>
<li class="more-li"><i>6</i><a href="#">手机的16个惊人小秘密，据说99.999%的人都不知</a></li>
<li class="more-li"><i>7</i><a href="#">手机的16个惊人小秘密，据说99.999%的人都不知</a></li>
<li class="more-li"><i>8</i><a href="#">手机的16个惊人小秘密，据说99.999%的人都不知</a></li>
</ul>
<ul>
<li class="more-li"><i>1</i><a href="#">2手机的16个惊人小秘密，据说99.999%的人都不知</a></li>
<li class="more-li"><i>2</i><a href="#">手机的16个惊人小秘密，据说99.999%的人都不知</a></li>
<li class="more-li"><i>3</i><a href="#">手机的16个惊人小秘密，据说99.999%的人都不知</a></li>
</ul>
<ul>
<li class="more-li"><i>1</i><a href="#">3手机的16个惊人小秘密，据说99.999%的人都不知</a></li>
<li class="more-li"><i>2</i><a href="#">手机的16个惊人小秘密，据说99.999%的人都不知</a></li>
</ul>
</div>
</div>
<!-- moreselect cloud-->
<div class="moreselect cloud">
<h2 class="more-tit">
<a href="#"><i class="fa fa-list-ul"></i>标签云</a>
</h2>
<ul class="more-con">
<li><a href="#">个人博客</a></li>
<li><a href="#">Web开发</a></li>
<li><a href="#">php</a></li>
<li><a href="#">前端学习</a></li>
<li><a href="#">UI设计</a></li>
<li><a href="#">java开发</a></li>
<li><a href="#">个人博客</a></li>
<li><a href="#">Web开发</a></li>
<li><a href="#">php</a></li>
<li><a href="#">前端学习</a></li>
<li><a href="#">UI设计</a></li>
<li><a href="#">java开发</a></li>
<li><a href="#">个人博客</a></li>
<li><a href="#">Web开发</a></li>
<li><a href="#">php</a></li>
<li><a href="#">前端学习</a></li>
<li><a href="#">UI设计</a></li>
<li><a href="#">java开发</a></li>
</ul>
</div>
<!-- moreselect -->
<div class="moreselect tw">
<h2 class="more-tit">
<a href="#"><i class="fa fa-list-ul"></i>图文推荐</a>
</h2>
<ul class="more-con tw-ul">
<li>
<a href="#" class="tw-img"> <img src="images/demo02.jpg" alt="" />
</a>
<a href="#" class="tw-tit">教你怎样用欠费手机拨打电话</a>
<p class="tw-p"><a href="#"><i class="fa fa-indent"></i>手机配件</a><span><i class="fa fa-calendar"></i>2015-02-15</span></p>
</li>
<li>
<a href="#" class="tw-img"> <img src="images/demo02.jpg" alt="" />
</a>
<a href="#" class="tw-tit">教你怎样用欠费手机拨打电话</a>
<p class="tw-p"><a href="#"><i class="fa fa-indent"></i>手机配件</a><span><i class="fa fa-calendar"></i>2015-02-15</span></p>
</li>
<li>
<a href="#" class="tw-img"> <img src="images/demo03.jpg" alt="" />
</a>
<a href="#" class="tw-tit">教你怎样用欠费手机拨打电话</a>
<p class="tw-p"><a href="#"><i class="fa fa-indent"></i>手机配件</a><span><i class="fa fa-calendar"></i>2015-02-15</span></p>
</li>
<li>
<a href="#" class="tw-img"> <img src="images/demo02.jpg" alt="" />
</a>
<a href="#" class="tw-tit">教你怎样用欠费手机拨打电话</a>
<p class="tw-p"><a href="#"><i class="fa fa-indent"></i>手机配件</a><span><i class="fa fa-calendar"></i>2015-02-15</span></p>
</li>
<li>
<a href="#" class="tw-img"> <img src="images/demo03.jpg" alt="" />
</a>
<a href="#" class="tw-tit">教你怎样用欠费手机拨打电话</a>
<p class="tw-p"><a href="#"><i class="fa fa-indent"></i>手机配件</a><span><i class="fa fa-calendar"></i>2015-02-15</span></p>
</li>
</ul>
</div>
<div class="moreselect links">
<h2 class="more-tit">
<a href="#">友情链接</a>
</h2>
<ul class="more-con">
<li><a href="#">个人博客</a></li>
<li><a href="#">Web开发</a></li>
<li><a href="#">php</a></li>
<li><a href="#">个人博客</a></li>
<li><a href="#">Web开发</a></li>
<li><a href="#">洛阳网站建设</a></li>
<li><a href="#">前端学习</a></li>
<li><a href="#">河南网站优化</a></li>
</ul>
</div>
</section>
</section>
<!-- footer -->
<footer>
版权所有 曲振飞 2016 网站备案号：豫ICP备14022198号-2
</footer>
</body>
</html>