写一个html,模仿原神官网
时间: 2024-04-02 13:33:39 浏览: 62
用HTML写一个原神官网
好的,以下是一个简单的示例,你可以根据需要进行修改和完善:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原神官网</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
/* 设置导航栏、背景色和字体颜色 */
.navbar {
background-color: #fff;
color: #000;
}
/* 设置页面背景图片 */
body {
background-image: url("https://uploadstatic.mihoyo.com/ys-obc/20210331/1194937/6a6b27b5535f4f7f425d6c7c5d7d03c4_19367392914923281.jpg");
background-size: cover;
background-position: center;
font-family: Arial, sans-serif;
}
/* 设置主标题样式 */
.main-title {
font-size: 64px;
font-weight: bold;
text-align: center;
margin-top: 40px;
color: #fff;
text-shadow: 0 2px 4px rgba(0,0,0,.5);
}
/* 设置副标题样式 */
.sub-title {
font-size: 24px;
font-weight: bold;
text-align: center;
margin-top: 20px;
color: #fff;
text-shadow: 0 2px 4px rgba(0,0,0,.5);
}
/* 设置按钮样式 */
.btn-primary {
background-color: #e9c13f;
border-color: #e9c13f;
font-size: 20px;
font-weight: bold;
padding: 12px 24px;
margin-top: 40px;
box-shadow: none;
}
/* 设置按钮悬停样式 */
.btn-primary:hover {
background-color: #d4b02c;
border-color: #d4b02c;
box-shadow: none;
}
/* 设置图标样式 */
.icon {
font-size: 48px;
margin-top: 40px;
color: #e9c13f;
}
/* 设置介绍文字样式 */
.intro {
font-size: 24px;
font-weight: bold;
color: #fff;
text-shadow: 0 2px 4px rgba(0,0,0,.5);
margin-top: 40px;
margin-bottom: 20px;
text-align: center;
}
/* 设置介绍图片样式 */
.intro-img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
margin-top: 20px;
}
/* 设置底部样式 */
.footer {
background-color: #000;
color: #fff;
padding: 20px;
font-size: 14px;
text-align: center;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">原神</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">游戏介绍</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">新闻资讯</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">社区互动</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h1 class="main-title">原神</h1>
<h2 class="sub-title">探索,冒险,相遇</h2>
<a href="#" class="btn btn-primary">开始游戏</a>
<i class="icon fas fa-chevron-down"></i>
<p class="intro">原神是一款开放世界冒险游戏,让你在华丽的大陆上探索,冒险,相遇。</p>
<img src="https://uploadstatic.mihoyo.com/ys-obc/20210120/1194937/67f1a15e267bfa9e744947b8d3886f5a_46523081416835363.jpg" class="intro-img">
<p class="intro">在这里,你可以收集各种角色,探索神秘的大陆,完成任务和挑战,与其他玩家交流互动。</p>
</div>
<footer class="footer">
<p>版权所有 © miHoYo Limited 2021</p>
</footer>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.min.js"></script>
</body>
</html>
```
注意:以上代码只是一个简单的示例,如果需要更加完善的官网界面,需要根据实际需要进行修改和完善。
阅读全文