Skip to content

Commit bd85e6d

Browse files
Developer09264Developer09264
committed
fix bugs
1 parent 73b9ce0 commit bd85e6d

4 files changed

Lines changed: 201 additions & 254 deletions

File tree

‎assets/css/styles.css‎

Lines changed: 126 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,10 @@ body {
2727
font-family: 'Segoe UI', sans-serif;
2828
}
2929

30-
html {
31-
scroll-behavior: smooth;
30+
.logo img{
31+
width: 50px;
32+
height: auto;
33+
3234
}
3335

3436
.welcome-page {
@@ -67,20 +69,6 @@ html {
6769
background-color: #f2e3f6;
6870
}
6971

70-
#quotepad {
71-
min-height: 100vh;
72-
width: 50vw;
73-
border-radius: 5vh;
74-
display: flex;
75-
justify-content: center;
76-
align-items: center;
77-
flex-direction: column;
78-
padding: 10vh;
79-
margin: 20vh auto;
80-
background-color: rgba(247, 244, 251, 0.9);
81-
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
82-
}
83-
8472
#footer {
8573
height: 20vh;
8674
width: 100vw;
@@ -115,12 +103,6 @@ h2 {
115103
opacity: 1;
116104
}
117105

118-
#quote-list {
119-
list-style: none;
120-
padding: 0;
121-
font-size: 3vh;
122-
}
123-
124106
#back-to-top {
125107
position: fixed;
126108
bottom: -50px;
@@ -212,7 +194,7 @@ h2 {
212194
color: #fff;
213195
text-decoration: none;
214196
border-radius: 5px;
215-
transition: background-color 0.3s;
197+
transition: transform 0.3s, background-color 0.3s, box-shadow 0.4s;
216198
cursor: pointer;
217199
border: none;
218200
font-size: inherit;
@@ -221,6 +203,7 @@ h2 {
221203

222204
.dropdown-btn:hover {
223205
background-color: #8a407f;
206+
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
224207
}
225208

226209
.dropdown-content {
@@ -249,4 +232,124 @@ h2 {
249232

250233
.dropdown:hover .dropdown-content {
251234
display: block;
235+
}
236+
237+
238+
.card {
239+
border-radius: 2em;
240+
/* min-height: 100vh; */
241+
/* width: 50vw; */
242+
border-radius: 5vh;
243+
display: flex;
244+
justify-content: center;
245+
align-items: center;
246+
flex-direction: column;
247+
padding: 10vh;
248+
background-color: rgba(247, 244, 251, 0.9);
249+
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
250+
251+
}
252+
253+
/* ------------------------- */
254+
255+
#more-contents h2 {
256+
margin-bottom: 30px;
257+
font-size: 2rem;
258+
color: #333;
259+
}
260+
261+
#more-contents {
262+
padding: 40px 20px;
263+
max-width: 800px;
264+
/* 限制最大宽度，让长条不要太长 */
265+
margin: 0 auto;
266+
/* 居中 */
267+
}
268+
269+
.card-container {
270+
display: flex;
271+
flex-direction: column;
272+
/* 关键：纵向堆叠 */
273+
gap: 20px;
274+
/* 卡片之间的间距 */
275+
}
276+
277+
.nav-card {
278+
/* 保留之前的布局样式 */
279+
display: flex;
280+
align-items: center;
281+
background: #fff;
282+
padding: 20px 30px;
283+
border-radius: 15px;
284+
text-decoration: none;
285+
color: inherit;
286+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
287+
border: 1px solid rgba(0, 0, 0, 0.05);
288+
margin-bottom: 20px;
289+
/* 确保卡片间有间距 */
290+
291+
/* --- 核心动画初始状态 --- */
292+
opacity: 0;
293+
/* 初始透明 */
294+
transform: translateX(-50px);
295+
/* 初始向下偏移 50px */
296+
transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.3s ease;
297+
/* 增加 transform和opacity 的过渡 */
298+
}
299+
300+
.nav-card.show {
301+
opacity: 1;
302+
/* 变回不透明 */
303+
transform: translateX(0);
304+
/* 回到原位 */
305+
}
306+
307+
.nav-card:nth-child(1) {
308+
transition-delay: 0.1s;
309+
}
310+
311+
.nav-card:nth-child(2) {
312+
transition-delay: 0.2s;
313+
}
314+
315+
.nav-card:nth-child(3) {
316+
transition-delay: 0.3s;
317+
}
318+
319+
.nav-card:hover {
320+
transition-delay: 0s !important; /* 关键：划掉之前的等待时间，立刻响应 */
321+
transition-duration: 0.2s !important; /* 关键：Hover 动画通常要比入场动画快，0.2s 比较跟手 */
322+
}
323+
324+
.nav-card.show:hover {
325+
transform: translateX(10px);
326+
/* 仅在显示后允许向右滑动 */
327+
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
328+
border-color: #8000ff;
329+
/* 可选：悬停时边框变色 */
330+
}
331+
332+
.card-icon {
333+
font-size: 3rem;
334+
margin-bottom: 15px;
335+
}
336+
337+
.nav-card h3 {
338+
margin: 10px 0;
339+
font-size: 1.5rem;
340+
color: #2c3e50;
341+
}
342+
343+
.nav-card p {
344+
font-size: 0.9rem;
345+
color: #666;
346+
line-height: 1.5;
347+
}
348+
349+
/* 手机端适配 */
350+
@media (max-width: 768px) {
351+
.nav-card {
352+
width: 100%;
353+
/* 手机端占满宽度 */
354+
}
252355
}

‎assets/html/allQuotes.html‎

Lines changed: 22 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -4,110 +4,27 @@
44
<head>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>安徽省濉溪中学 - 田勇</title>
7+
<title>田语 | 所有田语</title>
8+
<link rel="stylesheet" type="text/css" href="../css/uniStyles.css">
89
<style>
9-
/* 动态背景 */
10-
@keyframes pearl-shimmer {
11-
0% { background-position: 0% 50%; }
12-
50% { background-position: 100% 50%; }
13-
100% { background-position: 0% 50%; }
14-
}
15-
16-
body {
17-
margin: 0;
18-
padding: 0;
10+
#quotepad {
1911
min-height: 100vh;
20-
background: linear-gradient(
21-
135deg,
22-
#fff5f5 0%,
23-
#f0f5ff 25%,
24-
#f5fff0 50%,
25-
#fff0f5 75%,
26-
#f5f0ff 100%
27-
);
28-
background-size: 400% 400%;
29-
animation: pearl-shimmer 20s ease infinite;
30-
font-family: 'Segoe UI', sans-serif;
31-
}
32-
33-
/* 导航栏 */
34-
.nav {
35-
background: rgba(255, 255, 255, 0.9);
36-
backdrop-filter: blur(10px);
37-
padding: 1rem 2rem;
38-
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
39-
}
40-
41-
.nav a {
42-
color: #8a297f;
43-
text-decoration: none;
44-
font-size: 1.2rem;
45-
}
46-
47-
/* 卡片容器 */
48-
.container {
49-
max-width: 1200px;
50-
margin: 2rem auto;
51-
padding: 0 1rem;
52-
}
53-
54-
/* 卡片样式 */
55-
.card {
56-
background: rgba(255, 255, 255, 0.85);
57-
backdrop-filter: blur(5px);
58-
border-radius: 15px;
59-
padding: 2rem;
60-
margin: 2rem 0;
61-
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
62-
transition: transform 0.3s ease;
63-
}
64-
65-
/* 标题样式 */
66-
h1 {
67-
color: #8a297f;
68-
font-size: 3rem;
69-
text-align: center;
70-
margin: 2rem 0;
71-
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
72-
}
73-
74-
h2 {
75-
color: #6b205f;
76-
border-left: 4px solid #8a297f;
77-
padding-left: 1rem;
78-
margin: 1.5rem 0;
12+
width: 50vw;
13+
border-radius: 5vh;
14+
display: flex;
15+
justify-content: center;
16+
align-items: center;
17+
flex-direction: column;
18+
padding: 10vh;
19+
margin: 20vh auto;
20+
background-color: rgba(247, 244, 251, 0.9);
21+
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
7922
}
8023

81-
/* 外号列表 */
82-
.nickname-list {
24+
#quote-list {
8325
list-style: none;
8426
padding: 0;
85-
display: flex;
86-
flex-wrap: wrap;
87-
gap: 1rem;
88-
}
89-
90-
.nickname-list li {
91-
background: #f8e3f5;
92-
padding: 0.5rem 1.2rem;
93-
border-radius: 20px;
94-
font-weight: 500;
95-
}
96-
97-
/* 响应式设计 */
98-
@media (max-width: 768px) {
99-
.container {
100-
padding: 0 0.5rem;
101-
}
102-
103-
.card {
104-
padding: 1.5rem;
105-
margin: 1rem 0;
106-
}
107-
108-
h1 {
109-
font-size: 2.2rem;
110-
}
27+
font-size: 3vh;
11128
}
11229
</style>
11330
</head>
@@ -118,37 +35,17 @@
11835
</nav>
11936

12037
<div class="container">
121-
<h2>安徽省濉溪中学</h2>
122-
<h1>- 田勇 -</h1>
123-
124-
<!-- 基本信息卡片 -->
125-
<div class="card">
126-
<h2>荣誉称号</h2>
127-
<!--
128-
<p><strong>别号列表：</strong></p>
129-
-->
130-
<ul class="nickname-list">
131-
<li><b>八哥</b></li>
132-
<li>濉中达尔文</li>
133-
<li>濉中狄仁杰</li>
134-
<li>癞蛤蟆</li>
135-
</ul>
136-
</div>
38+
<h1>- 所有田语 -</h1>
39+
<div id="quotepad">
40+
<ol id="quote-list">
13741

138-
<!-- 背景介绍卡片 -->
139-
<div class="card">
140-
<h2>身份</h2>
141-
<div class="placeholder-text">
142-
<p><b>濉溪中学语文老师</b></p>
143-
<p><b>安徽师范大学</b>毕业生</p>
144-
<p><b>副教授级别</b>的老师</p>
145-
<p>高考阅卷<b>专家组</b></p>
146-
<p><b>最受学生欢迎</b>的老师</p>
147-
</div>
42+
</ol>
14843
</div>
14944

15045

46+
</ol>
15147
</div>
48+
<script src="../js/allQuotes.js"></script>
15249
</body>
15350

154-
</html>
51+
</html>

0 commit comments

Comments
 (0)