Skip to content

Commit 510fb45

Browse files
author
Coco Nalea
committed
Initial commit
0 parents  commit 510fb45

9 files changed

Lines changed: 99 additions & 0 deletions

File tree

‎public/img/background.jpg‎

2.86 MB
Loading

‎src/assets/styles/base.css‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/* 重置默认样式 */
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
}
7+
8+
:root {
9+
--primary-color: #3498db;
10+
--text-color: #333;
11+
--light-gray: #f5f5f5;
12+
}
13+
14+
body {
15+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16+
line-height: 1.6;
17+
color: var(--text-color);
18+
}
19+
20+
.container {
21+
width: 90%;
22+
max-width: 1200px;
23+
margin: 0 auto;
24+
padding: 2rem 0;
25+
}

‎src/assets/styles/layout.css‎

Whitespace-only changes.

‎src/assets/styles/theme.css‎

Whitespace-only changes.

‎src/components/footer.html‎

Whitespace-only changes.

‎src/components/header.html‎

Whitespace-only changes.

‎src/pages/about.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>我的静态网站</title>
8+
<!-- 引入基础样式 -->
9+
<link rel="stylesheet" href="../assets/styles/base.css">
10+
<link rel="stylesheet" href="../assets/styles/layout.css">
11+
<!-- 引入页头组件 -->
12+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
13+
</head>
14+
15+
<body>
16+
<!-- 动态插入页头 -->
17+
<div id="header"></div>
18+
19+
<main class="container">
20+
<section class="hero">
21+
<h1>欢迎访问我的网站</h1>
22+
<p>这是一个简洁、高效的静态网站范例</p>
23+
<a href="about.html" class="btn">了解更多</a>
24+
</section>
25+
26+
<section class="features">
27+
<div class="card">
28+
<i class="fas fa-bolt"></i>
29+
<h3>极速加载</h3>
30+
<p>基于纯HTML/CSS/JS，无后端依赖</p>
31+
</div>
32+
<div class="card">
33+
<i class="fas fa-mobile-alt"></i>
34+
<h3>响应式设计</h3>
35+
<p>适配手机、平板和桌面设备</p>
36+
</div>
37+
</section>
38+
</main>
39+
40+
<!-- 动态插入页脚 -->
41+
<div id="footer"></div>
42+
43+
<!-- 主JS脚本 -->
44+
<script src="../scripts/main.js"></script>
45+
</body>
46+
47+
</html>

‎src/pages/index.html‎

Whitespace-only changes.

‎src/scripts/main.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
// 动态加载组件
2+
document.addEventListener('DOMContentLoaded', () => {
3+
// 加载页头
4+
fetch('../components/header.html')
5+
.then(res => res.text())
6+
.then(html => {
7+
document.getElementById('header').innerHTML = html;
8+
setActiveNav();
9+
});
10+
11+
// 加载页脚
12+
fetch('../components/footer.html')
13+
.then(res => res.text())
14+
.then(html => {
15+
document.getElementById('footer').innerHTML = html;
16+
});
17+
});
18+
19+
// 设置当前导航激活状态
20+
function setActiveNav() {
21+
const currentPage = location.pathname.split('/').pop();
22+
document.querySelectorAll('nav a').forEach(link => {
23+
if (link.getAttribute('href') === currentPage) {
24+
link.classList.add('active');
25+
}
26+
});
27+
}

0 commit comments

Comments
 (0)