项目:见缝插针游戏——界面
见缝插针游戏—界面
!DOCTYPEhtml
htmllang="en"
head
metacharset="UTF-8"
title见缝插针小游戏/title
style
*{
margin:0;
padding:0;
}
body,html{
width:100%;
height:100%;
}
body{
background:url(11.jpg)no-repeatcenter;
}
h2{
font-size:35px;
text-align:center;
margin-top:150px;
letter-spacing:2px;
}
.container{
text-align:center;
}
.playa{
margin-top:50px;
text-align:center;
display:inline-block;
border:1px#666solid;
border-radius:10px;
font-size:20px;
background:url()no-repeatcenter;
padding:60px25px4px;
font-weight:bold;
text-decoration:none;
}
/style
/head
body
divclass="container"
h2见缝插针小游戏/h2
divclass="play"ahref=";source=search_tab"id="go"关卡spanid="leavl"1/span/a/div
/div
/body
/html
效果图:
这里需要注意的是:一般情况下,如果我们要使一个div在父元素中水平居中显示,我们会给它设置一个宽度,然后设置margin:0auto;但这个属性只有在div的display为block或者默认情况下才会有效果。但是在某些必需的情况下,我们给div设置了display为inline-block的情况下,发现使用margin来让其居中这个方法行不通.那么此时解决的方法就是:给该元素的父元素添加样式text-align:center,这样的话该元素就可以实现水平居中了.
图片素材:图片名称分别为:11.png、
后记:对于大部分转行的人来说,找机会把自己的基础知识补齐,边工作边补基础知识,真心很重要。
"我们相信人人都可以成为一个IT大神,现在开始,选择一条阳光大道,助你入门,学习的路上不再迷茫。这里是北京尚学堂,初学者转行到IT行业的聚集地。"