先看看成品吧:
直接上代码:
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%);
/* 三原色至渐变色 */
}
(素材来源均来自互联网,如有侵权请应该没有。)
(转载请@我!)