-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathkysh.html
132 lines (121 loc) · 3.96 KB
/
kysh.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
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<title>插画墙</title>
<link rel="stylesheet" href="res/layui/css/layui.css">
<link rel="stylesheet" href="res/static/css/index.css">
</head>
<body>
<!-- nav部分 -->
<div class="nav">
<div class="layui-container">
<div class="nav-list">
<button>
<span></span><span></span><span></span>
</button>
<ul class="layui-nav" lay-filter="">
<li class="layui-nav-item"><a href="index.html">首页</a></li>
<li class="layui-nav-item"><a href="grjs.html">个人介绍</a></li>
<li class="layui-nav-item layui-this"><a href="kysh.html">插画墙</a></li>
<li class="layui-nav-item"><a href="xx.html">校园生活</a></li>
<li class="layui-nav-item"><a href="zygh.html">职业规划</a></li>
<li class="layui-nav-item"><a href="lyb.html">留言板</a></li>
<li class="layui-nav-item"><a href="register.html">登录</a></li>
</ul>
</div>
</div>
</div>
<!-- banner部分 -->
<div class="banner xsh">
<div class="title">
<p>插画墙</p>
<p class="en">Illustrated Wall</p>
</div>
</div>
<div class="main-about">
<div class="layui-container">
<div class="layui-row">
<ul class="aboutab">
<div>
<style>
.image-container {
display: flex;
flex-wrap: wrap;
}
.image-container img {
width: 360px;
height: 180px;
object-fit: cover;
margin-right: 10px;
margin-bottom: 10px;
}
</style>
<div class="image-container" id="image-container">
<img src="res/static/img/banner3.jpg">
<img src="res/static/img/banner2.png">
<img src="res/static/img/banner1.png">
<img src="res/static/img/0eeq0a6m6n4mwwuzsupw61jw9fsfwdn.png">
<img src="res/static/img/1200px-Bg_32.png.jpg">
<img src="res/static/img/banner4.png">
<img src="res/static/img/1200px-Bg_126.png.jpg">
<!-- 添加更多图片元素 -->
</div>
<script>
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
function randomizeImages() {
const container = document.getElementById('image-container');
const images = container.querySelectorAll('img');
const shuffledImages = shuffleArray(Array.from(images));
container.innerHTML = ''; // 清空容器
shuffledImages.forEach((image) => {
container.appendChild(image);
});
}
randomizeImages(); // 页面加载时随机排列图片
</script>
</div>
</ul>
</div>
</div>
</div>
<!-- main部分 -->
<!-- footer部分 -->
<div class="footer">
<div class="layui-container">
<p class="footer-web">
<a href="https://www.tiangong.edu.cn/">天津工业大学</a><a href="laboreducation.html">劳动教育页面</a>
<a href=>天工创新学院</a>
</p>
<div class="layui-row footer-contact">
<div class="layui-row">
<div class="layui-col-sm6 layui-col-md8 layui-col-lg9">
<p class="contact-top">注意：网页处于开发阶段</p>
</div>
<div class="layui-col-sm6 layui-col-md4 layui-col-lg3">
<p class="contact-bottom"><span class="right"></span></p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="res/layui/layui.js"></script>
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script>
layui.config({
base: '../res/static/js/'
}).use('firm');
</script>
</body>
</html>