阴阳师HTML页面代码
时间: 2024-01-01 18:18:34 浏览: 80
以下是一个基于阴阳师风格的HTML页面的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>阴阳师页面</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<style>
body {
background-color: #fafafa;
font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
}
.navbar {
background-color: #1a1a1a;
color: #fff;
}
.navbar-brand {
font-size: 28px;
font-weight: bold;
letter-spacing: 2px;
text-shadow: 1px 1px 3px #333;
}
.nav-link {
font-size: 18px;
font-weight: bold;
letter-spacing: 1px;
}
.jumbotron {
background-image: url("https://i0.hdslb.com/bfs/article/1f3a0f3c3d8f0e65f83c1d7c825c2d7e4ebf1032.jpg");
background-size: cover;
background-position: center;
padding: 100px 0;
text-align: center;
color: #fff;
text-shadow: 1px 1px 3px #333;
}
.jumbotron h1 {
font-size: 64px;
font-weight: bold;
letter-spacing: 4px;
}
.jumbotron p {
font-size: 24px;
font-weight: bold;
letter-spacing: 2px;
margin-top: 40px;
}
.card {
margin-top: 80px;
border: none;
box-shadow: 1px 1px 3px #333;
background-color: #fff;
}
.card-header {
background-color: #1a1a1a;
color: #fff;
font-size: 24px;
font-weight: bold;
letter-spacing: 2px;
text-shadow: 1px 1px 3px #333;
}
.card-body {
padding: 40px;
font-size: 18px;
line-height: 28px;
text-align: justify;
}
.footer {
background-color: #1a1a1a;
color: #fff;
padding: 20px 0;
text-align: center;
}
.footer p {
font-size: 18px;
font-weight: bold;
letter-spacing: 1px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg">
<div class="container">
<a class="navbar-brand" href="#">阴阳师</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 ml-auto">
<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>
<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="jumbotron">
<h1>阴阳师</h1>
<p>以“人”和“妖”为棋子的和棋游戏</p>
</div>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">
游戏简介
</div>
<div class="card-body">
<p>《阴阳师》是一款以日本神话和传统民间故事为背景的RPG手游,游戏采用和棋玩法,玩家在游戏中扮演“阴阳师”,通过收集和培养“式神”来进行战斗。游戏画面精美,音乐优美,剧情引人入胜,深受玩家喜爱。</p>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p>© 2021 阴阳师. All Rights Reserved.</p>
<p>Powered by Bootstrap.</p>
</div>
</footer>
</body>
</html>
```
这个页面使用了Bootstrap的网格系统将内容居中显示,并且使用了阴阳师风格的样式。你可以将这段代码复制到一个HTML文件中并打开来查看效果。
阅读全文