见缝插针游戏—界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>见缝插针小游戏</title>
<style>
*{
margin: 0;
padding: 0;
}
body,html{
width:100%;
height: 100%;
}
body{
background: url(11.jpg) no-repeat center;
}
h2{
font-size: 35px;
text-align: center;
margin-top: 150px;
letter-spacing: 2px;
}
.container{
text-align: center;
}
.play a{
margin-top: 50px;
text-align: center;
display: inline-block;
border: 1px #666 solid;
border-radius: 10px;
font-size:20px;
background: url(play.png) no-repeat center;
padding: 60px 25px 4px;
font-weight: bold;
text-decoration: none;
}
</style>
</head>
<body>
<div class="container">
<h2>见缝插针小游戏</h2>
<div class="play"><a href="#" id="go">关卡<span id="leavl">1</span></a></div>
</div>
</body>
</html>效果图：
这里需要注意的是：
一般情况下，如果我们要使一个div在父元素中水平居中显示，我们会给它设置一个宽度，然后设置margin: 0 auto; 但这个属性只有在div的display为block或者默认情况下才会有效果。但是在某些必需的情况下, 我们给div设置了display为inline-block的情况下, 发现使用margin来让其居中这个方法行不通. 那么此时解决的方法就是: 给该元素的父元素添加样式 text-align: center, 这样的话该元素就可以实现水平居中了.
图片素材：
图片名称分别为:11.png 、play.png
