-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
177 lines (134 loc) · 6 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>诗经里：让世界 · 重回诗意</title>
<link rel="shortcut icon" href="images/title_icon.ico">
<link href="CSS/vendor/lightbox.min.css" type="text/css" rel="stylesheet">
<link href="CSS/vendor/blueberry.css" type="text/css" rel="stylesheet">
<link href="CSS/1.css" type="text/css" rel="stylesheet">
<script src="JavaScript/vendor/lightbox-plus-jquery.min.js"></script>
<script src="JavaScript/vendor/jquery.blueberry.js"></script>
<script src="JavaScript/myScript.js"></script>
</head>
<body>
<div class="wrapper">
<div id="topAnchor"></div>
<!--导航-->
<nav>
<div class="left">
<img class="logo" src="images/logo.png"/>
</div>
<div class="right">
<a href="index.html">首 页</a>
<a href="#part2">最新活动</a>
<a href="#part3">视频专栏</a>
<a href="#part4">文创产品</a>
<a href="#part5">植被图鉴</a>
</div>
</nav>
<!--图片幻灯片-->
<div class="part1">
<div class="blueberry">
<ul class="slides">
<li><img src="images/234.jpg" alt="诗经里1"></li>
<li><img src="images/6.jpg" alt="诗经里2"></li>
<li><img src="images/3.jpg" alt="诗经里3"></li>
<li><img src="images/4.jpg" alt="诗经里4"></li>
<li><img src="images/2.jpg" alt="诗经里5"></li>
</ul>
</div>
</div>
<!--最新活动-->
<div id="part2" class="part2">
<h2>最新活动</h2>
<hr>
<div class="activity">
<h3>活在诗经里的一天</h3>
<a href="2.html">More ></a>
<img src="images/11.jpg">
</div>
<div class="activity">
<h3>诗经.解忧杂货铺</h3>
<a href="3.html">More ></a>
<img src="images/22.jpg">
</div>
<div class="activity">
<h3>寻找诗经里的《诗经》</h3>
<a href="4.html">More ></a>
<img src="images/33.jpg">
</div>
</div>
<!--视频专栏-->
<div id="part3" class="part3">
<h2>视频专栏</h2>
<hr>
<video controls="controls" autoplay="autoplay" loop>
<source src="media/video_clip.mp4" type="video/mp4">
<source src="media/video_clip.ogg" type="video/ogg">您的浏览器不支持video标签。
</video>
</div>
<!--文创产品-->
<div id="part4" class="part4">
<h2>文创产品</h2>
<hr>
<figure class="left4">
<img src="images/台历.jpg" alt="">
<figcaption>
<h3>《诗经里的一年》台历</h3>
<span>款式：12款双面日历页 材质：白牛皮</span>
</figcaption>
</figure>
<figure class="right4">
<img src="images/书签.jpg" alt="">
<figcaption>
<h3>木质书签福袋</h3>
<span>款式：5款单面图案 材质：竹木</span>
</figcaption>
</figure>
</div>
<!--植被图鉴-->
<div id="part5" class="part5">
<h2>植被图鉴</h2>
<hr>
<div class="lightbox">
<a class="example-image-link" href="images/木槿.jpg" data-lightbox="example-set" data-title="木槿-有女同车，颜如舜华，将翱将翔，佩玉琼琚。——《诗经·郑风·有女同车》"><img class="example-image" src="images/木槿.jpg" alt="木槿"></a>
<a class="example-image-link" href="images/桑葚.jpg" data-lightbox="example-set" data-title="桑葚-隰桑有阿，其叶有沃。既见君子，云何不乐。——《诗经·小雅·隰桑》"><img class="example-image" src="images/桑葚.jpg" alt="桑葚"></a>
<a class="example-image-link" href="images/芍药.jpg" data-lightbox="example-set" data-title="芍药-维士与女，伊其相谑，赠之以勺药。——《诗经·郑风·溱洧》"><img class="example-image" src="images/芍药.jpg" alt="芍药"></a>
<a class="example-image-link" href="images/荇菜.jpg" data-lightbox="example-set" data-title="荇菜-参差荇菜，左右流之。窈窕淑女，寤寐求之。——《国风•周南•关雎》"><img class="example-image" src="images/荇菜.jpg" alt="荇菜"></a>
<a class="example-image-link" href="images/梨树.jpg" data-lightbox="example-set" data-title="梨树-蔽芾甘棠，勿翦勿拜，召伯所说。——《诗经·召南·甘棠》"><img class="example-image" src="images/梨树.jpg" alt="梨树"></a>
</div>
</div>
<!--关于我们-->
<div class="part6">
<h2>关于我们</h2>
<div class="share_icon">
<table>
<tbody>
<tr>
<td><a href="https://github.com/halibocai/shijinglitown"><img class="share_button" src="images/github_1.png" alt="github"></a></td>
<td><a href="5.html"><img class="share_button" src="images/wechat_1.png" alt="wechat"></a></td>
</tr>
</tbody>
</table>
</div>
<a class="back_to_top" href="#topAnchor">> 回到顶部</a>
<hr>
<div class="group_members">
<p>策划人：<br>
苗孟雪（3120332002） 徐潇潇（3120332012）<br>
靳潇倩（3120332013） 李 月（3120332014）<br>
吕欣达（3120332032） 田栩莹（3120332043）<br>
李 丽（3120332044）
</div>
<div class="bottom_logo">
<img class="authority_logo1" src="images/logo2.png" alt="诗经里">
<img class="authority_logo2" src="images/xjtu.png" alt="交大">
</div>
</div>
<!--脚注-->
<footer>
<p>地址：陕西省西安市西咸新区西安交通大学创新港校区<br/>邮编：712000<br/>Copyright © 2021 版权所有：西安交通大学新闻与新媒体学院</p>
</footer>
</div>
</body>