项目：见缝插针游戏——界面

2018-06-21 10:42·小菜鸟学前端

见缝插针游戏—界面

<!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

后记：对于大部分转行的人来说，找机会把自己的基础知识补齐，边工作边补基础知识，真心很重要。

"我们相信人人都可以成为一个IT大神，现在开始，选择一条阳光大道，助你入门，学习的路上不再迷茫。这里是北京尚学堂，初学者转行到IT行业的聚集地。"

举报
评论 0
    热门：