Skip to content

Commit 901bfeb

Browse files
Developer09264Developer09264
authored
创建 in.html
1 parent 0b484a6 commit 901bfeb

1 file changed

Lines changed: 159 additions & 0 deletions

File tree

‎in.html‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
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标签保持不变 -->
9+
<style>
10+
/* 动态珍珠光泽背景 */
11+
@keyframes pearl-shimmer {
12+
0% { background-position: 0% 50%; }
13+
50% { background-position: 100% 50%; }
14+
100% { background-position: 0% 50%; }
15+
}
16+
17+
body {
18+
margin: 0;
19+
padding: 0;
20+
min-height: 100vh;
21+
background: linear-gradient(
22+
135deg,
23+
#fff5f5 0%,
24+
#f0f5ff 25%,
25+
#f5fff0 50%,
26+
#fff0f5 75%,
27+
#f5f0ff 100%
28+
);
29+
background-size: 400% 400%;
30+
animation: pearl-shimmer 20s ease infinite;
31+
font-family: 'Roboto', 'Segoe UI', sans-serif;
32+
}
33+
34+
/* Material Design风格导航栏 */
35+
#navbar {
36+
background: rgba(255, 255, 255, 0.85);
37+
backdrop-filter: blur(10px);
38+
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
39+
height: 64px;
40+
padding: 0 24px;
41+
}
42+
43+
.logo {
44+
color: #8a297f;
45+
font-size: 24px;
46+
font-weight: 500;
47+
padding: 16px 0;
48+
transition: opacity 0.2s;
49+
}
50+
51+
.logo:hover {
52+
opacity: 0.8;
53+
}
54+
55+
/* Google风格卡片 */
56+
.quotes {
57+
max-width: 1200px;
58+
margin: 32px auto;
59+
padding: 24px;
60+
}
61+
62+
.quote-card {
63+
background: rgba(255, 255, 255, 0.9);
64+
backdrop-filter: blur(5px);
65+
border-radius: 12px;
66+
padding: 24px;
67+
margin: 16px 0;
68+
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
69+
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
70+
}
71+
72+
.quote-card:hover {
73+
box-shadow: 0 8px 12px rgba(0,0,0,0.1);
74+
transform: translateY(-2px);
75+
}
76+
77+
/* 标题样式 */
78+
h2 {
79+
color: #202124;
80+
font-size: 24px;
81+
font-weight: 500;
82+
margin: 32px 0 16px;
83+
}
84+
85+
/* Google风格按钮 */
86+
.dropdown-btn {
87+
background: rgba(255, 255, 255, 0.9);
88+
color: #8a297f;
89+
border: 1px solid #dadce0;
90+
border-radius: 24px;
91+
padding: 8px 24px;
92+
font-size: 14px;
93+
font-weight: 500;
94+
transition: all 0.2s;
95+
}
96+
97+
.dropdown-btn:hover {
98+
background: #ffffff;
99+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
100+
}
101+
102+
/* 响应式设计 */
103+
@media (max-width: 768px) {
104+
.quotes {
105+
padding: 16px;
106+
}
107+
108+
.quote-card {
109+
padding: 16px;
110+
}
111+
112+
#navbar {
113+
padding: 0 16px;
114+
}
115+
}
116+
117+
/* 保留原有动画效果 */
118+
.welcome-page {
119+
height: 60vh;
120+
display: flex;
121+
align-items: center;
122+
justify-content: center;
123+
text-align: center;
124+
}
125+
126+
.quote {
127+
font-size: 3rem;
128+
color: #202124;
129+
font-weight: 500;
130+
margin: 0;
131+
}
132+
</style>
133+
</head>
134+
135+
<body>
136+
<div id="navbar">
137+
<a href="./index.html" class="logo">田语</a>
138+
<div class="dropdown">
139+
<button class="dropdown-btn">关于</button>
140+
<!-- 下拉菜单保持原有结构 -->
141+
</div>
142+
</div>
143+
144+
<div class="welcome-page">
145+
<p class="quote" id="quote">田语</p>
146+
</div>
147+
148+
<div class="quotes">
149+
<h2>所有田语</h2>
150+
<!-- 示例卡片 -->
151+
<div class="quote-card">
152+
<p>"示例田语内容"</p>
153+
</div>
154+
<!-- 其他卡片结构类似 -->
155+
</div>
156+
157+
<!-- 其他元素保持不变 -->
158+
</body>
159+
</html>

0 commit comments

Comments
 (0)