Skip to content

Commit a1e9863

Browse files
usiegeusiege
authored
Update index.html
1 parent d5a6bdb commit a1e9863

File tree

1 file changed

+91
-36
lines changed

1 file changed

+91
-36
lines changed

‎index.html‎

Lines changed: 91 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,80 @@
1+
12
<!DOCTYPE html>
23
<html lang="zh-CN">
34

45
<head>
56
<meta charset="UTF-8">
67
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>个人博客</title>
8+
<title>综合静态网页示例</title>
89
<style>
910
body {
1011
font-family: Arial, sans-serif;
1112
margin: 0;
1213
padding: 0;
13-
background-color: #f4f4f4;
1414
}
1515

16-
header {
16+
nav {
1717
background-color: #333;
1818
color: white;
19+
}
20+
21+
nav ul {
22+
list-style-type: none;
23+
margin: 0;
24+
padding: 0;
25+
display: flex;
26+
justify-content: center;
27+
}
28+
29+
nav ul li {
30+
padding: 15px;
31+
}
32+
33+
nav ul li a {
34+
color: white;
35+
text-decoration: none;
36+
}
37+
38+
header {
1939
text-align: center;
20-
padding: 20px;
40+
padding: 50px;
41+
background-color: #f0f0f0;
2142
}
2243

23-
main {
44+
section {
2445
padding: 20px;
25-
max-width: 800px;
46+
text-align: center;
47+
}
48+
49+
img {
50+
max-width: 100%;
51+
height: auto;
52+
margin: 20px 0;
53+
}
54+
55+
form {
56+
max-width: 400px;
2657
margin: 0 auto;
2758
}
2859

29-
article {
30-
background-color: white;
31-
border: 1px solid #ddd;
32-
padding: 20px;
33-
margin-bottom: 20px;
34-
border-radius: 5px;
60+
form label {
61+
display: block;
62+
margin-bottom: 5px;
3563
}
3664

37-
article h2 {
38-
margin-top: 0;
65+
form input,
66+
form textarea {
67+
width: 100%;
68+
padding: 10px;
69+
margin-bottom: 15px;
70+
border: 1px solid #ccc;
71+
border-radius: 3px;
3972
}
4073

41-
.meta {
42-
color: #777;
43-
font-size: 0.9em;
74+
form input[type="submit"] {
75+
background-color: #333;
76+
color: white;
77+
cursor: pointer;
4478
}
4579

4680
footer {
@@ -53,29 +87,50 @@
5387
</head>
5488

5589
<body>
56-
<!-- 博客头部 -->
90+
<!-- 导航栏 -->
91+
<nav>
92+
<ul>
93+
<li><a href="#">首页</a></li>
94+
<li><a href="#">关于我们</a></li>
95+
<li><a href="#">联系我们</a></li>
96+
</ul>
97+
</nav>
98+
99+
<!-- 头部 -->
57100
<header>
58-
<h1>我的个人博客</h1>
59-
<p>分享我的技术见解和生活感悟</p>
101+
<h1>欢迎来到我们的网站</h1>
102+
<p>探索更多精彩内容</p>
60103
</header>
61104

62-
<!-- 文章列表 -->
63-
<main>
64-
<article>
65-
<h2><a href="#">第一篇文章标题</a></h2>
66-
<p class="meta">发布于 <time datetime="2025-03-10">2025 年 3 月 10 日</time></p>
67-
<p>这是第一篇文章的简短摘要。在这里你可以简要介绍文章的主要内容，吸引读者点击阅读全文。</p>
68-
</article>
69-
<article>
70-
<h2><a href="#">第二篇文章标题</a></h2>
71-
<p class="meta">发布于 <time datetime="2025-03-09">2025 年 3 月 9 日</time></p>
72-
<p>这是第二篇文章的简短摘要。同样，你可以用几句话概括文章的核心要点。</p>
73-
</article>
74-
</main>
75-
76-
<!-- 博客页脚 -->
105+
<!-- 图片展示部分 -->
106+
<section>
107+
<h2>图片展示</h2>
108+
<img src="https://via.placeholder.com/800x400" alt="示例图片">
109+
</section>
110+
111+
<!-- 文本介绍部分 -->
112+
<section>
113+
<h2>关于我们</h2>
114+
<p>我们是一个充满激情的团队，致力于为用户提供高质量的服务和产品。我们拥有丰富的经验和专业的知识，能够满足不同客户的需求。</p>
115+
</section>
116+
117+
<!-- 表单部分 -->
118+
<section>
119+
<h2>联系我们</h2>
120+
<form>
121+
<label for="name">姓名:</label>
122+
<input type="text" id="name" required>
123+
<label for="email">邮箱:</label>
124+
<input type="email" id="email" required>
125+
<label for="message">留言:</label>
126+
<textarea id="message" required></textarea>
127+
<input type="submit" value="提交">
128+
</form>
129+
</section>
130+
131+
<!-- 页脚 -->
77132
<footer>
78-
<p>版权所有 &copy; 2025 你的名字</p>
133+
<p>版权所有 &copy; 2025 示例网站</p>
79134
</footer>
80135
</body>
81136

0 commit comments

Comments
 (0)