写一个原神官网的静态页面
时间: 2024-06-09 07:07:42 浏览: 13
很抱歉,我是一名自然语言处理模型,无法编写网页代码。但是,以下是一个简单的原神官网静态页面的示例代码,供参考:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原神官网</title>
<style>
/* 样式表 */
body {
font-family: Arial, sans-serif;
margin: 0;
}
header {
background-color: #1f2933;
color: #fff;
padding: 20px;
text-align: center;
}
nav {
background-color: #fff;
border-bottom: 1px solid #ddd;
display: flex;
justify-content: space-between;
padding: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav ul li {
margin: 0 10px;
}
nav ul li a {
color: #1f2933;
text-decoration: none;
}
main {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
h1 {
font-size: 36px;
margin-bottom: 20px;
}
p {
font-size: 18px;
line-height: 1.5;
}
.hero-image {
background-image: url('https://cdn.genshin.mihoyo.com/website/2021/04/26/2021042618012376860.jpg');
background-size: cover;
background-position: center;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: #fff;
}
.hero-image h2 {
font-size: 72px;
margin: 0;
}
.hero-image p {
font-size: 36px;
margin: 0;
}
footer {
background-color: #1f2933;
color: #fff;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>原神官网</h1>
</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">角色</a></li>
<li><a href="#">剧情</a></li>
<li><a href="#">游戏玩法</a></li>
</ul>
<form action="#" method="get">
<input type="text" name="search" placeholder="搜索">
<button type="submit">搜索</button>
</form>
</nav>
<div class="hero-image">
<div>
<h2>欢迎来到原神</h2>
<p>开启你的冒险之旅</p>
</div>
</div>
<main>
<h1>原神介绍</h1>
<p>《原神》是由 miHoYo 开发的一款免费开放世界动作角色扮演游戏。玩家将扮演旅行家,前往名为提瓦特的世界冒险,探索这个被风神之眼神秘覆盖的大陆。在旅途中,玩家将遇到各种各样的人物,并与他们一起组成队伍,共同探索这个神秘的世界。玩家可以通过打怪升级、收集材料升级武器等方式提升自己的实力,挑战更高难度的副本和世界boss。</p>
</main>
<footer>
<p>© 2021 原神官网</p>
</footer>
</body>
</html>
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)