用css+html+hs+响应式编写一个进击的巨人的网站
时间: 2024-01-14 20:03:46 浏览: 40
好的,我可以为您介绍如何使用 CSS、HTML 和 JavaScript 开发一个响应式的进击的巨人网站。
首先,我们需要编写 HTML 代码来构建网站的基本结构。以下是一个简单的 HTML 模板,您可以在其中添加您自己的内容:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>进击的巨人</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">角色介绍</a></li>
<li><a href="#">剧情梗概</a></li>
<li><a href="#">动画资讯</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
<h1>进击的巨人</h1>
</header>
<main>
<section class="hero">
<h2>英雄</h2>
<p>艾伦·耶格尔,一个普通的少年,他的生命因为巨人的袭击而发生了翻天覆地的变化。</p>
</section>
<section class="villain">
<h2>反派</h2>
<p>巨人,是人类的天敌,它们的出现带来了无尽的痛苦和灾难。</p>
</section>
<section class="supporting-characters">
<h2>配角</h2>
<ul>
<li>三笠·阿克曼</li>
<li>利威尔·阿尔敏</li>
<li>米卡·阿卡曼</li>
<li>...</li>
</ul>
</section>
</main>
<footer>
<p>版权所有 © 2021 进击的巨人官网</p>
</footer>
<script src="script.js"></script>
</body>
</html>
```
接下来,我们需要添加样式表来为网站添加样式。您可以在 `style.css` 文件中添加以下样式:
```css
/* 全局样式 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
/* 头部样式 */
header {
background-color: #1A1A1A;
color: #FFFFFF;
padding: 20px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: space-between;
}
nav li {
margin: 0 10px;
}
nav a {
color: #FFFFFF;
text-decoration: none;
}
nav a:hover {
color: #FFC107;
}
/* 主要内容样式 */
main {
padding: 20px;
}
.hero {
background-image: url('hero.jpg');
background-size: cover;
background-position: center;
color: #FFFFFF;
padding: 50px;
}
.villain {
background-image: url('villain.jpg');
background-size: cover;
background-position: center;
color: #FFFFFF;
padding: 50px;
}
.supporting-characters {
background-color: #F5F5F5;
padding: 20px;
}
/* 页脚样式 */
footer {
background-color: #1A1A1A;
color: #FFFFFF;
padding: 20px;
text-align: center;
}
/* 响应式样式 */
@media (max-width: 768px) {
header {
padding: 10px;
}
nav ul {
flex-direction: column;
align-items: center;
}
nav li {
margin: 10px 0;
}
.hero, .villain {
padding: 20px;
}
}
```
最后,我们需要添加 JavaScript 代码来为网站添加交互性。以下是一个简单的示例,当用户单击页脚时将显示一个警告框:
```javascript
// JavaScript 代码
const footer = document.querySelector('footer');
footer.addEventListener('click', function() {
alert('进击的巨人官网,版权所有!');
});
```
这就是使用 CSS、HTML 和 JavaScript 开发一个响应式的进击的巨人网站的基本步骤。当然,还有很多其他的设计和功能可以添加,但这应该足以让您开始构建自己的网站了。