幽灵按钮—知识点:定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html,body{
margin: 0;
padding: 0;
/*width: 100%;
height: 100%;*/
background: black;
}
#box{
width: 930px;
height: 400px;
margin: 0 auto;
background: black;
}
#box div{
width: 300px;
height: 400px;
float: left;
/*background: gray;*/
}
#box_center,#box_right{
margin-left: 15px;
}
#box div i{
/*display:block 把行级元素转换为块级元素*/
display: block;
/*这里可以用百分比是因为父元素有固定的值*/
width: 100%;
height: 70%;
/*过渡时间 1.5s*/
transition: 1.5s;
}
.mission{
background: url(img/mission.png) no-repeat center;
}
.play{
background: url(img/play.png) no-repeat center;
}
.touch{
background: url(img/touch.png) no-repeat center;
}
.btn{
display: block;
color: whit