Skip to content

Commit e097bd3

Browse files
author
Coco Nalea
committed
first test
1 parent 3111886 commit e097bd3

7 files changed

Lines changed: 474 additions & 6 deletions

File tree

‎index.html‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>我的静态网站</title>
88
<!-- 引入基础样式 -->
9-
<link rel="stylesheet" href="../assets/styles/base.css">
10-
<link rel="stylesheet" href="../assets/styles/layout.css">
9+
<link rel="stylesheet" href="/src/assets/styles/base.css">
10+
<link rel="stylesheet" href="/src/assets/styles/layout.css">
1111
<!-- 引入页头组件 -->
1212
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
1313
</head>
@@ -20,7 +20,7 @@
2020
<section class="hero">
2121
<h1>欢迎访问我的网站</h1>
2222
<p>这是一个简洁、高效的静态网站范例</p>
23-
<a href="about.html" class="btn">了解更多</a>
23+
<a href="/src/pages/about.html" class="btn">了解更多</a>
2424
</section>
2525

2626
<section class="features">
@@ -34,14 +34,30 @@ <h3>极速加载</h3>
3434
<h3>响应式设计</h3>
3535
<p>适配手机、平板和桌面设备</p>
3636
</div>
37+
<div class="card">
38+
<i class="fas fa-paint-brush"></i>
39+
<h3>现代设计</h3>
40+
<p>简洁美观的界面设计</p>
41+
</div>
42+
</section>
43+
44+
<section class="content-section">
45+
<h2>我们的服务</h2>
46+
<p>我们提供专业的网站开发服务，包括：</p>
47+
<ul>
48+
<li>静态网站开发</li>
49+
<li>响应式设计</li>
50+
<li>性能优化</li>
51+
<li>SEO优化</li>
52+
</ul>
3753
</section>
3854
</main>
3955

4056
<!-- 动态插入页脚 -->
4157
<div id="footer"></div>
4258

4359
<!-- 主JS脚本 -->
44-
<script src="../scripts/main.js"></script>
60+
<script src="/src/scripts/main.js"></script>
4561
</body>
4662

4763
</html>

‎src/assets/styles/base.css‎

Lines changed: 229 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,246 @@
77

88
:root {
99
--primary-color: #3498db;
10+
--secondary-color: #2ecc71;
1011
--text-color: #333;
11-
--light-gray: #f5f5f5;
12+
--light-gray: rgba(245, 245, 245, 0.9);
13+
--dark-gray: #777;
14+
--content-bg: rgba(255, 255, 255, 0.85);
1215
}
1316

1417
body {
1518
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
1619
line-height: 1.6;
1720
color: var(--text-color);
21+
display: flex;
22+
flex-direction: column;
23+
min-height: 100vh;
24+
background: url('/public/img/background.jpg') no-repeat center center fixed;
25+
background-size: cover;
26+
}
27+
28+
/* 添加遮罩层确保文字可读性 */
29+
body::before {
30+
content: '';
31+
position: fixed;
32+
top: 0;
33+
left: 0;
34+
right: 0;
35+
bottom: 0;
36+
background-color: rgba(255, 255, 255, 0.3);
37+
z-index: -1;
1838
}
1939

