2048游戏探索（一）：标题布局部分

 

分析：

标题由三部分组成：

2048——<h1>

new game——<a>

score——<p>

同时，作为标题，需要一个<header>标签。

html结构如下：

<header>
<h1>2048</h1>
<a id="newgamebutton">New Game</a>
<p>score:<span id="score">0</span></p>
</header>

接下来是css部分。

首先，标题部分应该是居中并且独占一行，且文字居中，则<header>标签如下：

header{
   display:block;
   margin:0 auto;
   width:100%;
   text-align:center;
}

将标题2048和socre分别设置css如下：

header h1{
   font-family:Arial;
   font-size:40px;
   font-weight:bold;
}
header p{
   font-family:Arial;
   font-size:25px;
   margin:20px auto;
}

new game按钮首先需要的基本css如下：

header #newgamebutton{
   display:block;
   margin:20px auto;
   width:100px;
   padding:10px 10px;
   background-color:#8f7a66;
   font-family:Arial;
   color:white;
   border-radius:10px;//圆角边框
   text-decoration:none;//取出<a>标签的下划线
}

当鼠标指向时，new game 按钮颜色会改变，css如下：

header #newgamebutton：hover{
   background-color:#9f8b77;  
}

这样，标题栏的基本设计就完成了。