Skip to content

Commit de772eb

Browse files
CommandstoneCommandstone
authored
Create index.html
1 parent 8228c97 commit de772eb

File tree

1 file changed

+167
-0
lines changed

1 file changed

+167
-0
lines changed

‎blog/index.html‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>CST博客</title>
7+
<style>
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
}
13+
14+
body {
15+
background: linear-gradient(135deg, #ffeb3b, #4caf50);
16+
font-family: 'Segoe UI', Arial, sans-serif;
17+
line-height: 1.6;
18+
min-height: 100vh;
19+
}
20+
21+
nav {
22+
background: rgba(255, 255, 255, 0.9);
23+
padding: 1rem;
24+
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
25+
}
26+
27+
nav ul {
28+
display: flex;
29+
list-style: none;
30+
max-width: 1200px;
31+
margin: 0 auto;
32+
}
33+
34+
nav a {
35+
color: #2e7d32;
36+
text-decoration: none;
37+
padding: 0.5rem 1rem;
38+
transition: all 0.3s ease;
39+
}
40+
41+
nav a:hover {
42+
background: #f1f8e9;
43+
border-radius: 4px;
44+
}
45+
46+
.container {
47+
max-width: 1200px;
48+
margin: 2rem auto;
49+
padding: 0 1rem;
50+
}
51+
52+
.post-card {
53+
background: rgba(255, 255, 255, 0.9);
54+
border-radius: 10px;
55+
padding: 2rem;
56+
margin-bottom: 2rem;
57+
box-shadow: 0 3px 6px rgba(0,0,0,0.1);
58+
}
59+
60+
.post-date {
61+
color: #689f38;
62+
font-size: 0.9rem;
63+
margin-bottom: 0.5rem;
64+
}
65+
66+
footer {
67+
background: rgba(0, 0, 0, 0.8);
68+
color: white;
69+
text-align: center;
70+
padding: 1rem;
71+
position: fixed;
72+
bottom: 0;
73+
width: 100%;
74+
}
75+
76+
/* 关于页面样式 */
77+
.about-section {
78+
background: rgba(255, 255, 255, 0.9);
79+
border-radius: 10px;
80+
padding: 2rem;
81+
margin: 2rem auto;
82+
max-width: 800px;
83+
}
84+
85+
/* 联系表单样式 */
86+
.contact-form {
87+
background: rgba(255, 255, 255, 0.9);
88+
padding: 2rem;
89+
border-radius: 10px;
90+
max-width: 600px;
91+
margin: 2rem auto;
92+
}
93+
94+
input, textarea {
95+
width: 100%;
96+
padding: 0.5rem;
97+
margin-bottom: 1rem;
98+
border: 1px solid #ccc;
99+
border-radius: 4px;
100+
}
101+
102+
button {
103+
background: #4caf50;
104+
color: white;
105+
border: none;
106+
padding: 0.8rem 1.5rem;
107+
border-radius: 4px;
108+
cursor: pointer;
109+
}
110+
111+
button:hover {
112+
background: #45a049;
113+
}
114+
</style>
115+
</head>
116+
<body>
117+
<!-- 导航栏 -->
118+
<nav>
119+
<ul>
120+
<li><a href="#home">主页</a></li>
121+
<li><a href="#about">关于</a></li>
122+
<li><a href="#contact">联系</a></li>
123+
</ul>
124+
</nav>
125+
126+
<!-- 主页内容 -->
127+
<main class="container" id="home">
128+
<div class="post-card">
129+
<p class="post-date">2023年10月25日</p>
130+
<h2>我的第一篇博客文章</h2>
131+
<p>这里是博客文章的摘要内容，点击阅读更多查看完整文章...</p>
132+
<a href="#" style="color: #4caf50;">阅读更多 →</a>
133+
</div>
134+
135+
<div class="post-card">
136+
<p class="post-date">2023年10月24日</p>
137+
<h2>欢迎来到我的博客</h2>
138+
<p>这是我的第一篇博客文章，我将在这里分享我的想法和经验...</p>
139+
<a href="#" style="color: #4caf50;">阅读更多 →</a>
140+
</div>
141+
</main>
142+
143+
<!-- 关于页面 -->
144+
<section class="about-section" id="about">
145+
<h2>关于我</h2>
146+
<img src="https://via.placeholder.com/200" alt="头像" style="border-radius: 50%; margin: 1rem 0;">
147+
<p>我是一个热爱生活、喜欢分享的博主。在这里，我会记录我的学习历程、生活感悟和各种有趣的事物。</p>
148+
<p>关注我，一起探索美好的数字世界！</p>
149+
</section>
150+
151+
<!-- 联系页面 -->
152+
<section class="contact-form" id="contact">
153+
<h2>联系我</h2>
154+
<form>
155+
<input type="text" placeholder="姓名" required>
156+
<input type="email" placeholder="邮箱" required>
157+
<textarea rows="5" placeholder="留言内容" required></textarea>
158+
<button type="submit">发送消息</button>
159+
</form>
160+
</section>
161+
162+
<!-- 页脚 -->
163+
<footer>
164+
<p>© 2025 CST博客</p>
165+
</footer>
166+
</body>
167+
</html>

0 commit comments

Comments
 (0)