Skip to content

Commit 2ae8190

Browse files
Developer09264Developer09264
authored
更新 index.html
1 parent da125d1 commit 2ae8190

1 file changed

Lines changed: 238 additions & 33 deletions

File tree

‎index.html‎

Lines changed: 238 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,239 @@
1-
<!DOCTYPE html>
2-
<html lang="zh-CN">
3-
4-
<head>
5-
<title>田语 | 朴实无华，意蕴悠长</title>
6-
<meta charset="UTF-8">
7-
<meta name="viewport" content="width=device-width, initial-scale=1">
8-
<meta name="keywords" content="tian yu, 田语, 田语网,安徽省濉溪中学,濉中,濉溪中学">
9-
<meta name="description"
10-
content="本网站旨在记录并传承田老师的智慧言论，通过对“田语”的深入挖掘和研究，帮助大家更好地理解田老师的人生哲学和教育理念。网站内容包括：田语原文、释义、背景故事、学生评论、相关链接等。">
11-
<meta name="author" content="09264">
12-
<meta http-equiv="Content-Language" content="zh-CN">
13-
<link rel="icon" href="./assets/images/favicon.svg" type="image/svg+xml">
14-
<link rel="stylesheet" type="text/css" href="./assets/css/styles.css">
15-
</head>
16-
17-
<body>
18-
<div id="navbar">
19-
<a href="./index.html" class="logo">田语</a>
20-
<a href="./assets/html/about.html" class="about-button">关于</a>
21-
</div>
22-
<div class="welcome-page">
23-
<p class="quote" id="quote">田语</p>
24-
</div>
25-
<div class="quotes">
26-
<h2>所有田语</h2>
27-
<ul id="quote-list">
28-
</ul>
29-
</div>
30-
<button id="back-to-top">↑</button>
31-
<script src="./assets/js/script.js"></script>
32-
</body>
33-
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
4+
<head>
5+
<title>田语 | 朴实无华，意蕴悠长</title>
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<meta name="keywords" content="tian yu, 田语, 田语网,安徽省濉溪中学,濉中,濉溪中学">
9+
<meta name="description"
10+
content="本网站旨在记录并传承田老师的智慧言论，通过对"田语"的深入挖掘和研究，帮助大家更好地理解田老师的人生哲学和教育理念。网站内容包括：田语原文、释义、背景故事、学生评论、相关链接等。">
11+
<meta name="author" content="09264">
12+
<meta http-equiv="Content-Language" content="zh-CN">
13+
<link rel="icon" href="./assets/images/favicon.svg" type="image/svg+xml">
14+
<style>
15+
body {
16+
margin: 0;
17+
padding: 0;
18+
overflow: auto;
19+
}
20+
21+
html {
22+
scroll-behavior: smooth;
23+
}
24+
25+
@font-face {
26+
font-family: 'Genshin Font';
27+
src: url('../fonts/hk4e_zh-cn.ttf') format('truetype');
28+
}
29+
30+
.welcome-page {
31+
position: relative;
32+
width: 100%;
33+
height: 100vh;
34+
background-color: #51174b;
35+
color: #fff;
36+
}
37+
38+
.content {
39+
text-align: center;
40+
padding-top: 30%;
41+
}
42+
43+
.title {
44+
font-size: 48px;
45+
}
46+
47+
.quote {
48+
font-size: 8vw;
49+
position: absolute;
50+
top: 61.8%;
51+
left: 50%;
52+
transform: translate(-50%, -50%);
53+
}
54+
55+
@media (min-width: 768px) {
56+
.quote {
57+
font-size: 3vw;
58+
}
59+
}
60+
61+
.quotes {
62+
min-height: 100vh;
63+
display: flex;
64+
justify-content: center;
65+
align-items: center;
66+
flex-direction: column;
67+
padding: 20px;
68+
box-sizing: border-box;
69+
background-color: #f2e3f6;
70+
}
71+
72+
.quotes-content {
73+
flex-grow: 1;
74+
display: flex;
75+
flex-direction: column;
76+
justify-content: space-between;
77+
opacity: 0;
78+
transition: opacity 0.8s ease-out;
79+
}
80+
81+
.quotes-content::before,
82+
.quotes-content::after {
83+
content: "";
84+
flex-grow: 1;
85+
}
86+
87+
.quotes-content.show {
88+
opacity: 1;
89+
}
90+
91+
#quote-list {
92+
list-style: none;
93+
padding: 0;
94+
}
95+
96+
#back-to-top {
97+
position: fixed;
98+
bottom: -50px;
99+
right: 20px;
100+
display: none;
101+
background-color: #8a8a8a;
102+
color: white;
103+
border: none;
104+
border-radius: 50%;
105+
width: 50px;
106+
height: 50px;
107+
font-size: 24px;
108+
cursor: pointer;
109+
transition: opacity 0.5s ease, background-color 0.5s ease, bottom 0.5s ease;
110+
text-align: center;
111+
line-height: 50px;
112+
opacity: 0;
113+
display: flex;
114+
justify-content: center;
115+
align-items: center;
116+
}
117+
118+
#back-to-top:hover {
119+
background-color: #8a297f;
120+
opacity: 1;
121+
}
122+
123+
#back-to-top.show {
124+
display: block;
125+
opacity: 1;
126+
bottom: 20px;
127+
}
128+
129+
#navbar {
130+
position: fixed;
131+
top: 0;
132+
left: 0;
133+
width: 100%;
134+
height: 12.5vh;
135+
opacity: 0;
136+
pointer-events: none;
137+
transition: opacity 0.5s;
138+
background-color: #d6d6d695;
139+
display: flex;
140+
justify-content: space-between;
141+
align-items: center;
142+
padding: 0 20px;
143+
box-sizing: border-box;
144+
z-index: 1;
145+
}
146+
147+
#navbar.show {
148+
opacity: 1;
149+
pointer-events: auto;
150+
}
151+
152+
.logo {
153+
position: absolute;
154+
left: 20px;
155+
padding: 10px 20px;
156+
color: #8a297f;
157+
font-size: 50px;
158+
text-decoration: none;
159+
border-radius: 5px;
160+
transition: background-color 0.3s;
161+
}
162+
163+
/* Dropdown styles */
164+
.dropdown {
165+
position: absolute;
166+
right: 20px;
167+
}
168+
169+
.dropdown-btn {
170+
padding: 10px 20px;
171+
background-color: #d6d6d695;
172+
color: #fff;
173+
text-decoration: none;
174+
border-radius: 5px;
175+
transition: background-color 0.3s;
176+
cursor: pointer;
177+
border: none;
178+
font-size: inherit;
179+
font-family: inherit;
180+
}
181+
182+
.dropdown-btn:hover {
183+
background-color: #8a407f;
184+
}
185+
186+
.dropdown-content {
187+
display: none;
188+
position: absolute;
189+
right: 0;
190+
background-color: #f9f9f9;
191+
min-width: 160px;
192+
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
193+
z-index: 1;
194+
border-radius: 5px;
195+
overflow: hidden;
196+
}
197+
198+
.dropdown-content a {
199+
color: #8a297f;
200+
padding: 12px 16px;
201+
text-decoration: none;
202+
display: block;
203+
transition: background-color 0.3s;
204+
}
205+
206+
.dropdown-content a:hover {
207+
background-color: #f2e3f6;
208+
}
209+
210+
.dropdown:hover .dropdown-content {
211+
display: block;
212+
}
213+
</style>
214+
</head>
215+
216+
<body>
217+
<div id="navbar">
218+
<a href="./index.html" class="logo">田语</a>
219+
<div class="dropdown">
220+
<button class="dropdown-btn">关于</button>
221+
<div class="dropdown-content">
222+
<a href="./assets/html/about.html">关于本站</a>
223+
<a href="./assets/html/tianyong.html">关于田勇</a>
224+
</div>
225+
</div>
226+
</div>
227+
<div class="welcome-page">
228+
<p class="quote" id="quote">田语</p>
229+
</div>
230+
<div class="quotes">
231+
<h2>所有田语</h2>
232+
<ul id="quote-list">
233+
</ul>
234+
</div>
235+
<button id="back-to-top">↑</button>
236+
<script src="./assets/js/script.js"></script>
237+
</body>
238+
34239
</html>

0 commit comments

Comments
 (0)