用bootstrap写网易游戏官网页面
时间: 2023-07-04 14:31:08 浏览: 46
好的,我可以给您提供一个简单的例子,您可以根据自己的需求进行修改和完善。
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/4.5.3/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<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">
<li class="nav-item active">
<a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></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>
</nav>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">网易游戏</h1>
<p class="lead">为您提供最好玩的游戏和最优质的服务!</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="https://dummyimage.com/300x200/000/fff" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">游戏名称</h5>
<p class="card-text">游戏简介</p>
<a href="#" class="btn btn-primary">进入游戏</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="https://dummyimage.com/300x200/000/fff" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">游戏名称</h5>
<p class="card-text">游戏简介</p>
<a href="#" class="btn btn-primary">进入游戏</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="https://dummyimage.com/300x200/000/fff" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">游戏名称</h5>
<p class="card-text">游戏简介</p>
<a href="#" class="btn btn-primary">进入游戏</a>
</div>
</div>
</div>
</div>
</div>
<footer class="bg-light text-center text-lg-start">
<div class="container p-4">
<div class="row">
<div class="col-lg-6 col-md-12 mb-4 mb-md-0">
<h5 class="text-uppercase">网易游戏</h5>
<p>为您提供最好玩的游戏和最优质的服务!</p>
</div>
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">相关链接</h5>
<ul class="list-unstyled mb-0">
<li>
<a href="#!" class="text-dark">游戏</a>
</li>
<li>
<a href="#!" class="text-dark">新闻</a>
</li>
<li>
<a href="#!" class="text-dark">社区</a>
</li>
</ul>
</div>
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">联系我们</h5>
<ul class="list-unstyled mb-0">
<li>
<a href="#!" class="text-dark">电话:123456789</a>
</li>
<li>
<a href="#!" class="text-dark">邮箱:info@game.com</a>
</li>
</ul>
</div>
</div>
</div>
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
版权 © 2021 网易游戏
</div>
</footer>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
</body>
</html>
```
这是一个简单的网易游戏官网页面,包括导航栏、Jumbotron、游戏展示和页脚。使用Bootstrap可以大大简化页面的开发过程,代码中使用了Bootstrap提供的组件和样式,同时也使用了一些自定义的样式。您可以根据需要进行修改和完善,实现更加丰富的页面效果。