見縫插針遊戲—界面
*{
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;
}
見縫插針小遊戲
效果圖：
這裡需要注意的是： 一般情況下，如果我們要使一個div在父元素中水平居中顯示，我們會給它設置一個寬度，然後設置margin: 0 auto; 但這個屬性只有在div的display為block或者默認情況下才會有效果。但是在某些必需的情況下, 我們給div設置了display為inline-block的情況下, 發現使用margin來讓其居中這個方法行不通. 那麼此時解決的方法就是: 給該元素的父元素添加樣式 text-align: center, 這樣的話該元素就可以實現水平居中了.
圖片素材： 圖片名稱分別為:11.png 、play.png
後記：對於大部分轉行的人來說，找機會把自己的基礎知識補齊，邊工作邊補基礎知識，真心很重要。
"我們相信人人都可以成為一個IT大神，現在開始，選擇一條陽光大道，助你入門，學習的路上不再迷茫。這裡是北京尚學堂，初學者轉行到IT行業的聚集地。"
閱讀更多 小菜鳥學前端 的文章
