请帮我写一个英雄联盟html静态网页
时间: 2023-08-28 21:48:40 浏览: 58
好的,以下是一个简单的英雄联盟HTML静态网页的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>英雄联盟</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #0066CC;
color: white;
padding: 10px;
text-align: center;
}
nav {
background-color: #003366;
color: white;
padding: 10px;
text-align: center;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
color: white;
text-decoration: none;
}
main {
padding: 20px;
}
h1 {
font-size: 36px;
margin-top: 0;
}
h2 {
font-size: 24px;
margin-top: 0;
}
p {
line-height: 1.5;
}
section {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
article {
width: 300px;
margin-bottom: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border-radius: 10px;
overflow: hidden;
}
article img {
width: 100%;
height: 200px;
object-fit: cover;
}
article h3 {
font-size: 20px;
margin: 10px;
}
article p {
margin: 10px;
}
</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>
<li><a href="#">社区互动</a></li>
</ul>
</nav>
<main>
<h2>最新英雄</h2>
<section>
<article>
<img src="https://img.18183.com/uploads/allimg/200817/70-200QG62127.jpg" alt="英雄1">
<h3>英雄1</h3>
<p>英雄1的描述。</p>
</article>
<article>
<img src="https://img.18183.com/uploads/allimg/200817/70-200QG62127.jpg" alt="英雄2">
<h3>英雄2</h3>
<p>英雄2的描述。</p>
</article>
<article>
<img src="https://img.18183.com/uploads/allimg/200817/70-200QG62127.jpg" alt="英雄3">
<h3>英雄3</h3>
<p>英雄3的描述。</p>
</article>
</section>
</main>
</body>
</html>
```
在这个示例中,头部包含一个标题,导航栏包含链接到不同页面的菜单。主体包含一个标题和一个包含最新英雄列表的区域。每个英雄都由一个包含图片、标题和描述的文章组成。这个示例使用Flexbox布局和一些CSS样式来使页面看起来更加美观。