好的，我可以为您提供一个简单的示例。以下是一个简单的中国
历史发展过程网页：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>中国
历史发展过程</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
h1 {
text-align: center;
color: #990000;
}
nav {
background-color: #990000;
color: #fff;
padding: 10px;
margin-bottom: 30px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav li {
float: left;
margin-right: 10px;
}
nav li a {
display: block;
color: #fff;
text-align: center;
padding: 10px;
text-decoration: none;
}
nav li a:hover {
background-color: #fff;
color: #990000;
}
.container {
margin: 0 auto;
max-width: 800px;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.content {
margin-bottom: 30px;
}
.content h2 {
color: #990000;
}
.content p {
line-height: 1.5;
text-indent: 2em;
}
.content img {
max-width: 100%;
display: block;
margin: 0 auto;
}
.footer {
text-align: center;
color: #666;
font-size: 12px;
padding: 10px;
margin-top: 30px;
}
</style>
</head>
<body>
<header>
<h1>中国
历史发展过程</h1>
<nav>
<ul>
<li><a href="#prehistoric">史前时期</a></li>
<li><a href="#xia">夏朝</a></li>
<li><a href="#shang">商朝</a></li>
<li><a href="#zhou">周朝</a></li>
<li><a href="#qin">秦朝</a></li>
<li><a href="#han">汉朝</a></li>
<li><a href="#tang">唐朝</a></li>
<li><a href="#song">宋朝</a></li>
<li><a href="#yuan">元朝</a></li>
<li><a href="#ming">明朝</a></li>
<li><a href="#qing">
清朝</a></li>
</ul>
</nav>
</header>
<main>
<div class="container">
<div class="content" id="prehistoric">
<h2>史前时期</h2>
<p>...</p>
<img src="prehistoric.jpg" alt="史前时期">
</div>
<div class="content" id="xia">
<h2>夏朝</h2>
<p>...</p>
<img src="xia.jpg" alt="夏朝">
</div>
<div class="content" id="shang">
<h2>商朝</h2>
<p>...</p>
<img src="shang.jpg" alt="商朝">
</div>
<div class="content" id="zhou">
<h2>周朝</h2>
<p>...</p>
<img src="zhou.jpg" alt="周朝">
</div>
<div class="content" id="qin">
<h2>秦朝</h2>
<p>...</p>
<img src="qin.jpg" alt="秦朝">
</div>
<div class="content" id="han">
<h2>汉朝</h2>
<p>...</p>
<img src="han.jpg" alt="汉朝">
</div>
<div class="content" id="tang">
<h2>唐朝</h2>
<p>...</p>
<img src="tang.jpg" alt="唐朝">
</div>
<div class="content" id="song">
<h2>宋朝</h2>
<p>...</p>
<img src="song.jpg" alt="宋朝">
</div>
<div class="content" id="yuan">
<h2>元朝</h2>
<p>...</p>
<img src="yuan.jpg" alt="元朝">
</div>
<div class="content" id="ming">
<h2>明朝</h2>
<p>...</p>
<img src="ming.jpg" alt="明朝">
</div>
<div class="content" id="qing">
<h2>
清朝</h2>
<p>...</p>
<img src="qing.jpg" alt="
清朝">
</div>
</div>
</main>
<footer class="footer">
<p>版权所有 © 2021 中国
历史网</p>
</footer>
</body>
</html>
```
这个网页包括一个标题、一个导航栏、多个章节以及一个底部。每个章节都包括一个标题、一些文字描述和一张图片。导航栏链接到对应的章节，使用户可以方便地导航到感兴趣的部分。样式方面，使用了一些基本的CSS属性，如字体、颜色、背景色、边距等，以及一些布局技巧，如盒模型、浮动、清除浮动等。
556
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
