王者荣耀英雄展示-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_61690708/article/details/127307068

本文通过HTML和CSS构建了一个王者荣耀英雄展示页面，每个英雄都有对应的图片和背景。点击英雄名称会显示相应的英雄海报。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看看成品吧：

直接上代码：

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>王者荣耀</title>
		<link rel="stylesheet" href="style.css" />
	</head>
	<body>
		<div id="box">
			<div id="box-1">
				<div id="box-1-1">
					<img src="img/王者.jpg" width="120" height="80" />
				</div>
				<div id="box-1-2">
					<ul>
						<li><a href="#box-2-1">孙策</a></li>
						<li><a href="#box-2-2">夏洛特</a></li>
						<li><a href="#box-2-3">达摩</a></li>
						<li><a href="#box-2-4">杨戬</a></li>
						<li><a href="#box-2-5">廉颇</a></li>
						<li><a href="#box-2-6">狄仁杰</a></li>
						<li><a href="#box-2-7">高渐离</a></li>
					</ul>
				</div>
			</div>
			<div id="box-2-1"></div>
			<div id="box-2-2"></div>
			<div id="box-2-3"></div>
			<div id="box-2-4"></div>
			<div id="box-2-5"></div>
			<div id="box-2-6"></div>
			<div id="box-2-7"></div>
		</div>
	</body>
</html>

css

* {
	margin: 0;
	padding: 0;
}

#box {
	width: 1100px;
	height: 700px;
	margin: 0 auto;
	border: 1px solid black;
	background: url(img/背景.jpg) no-repeat;
	background-size: 100% 100%;
	background-attachment: fixed;
}

#box-1 {
	width: 1100px;
	height: 100px;
	margin: 0 auto;
}

#box-1-1 {
	width: 150px;
	height: 100px;
	float: left;
	margin-left: 50px;
	padding-top: 10px;
	padding-left: 10px;
	box-sizing: border-box;
}

#box-1-2 {
	width: 800px;
	height: 100%;
	float: right;
	margin-right: 20px;
}
#box-2-1,#box-2-2,#box-2-3,#box-2-4,#box-2-5,#box-2-6,#box-2-7{
	display: none;
	width: 1000px;
	height: 560px;
	margin: 0 auto;
	border: 1px solid darkblue;
}
#box-2-1:target,#box-2-2:target,#box-2-3:target,#box-2-4:target,#box-2-5:target,#box-2-6:target,#box-2-7:target
{
	/* 可以和超链接一起使用做到点击超链接就播放不同的div */
	 display:block;
}
#box-2-1{
	background: url(img/孙策海报.jpg) no-repeat;
	background-size: 100% 100%;
	background-attachment: fixed;
}
#box-2-2{
	background: url(img/夏洛特海报.jpg) no-repeat;
	background-size: 100% 100%;
	background-attachment: fixed;
}
#box-2-3{
	background: url(img/达摩海报.jpg) no-repeat;
	background-size: 100% 100%;
	background-attachment: fixed;
}
#box-2-4{
	background: url(img/杨戬海报.jpg) no-repeat;
	background-size: 100% 100%;
	background-attachment: fixed;
}
#box-2-5{
	background: url(img/廉颇海报.jpg) no-repeat;
	background-size: 100% 100%;
	background-attachment: fixed;
}
#box-2-6{
	background: url(img/狄仁杰.jpg) no-repeat;
	background-size: 100% 100%;
	background-attachment: fixed;
}
#box-2-7{
	background: url(img/高渐离海报.jpg) no-repeat;
	background-size: 100% 100%;
	background-attachment: fixed;
}
ul{
	list-style-type:none;
	margin:0;
	padding:0;
	overflow:hidden;
}
li {
	float:left;
	margin-top: 10px;
}

a:link,a:visited {
	letter-spacing: 2px;
	display:block;
	width:110px;
	color: grey;
	text-align: center;
	padding-top: 25px;
	padding-bottom: 42px;
	box-sizing: border-box;
	text-decoration: none;
	text-transform: uppercase;
}
a:hover,a:active {
	/* background-color: paleturquoise;
	opacity: 0.4; */
	background-image: linear-gradient(to top,rgba(105,122,188,1) 0%, rgba(255,255,255,0) 100%);
	/* 三原色至渐变色 */
}

（素材来源均来自互联网，如有侵权请应该没有。）

（转载请@我！）