做了一天的英雄联盟的主页,分享一下代码
直接上代码吧
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
{<style type="text/css">
*{
margin:0 auto;
}
.div1{
height: 1000px;
background-image: url(img/bg-01.jpg);
background-position: center;
}
.div2{
background-image: url(img/bgl-01.jpg);
/*background-repeat: no-repeat;*/
height: 1000px;
width: 1380px;
}
.logo{
display: block;
position: absolute;
width:167px ;
height: 67px;
/*border: 1px solid red;*/
margin-left: -84px;
left:50%;
top:30px;
}
.logo:hover{
background-image: url(img/spr.png);
background-repeat: no-repeat;
background-position: -53px -30px;
transform: scale(1.05);
}
.play{
display: block;
position: absolute;
width: 71px;
height: 70px;
background-image: url(img/play.png);
left: 47%;
top: 390px;
margin-left: -40px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.play:hover{
transform: scale(1.05);
}
.btncontainer{
position: absolute;
height: 125px;
width: 100%;
left: 0;
bottom: -110px;
/*border: 1px solid red;*/
}
.btncontainer a{
display: block;
width: 287px;
height: 117px;
/*border: 1px solid black;*/
float: left;
background-image: url(img/spr.png);
}
.abt1{
background-position: -3px -284px;
margin-left: 300px;
}
.abt2{
background-position: -300px -135px;
/*margin-left: 50px;*/
}
.abt2:hover{
background-position: -300px -286px;
}
.btncontainer .abt3{
background-position:-585px -136px;
}
.btncontainer .abt3:hover{
background-position:-590px -283px;
}
.btncontainer .abt4{
background-position:-875px -136px;
}
.abt4:hover{
background-position:-875px -283px;
}
.bg2{
height: 4200px;
background-image: url(img/bg-02.jpg);
background-repeat: no-repeat;
background-position: center top;
}
.bg3{
background-image: url(img/bgl-02.jpg);
height: 4200px;
background-position: center;