两页html动漫静态网页
时间: 2023-11-29 22:47:21 浏览: 43
以下是两页HTML动漫静态网页的示例:
第一页:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动漫静态网页-第一页</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
.header {
background-color: #333;
color: #fff; padding: 20px;
text-align: center;
}
.nav {
background-color: #666;
color: #fff;
padding: 10px;
text-align: center;
}
.content {
background-color: #fff;
padding: 20px;
text-align: center;
}
.footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>动漫静态网页-第一页</h1>
</div>
<div class="nav">
<a href="#">首页</a>
<a href="#">动漫介绍</a>
<a href="#">动漫推荐</a>
<a href="#">联系我们</a>
</div>
<div class="content">
<h2>动漫介绍</h2>
<p>这里是动漫静态网页的第一页,用于介绍动漫相关内容。</p>
<img src="https://picsum.photos/400/300" alt="动漫图片">
</div>
<div class="footer">
<p>版权所有 © 2021 动漫静态网页</p>
</div>
</body>
</html>
```
第二页:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动漫静态网页-第二页</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
.header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
.nav {
background-color: #666;
color: #fff;
padding: 10px;
text-align: center;
}
.content {
background-color: #fff;
padding: 20px;
text-align: center;
}
.footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>动漫静态网页-第二页</h1>
</div>
<div class="nav">
<a href="#">首页</a>
<a href="#">动漫介绍</a>
<a href="#">动漫推荐</a>
<a href="#">联系我们</a>
</div>
<div class="content">
<h2>动漫推荐</h2>
<p>这里是动漫静态网页的第二页,用于推荐一些好看的动漫。</p>
<ul>
<li>《进击的巨人》</li>
<li>《火影忍者》</li>
<li>《海贼王》</li>
<li>《刀剑神域》</li>
</ul>
</div>
<div class="footer">
<p>版权所有 © 2021 动漫静态网页</p>
</div>
</body>
</html>
```