WebLearn/HomePage/index.html at master · BoilTask/WebLearn · GitHub

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- <meta name="viewport" content="width=device-width,initial-scale=1" /> -->
		<title>个人主页</title>
		<link rel="stylesheet" type="text/css" href="icons/icon.css" />
		<style>
			body {
				margin: 46px 0 0 0;
				background: url(bg.png);
			}

			#banner {
				height: 300px;
				background-image: url(banner.png);
				background-position: 50% 50%;
			}

			.container {
				width: 1000px;
				/* width: 50%; */
				margin: 0 auto;
			}

			#Article {
				text-align: center;
				font-family: "楷体";
			}

			p {
				text-indent: 2em;
				line-height: 150%;
			}

			#footer {
				margin-top: 50px;
				height: 100px;
				background-color: #000000;
			}

			.footerDiv {
				display: flex;
				justify-content: space-between;
			}

			.footerDiv span {
				margin-top: 30px;
				color: #FFFFFF;
			}

			.nav {

				background-color: #6495ED;
				position: fixed;
				width: 100%;

				left: 0;
				top: 0;
				z-index: 1;
			}

			.nav ul {
				list-style: none;
				padding: 0;
				margin: 0;
			}

			.nav li {
				display: inline-block;
			}

			.nav a {
				display: inline-block;
				padding: 10px 20px;

				text-decoration: none;
				font-size: 20px;

				color: black;
			}

			.nav a:hover {
				background-color: sandybrown;
				color: white;
			}

			#classmateDiv {
				width: 800px;
				height: 400px;
				position: relative;
				margin: 0 auto;
				border: solid 1px black;

				background-color: #EEEEEE;

			}

			#classmate1 {
				position: absolute;
				left: 50px;
				top: 200px;
				width: 150px;
				height: 150px;
				border-radius: 50%;
			}

			#classmate2 {
				position: absolute;
				left: 300px;
				top: 50px;
				border-radius: 50%;
			}

			#classmate3 {
				position: absolute;
				left: 600px;
				top: 250px;
				width: 100px;
				height: 100px;
				border-radius: 50%;
			}

			#cssspriteDiv {
				width: 400px;
				height: 300px;
				margin: 0 auto;
				border: solid 1px red;
				font-size: 0;
			}

			#cssspriteDiv div {
				display: inline-block;
				width: 100px;
				height: 100px;
			}

			#floatlist {
				list-style: none;
				padding: 0;
				margin: 0;
				background-color: black;
			}

			.clearfix:after {
				content: "";
				display: block;
				clear: both;
			}

			#floatlist li {
				float: left;
			}

			#floatlist li a {
				border: solid 1px white;
				text-decoration: none;
				color: white;
				padding: 2px;
				margin: 2px;
			}

			#floatlist li a:hover {
				background-color: white;
				color: black;
			}
		</style>
	</head>
	<body>

		<nav class="nav">
			<div class="container">
				<ul>
					<li><a href="#profile">个人简介</a></li>
					<li><a href="#school">学校简介</a></li>
					<li><a href="#classmate">我的同学</a></li>
					<li><a href="#csssprite">图片精灵</a><i class="icon-cookie icon-25px"></i></li>
				</ul>
			</div>
		</nav>

		<div id="banner"></div>

		<div class="container">
			<h1 id="Article">欧阳天的个人主页</h1>
			<h2 id="profile">个人简介</h2>
			<p>欧阳天，男，1997年12月12日出生。</p>
			<h2 id="school">学校简介</h2>
			<p>河南理工大学（Henan Polytechnic
				University）位于河南省焦作市，是中国第一所矿业高等学府、河南省建立最早的高等学校，为河南省与应急管理部共建高校、河南省属重点大学。入选国家“中西部高校基础能力建设工程”、“卓越工程师教育培养计划”、“卓越工程师教育培养计划2.0”、“新工科研究与实践项目”，教育部本科教学工作水平评估优秀学校。</p>
			<p>学校前身是1909年由英国福公司兴办的焦作路矿学堂，历经河南福中矿务学校、福中矿务专门学校、福中矿务大学、私立焦作工学院、西北工学院、国立焦作工学院、焦作矿业学院等历史时期，1995年恢复焦作工学院校名，2004年更名为河南理工大学。2002年后相继获得博士学位授予权、入选省重点建设骨干高校。</p>
			<p>截至2018年5月，学校有南校区、北校区、西校区三个校区，占地面积4100余亩，建筑面积140余万平方米，教学科研仪器设备总值近5.25亿元；开设22个教学学院和后备军官学院、国际教育学院、继续教育学院、安全技术培训学院，设有74个本科专业，涵盖工、理、管、经、法、文、教、艺、医九大学科门类，5个博士后科研流动站、6个一级学科博士点、20个一级学科硕士点、8个硕士专业学位授权类别；现有教职工3108人，有全日制在校生40000余人，其中研究生4000多人。</p>
			<div align="center">
				<img class="itemcenter" src="hpu.jpg" alt="HPU校园">
			</div>
			<h2 id="classmate">我的同学</h2>
			<div id="classmateDiv">
				<img id="classmate1" src="classmate1.jpg" alt="classmate1">
				<img id="classmate2" src="classmate2.jpg" alt="classmate2">
				<img id="classmate3" src="classmate3.jpg" alt="classmate3">
			</div>
			<h2 id="csssprite">图片精灵</h2>
			<div id="cssspriteDiv">
				<div class="icon-star"></div>
				<div class="icon-bell"></div>
				<div class="icon-gift"></div>
				<div class="icon-snowman"></div>
				<div class="icon-candy"></div>
				<div class="icon-tree"></div>
				<div class="icon-cookie"></div>
				<div class="icon-sock"></div>
				<div class="icon-elk"></div>
				<div class="icon-bow"></div>
				<div class="icon-santa"></div>
				<div class="icon-wreath"></div>
			</div>

		</div>
		<div id="footer">
			<div class="container footerDiv">
				<span id="serverTime"></span>
				<span>
					<ul id="floatlist" class="clearfix">
						<li><a href="#profile">个人简介</a></li>
						<li><a href="#school">学校简介</a></li>
						<li><a href="#classmate">我的同学</a></li>
						<li><a href="#csssprite">图片精灵</a></li>
					</ul>
				</span>
				<span>@BoilTask@qq.com</span>
			</div>
		</div>
		<script>
			UpdateClock();
			setInterval(UpdateClock, 1000);

			function UpdateClock() {
				var nowDate = new Date();

				var Y = StrAddZero(nowDate.getFullYear());
				var M = StrAddZero(nowDate.getMonth() + 1);
				var D = StrAddZero(nowDate.getDate());
				var h = StrAddZero(nowDate.getHours());
				var m = StrAddZero(nowDate.getMinutes());
				var s = StrAddZero(nowDate.getSeconds());

				var serverTime = Y + "-" + M + "-" + D + " " + h +
					":" + m + ":" + s;
				document.getElementById('serverTime').innerHTML = serverTime;
			}

			function StrAddZero(m) {
				if (m < 10) {
					return "0" + m;
				} else {
					return m;
				}
			}
		</script>
	</body>
</html>