-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
302 lines (285 loc) · 14.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
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="./style/reset.css">
<link rel="stylesheet" type="text/css" href="./style/main_1.css">
<link href="./font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet" />
</head>
<body>
<div class="main-wrapper">
<header><!-- 页头开始 -->
<nav>
<div class="logo"><a href="index.html">UESTC</a> </div>
<ul>
<li><a href="index.html" class="active"><i class="fa fa-home" aria-hidden="true"></i>首页</a></li>
<li><a href="articleList.html">文章</a></li>
<li><a href="gallery.html">相册</a></li>
<li id="sidebar_trigger"><a href="#"><i class="fa fa-bars" aria-hidden="true"></i>菜单</a></li>
</ul>
</nav>
<div id="banner">
<div class="inner">
<a>这里会展示一些博客特点</a>
</div>
</div>
</header><!-- 页头结束 -->
<div class="content clearFix"><!-- 内容开始 -->
<div class="index_main">
<div class="index_left">
<div>
<article class="media">
<a class="object" data-hover="icon-zoon" href="src/articleImg/article01.jpg" data-rel="">
<img src="src/articleImg/article01.jpg" alt="Image title">
</a>
<div class="caption">
<h3><a href="article.html">文章题目</a></h3>
<ul class="meta">
<li>2016-04-20</li>
<li>评论:14</li>
<li>— <a href="#">作者</a></li>
</ul>
<div class="hr_small"></div>
<p>文章概述哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
<p><a class="mini button" href="article.html">More →</a></p>
</div>
</article>
<hr/>
<article class="media">
<a class="object" data-hover="icon-zoon" href="src/articleImg/article01.jpg" data-rel="">
<img src="src/articleImg/article02.jpg" alt="Image title">
</a>
<div class="caption">
<h3><a href="#">文章题目</a></h3>
<ul class="meta">
<li>2016-04-20</li>
<li>评论:14</li>
<li>— <a href="#">作者</a></li>
</ul>
<div class="hr_small"></div>
<p>文章概述哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
<p><a class="mini button" href="article.html">More →</a></p>
</div>
</article>
<hr/>
<article class="media">
<a class="object" data-hover="icon-zoon" href="src/articleImg/article01.jpg" data-rel="">
<img src="src/articleImg/article01.jpg" alt="Image title">
</a>
<div class="caption">
<h3><a href="#">文章题目</a></h3>
<ul class="meta">
<li>2016-04-20</li>
<li>评论:14</li>
<li>— <a href="#">作者</a></li>
</ul>
<div class="hr_small"></div>
<p>文章概述哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
<p><a class="mini button" href="article.html">More →</a></p>
</div>
</article>
<hr/>
<article class="media">
<a class="object" data-hover="icon-zoon" href="src/articleImg/article01.jpg" data-rel="">
<img src="src/articleImg/article01.jpg" alt="Image title">
</a>
<div class="caption">
<h3><a href="#">文章题目</a></h3>
<ul class="meta">
<li>2016-04-20</li>
<li>评论:14</li>
<li>— <a href="#">作者</a></li>
</ul>
<div class="hr_small"></div>
<p>文章概述哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
<p><a class="mini button" href="article.html">More →</a></p>
</div>
</article>
</div>
</div>
<!--
<div class="green-section">
<div class="wrapper">
<div>
<h2>欢迎来到我的主页</h2>
<div class="hr"> </div>
<p class="sub-heading">I love music,photography,reading and making friends.</p>
</div>
<div class="icon-group">
<span class="icon" id="music"><i class="fa fa-music fa-3x" aria-hidden="true"></i></span>
<span class="icon" id="photography"><i class="fa fa-camera fa-3x fa-rotate-315" aria-hidden="true"></i></span>
<span class="icon" id="reading"><i class="fa fa-book fa-3x fa-rotate-300" aria-hidden="true"></i></span>
</div>
</div>
</div>
<div class="gray-section" onclick="window.open('http://')">
<div class="gray-section-item">
<div class="img-section">
<img src="src/img/pic_main/007.jpg" alt="">
</div>
<div class="text-section">
<h2>银杏大道</h2>
<div class="sub-heading">一公里的银杏</div>
<p>银杏树是电子科大一道独特的风景线。到了深秋季节,银杏叶开始慢慢变黄,秋风一起,片片飞舞,十分美丽。</p>
</div>
</div>
<div class="gray-section-item" onclick="window.open('http://www.baike.com/wiki/%E6%88%90%E9%83%BD%E7%94%B5%E5%AD%90%E7%A7%91%E6%8A%80%E5%A4%A7%E5%AD%A6%E5%9B%BE%E4%B9%A6%E9%A6%86')">
<div class="text-section">
<h2>图书馆</h2>
<div class="sub-heading">八角书斋</div>
<p>Lorem ipsum dolor sdh sda dsajf ;dlgjld sldg lsgfd ldskdfjhg</p>
</div>
<div class="img-section">
<img src="src/img/pic_main/006.jpg" alt="">
</div>
</div>
<div class="gray-section-item" onclick="window.open('article.html')">
<div class="img-section">
<img src="src/img/pic_main/045.jpg" alt="">
</div>
<div class="text-section">
<h2>品学楼</h2>
<div class="sub-heading">求实求真 大气大为</div>
<p>Lorem ipsum dolor sdh sda dsajf ;dlgjld sldg lsgfd ldskdfjhg</p>
</div>
</div>
</div>
<div class="purple-section clearFix">
<div class="heading-wrapper">
<h2><a href="articleList.html">精彩文章</a></h2>
<div class="hr"></div>
<div class="sub-heading">
FOR
<br>
AN ECHO TO RECORD
</div>
</div>
<div class="card-group">
<div class="card">
<h3><a href="article.html">When You are Old</a></h3>
<p>When you are old and grey and full of sleep,
And nodding by the fire, take down this book,
And slowly read, and dream of the soft look
Your eyes had once, and of their shadows deep;
How many loved your moments of glad grace,
And loved your beauty with love false or true,
But one man loved the pilgrim soul in you,
And loved the sorrows of your changing face;
And bending down beside the glowing bars,
Murmur, a little sadly, how Love fled
And paced upon the mountains overhead
And hid his face amid a crowd of stars. </p>
</div>
<div class="card">
<h3>文章二</h3>
<p>aklfdjha sadsafasdfasdfasdffasf
sdfalksdfjakds dskafh sdhf sdfk
fdalhlkafsj;lldjsflakjdslfkjasld
dlsfkjaskfjjalskdfjaslfklasjfdlks
akd sfa dskjaf jdsf akdshaf ksdjf a</p>
</div>
<div class="card">
<h3>标题</h3>
<p>aklfdjha sadsafasdfasdfasdffasf
sdfalksdfjakds dskafh sdhf sdfk
fdalhlkafsj;lldjsflakjdslfkjasld
dlsfkjaskfjjalskdfjaslfklasjfdlks
akd sfa dskjaf jdsf akdshaf ksdjf a</p>
</div>
<div class="card">
<h3>标题</h3>
<p>aklfdjha sadsafasdfasdfasdffasf
sdfalksdfjakds dskafh sdhf sdfk
fdalhlkafsj;lldjsflakjdslfkjasld
dlsfkjaskfjjalskdfjaslfklasjfdlks
akd sfa dskjaf jdsf akdshaf ksdjf a</p>
</div>
<div class="card">
<h3>标题</h3>
<p>aklfdjha sadsafasdfasdfasdffasf
sdfalksdfjakds dskafh sdhf sdfk
fdalhlkafsj;lldjsflakjdslfkjasld
dlsfkjaskfjjalskdfjaslfklasjfdlks
akd sfa dskjaf jdsf akdshaf ksdjf a</p>
</div>
<div class="card">
<h3>标题</h3>
<p>aklfdjha sadsafasdfasdfasdffasf
sdfalksdfjakds dskafh sdhf sdfk
fdalhlkafsj;lldjsflakjdslfkjasld
dlsfkjaskfjjalskdfjaslfklasjfdlks
akd sfa dskjaf jdsf akdshaf ksdjf a</p>
</div>
</div>
</div>
<div class="comment-section">
<div id="comment">
<div class="comment-wrapper">
<h2>留言板</h2>
<div class="hr"></div>
<div class="sub-heading">
留下你的脚印
</div>
</div>
<div>
<div class="input1">
<input type="text" name="author" placeholder="称呼">
</div>
<div class="input2">
<textarea name="comment" rows="5" placeholder="欢迎留言"></textarea>
</div>
<div class="input1">
<input type="text" name="email" placeholder="联系方式">
</div>
<button id="submit" name="submit" type="submit"><i class="fa fa-paper-plane-o fa-3x" aria-hidden="true"></i></button>
</div>
</div>
</div>--><!--隐藏-->
<div class="index_right">
这里显示主页右部分
<div>
这个地方会是很多部分
</div>
</div>
</div>
</div><!-- 内容结束 -->
<footer><!-- 页脚开始 -->
<ul class="share-group">
<li><a href="#"><i class="fa fa-qq" aria-hidden="true"></i></a></li>|
<li><a href="#"><i class="fa fa-weixin" aria-hidden="true"></i></a></li>|
<li><a href="#"><i class="fa fa-weibo" aria-hidden="true"></i></a></li>|
<li><a href="#"><i class="fa fa-tencent-weibo" aria-hidden="true"></i></a></li>|
<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
</ul>
<div class="copy">
© 10-2016
</div>
</footer><!-- 页脚结束 -->
<div class="mask">
<!--阴影覆盖-->
</div>
<div id="sidebar">
<div id="headImg">
<img src="src/headImg/user2.jpg">
<a href="#">用户名:电子科技大学</a>
<br>
<div><a href="#">关注+</a></div>
<div><a href="#">留言+</a></div>
</div>
<ul>
<li><a href="#">最新文章</a></li>
<li><a href="#">精美图片</a></li>
<li><a href="#">图书推荐</a></li>
<li><a href="#">音乐欣赏</a></li>
<li><a href="#">留言交流</a></li>
<li><a href="#">个人资料</a></li>
<li><a href="#">网站统计</a></li>
</ul>
</div>
<button class="back-to-top"><i class="fa fa-arrow-up" aria-hidden="true"></i>返回顶部</button>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
</div>
</body>
</html>