2040
.container {
2141
width: 90%;
2242
max-width: 1200px;
23-
margin: 0 auto;
43+
margin: 2rem auto;
44+
padding: 2rem;
45+
flex: 1;
46+
background-color: var(--content-bg);
47+
border-radius: 8px;
48+
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
49+
}
50+
51+
/* 头部样式 */
52+
.site-header {
53+
background-color: white;
54+
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
55+
position: sticky;
56+
top: 0;
57+
z-index: 100;
58+
}
59+
60+
.header-container {
61+
display: flex;
62+
justify-content: space-between;
63+
align-items: center;
64+
padding: 1rem 5%;
65+
}
66+
67+
.logo a {
68+
font-size: 1.5rem;
69+
font-weight: bold;
70+
color: var(--primary-color);
71+
text-decoration: none;
72+
}
73+
74+
.main-nav ul {
75+
display: flex;
76+
list-style: none;
77+
}
78+
79+
.main-nav li {
80+
margin-left: 2rem;
81+
}
82+
83+
.main-nav a {
84+
text-decoration: none;
85+
color: var(--text-color);
86+
font-weight: 500;
87+
transition: color 0.3s;
88+
}
89+
90+
.main-nav a:hover,
91+
.main-nav a.active {
92+
color: var(--primary-color);
93+
}
94+
95+
.mobile-menu-btn {
96+
display: none;
97+
font-size: 1.5rem;
98+
cursor: pointer;
99+
}
100+
101+
/* 页脚样式 */
102+
.site-footer {
103+
background-color: var(--light-gray);
24104
padding: 2rem 0;
105+
margin-top: 2rem;
106+
}
107+
108+
.footer-container {
109+
display: flex;
110+
flex-wrap: wrap;
111+
justify-content: space-between;
112+
gap: 2rem;
113+
}
114+
115+
.footer-section {
116+
flex: 1;
117+
min-width: 200px;
118+
}
119+
120+
.footer-section h3 {
121+
margin-bottom: 1rem;
122+
color: var(--primary-color);
123+
}
124+
125+
.footer-section ul {
126+
list-style: none;
127+
}
128+
129+
.footer-section li {
130+
margin-bottom: 0.5rem;
131+
}
132+
133+
.footer-section a {
134+
text-decoration: none;
135+
color: var(--text-color);
136+
transition: color 0.3s;
137+
}
138+
139+
.footer-section a:hover {
140+
color: var(--primary-color);
141+
}
142+
143+
.contact-info i {
144+
margin-right: 0.5rem;
145+
color: var(--primary-color);
146+
}
147+
148+
.social-links {
149+
display: flex;
150+
gap: 1rem;
151+
margin-top: 1rem;
152+
}
153+
154+
.social-links a {
155+
font-size: 1.2rem;
156+
}
157+
158+
.copyright {
159+
text-align: center;
160+
margin-top: 2rem;
161+
padding-top: 1rem;
162+
border-top: 1px solid #ddd;
163+
color: var(--dark-gray);
164+
}
165+
166+
/* 关于页面样式 */
167+
.about-section h1 {
168+
margin-bottom: 1rem;
169+
color: var(--primary-color);
170+
}
171+
172+
.about-content {
173+
margin-bottom: 3rem;
174+
}
175+
176+
.about-content h2 {
177+
margin: 1.5rem 0 1rem;
178+
color: var(--secondary-color);
179+
}
180+
181+
.values-list {
182+
list-style: none;
183+
margin-top: 1rem;
184+
}
185+
186+
.values-list li {
187+
margin-bottom: 0.5rem;
188+
}
189+
190+
.values-list i {
191+
color: var(--secondary-color);
192+
margin-right: 0.5rem;
193+
}
194+
195+
.team-showcase h2 {
196+
margin-bottom: 2rem;
197+
color: var(--primary-color);
198+
}
199+
200+
.team-grid {
201+
display: grid;
202+
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
203+
gap: 2rem;
204+
}
205+
206+
.team-member {
207+
text-align: center;
208+
}
209+
210+
.member-photo {
211+
width: 150px;
212+
height: 150px;
213+
margin: 0 auto 1rem;
214+
border-radius: 50%;
215+
background-color: var(--light-gray);
216+
}
217+
218+
/* 响应式设计 */
219+
@media (max-width: 768px) {
220+
.main-nav {
221+
position: fixed;
222+
top: 70px;
223+
left: 0;
224+
width: 100%;
225+
background-color: white;
226+
box-shadow: 0 5px 5px rgba(0,0,0,0.1);
227+
max-height: 0;
228+
overflow: hidden;
229+
transition: max-height 0.3s ease-out;
230+
}
231+
232+
.main-nav.show {
233+
max-height: 300px;
234+
}
235+
236+
.main-nav ul {
237+
flex-direction: column;
238+
padding: 1rem;
239+
}
240+
241+
.main-nav li {
242+
margin: 0.5rem 0;
243+
}
244+
245+
.mobile-menu-btn {
246+
display: block;
247+
}
248+
249+
.footer-container {
250+
flex-direction: column;
251+
}
25252
}

‎src/assets/styles/layout.css‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
/* 卡片布局 */
2+
.card {
3+
background: var(--content-bg);
4+
border-radius: 8px;
5+
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
6+
padding: 1.5rem;
7+
transition: transform 0.3s, box-shadow 0.3s;
8+
backdrop-filter: blur(5px);
9+
}
10+
11+
.card:hover {
12+
transform: translateY(-5px);
13+
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
14+
}
15+
16+
.card i {
17+
font-size: 2rem;
18+
color: var(--primary-color);
19+
margin-bottom: 1rem;
20+
}
21+
22+
.card h3 {
23+
margin: 1rem 0;
24+
color: var(--primary-color);
25+
}
26+
27+
/* 按钮样式 */
28+
.btn {
29+
display: inline-block;
30+
background-color: var(--primary-color);
31+
color: white;
32+
padding: 0.8rem 1.5rem;
33+
border-radius: 4px;
34+
text-decoration: none;
35+
font-weight: 500;
36+
transition: all 0.3s;
37+
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
38+
}
39+
40+
.btn:hover {
41+
background-color: #2980b9;
42+
transform: translateY(-2px);
43+
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
44+
}
45+
46+
/* 英雄区域 */
47+
.hero {
48+
text-align: center;
49+
padding: 4rem 0;
50+
}
51+
52+
.hero h1 {
53+
font-size: 2.5rem;
54+
margin-bottom: 1rem;
55+
color: var(--primary-color);
56+
text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
57+
}
58+
59+
.hero p {
60+
font-size: 1.2rem;
61+
margin-bottom: 2rem;
62+
color: var(--text-color);
63+
}
64+
65+
/* 特性区域 */
66+
.features {
67+
display: grid;
68+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
69+
gap: 2rem;
70+
margin: 3rem 0;
71+
}
72+
73+
/* 错误提示 */
74+
.error {
75+
color: #e74c3c;
76+
padding: 1rem;
77+
text-align: center;
78+
background-color: var(--content-bg);
79+
border-radius: 4px;
80+
}

0 commit comments

Comments
 (0)