/* *是通配符，给所有元素去年默认样式 */
*{
  padding: 0;
  margin: 0;
  border: 0;
}

/* 根据浏览器屏幕大小自动适配 */
body{
  width: 100%;
  height: 100%;
}

/* 设置容器DIV的最小尺寸：620 x 450 */
#container{
  position: relative;
  width: 620px;
  height: 450px;
  margin: 0 auto;
  margin-top: 100px;
  border-radius: 1px;
}

/* 游戏区DIV */
#game{
  position: absolute;
  width: 450px;
  height: 450px;
  border-radius: 5px;
  display: inline-block;
  background-color: #ffe171;
  box-shadow: 0 0 10px #ffe171;
}

/* 小方块 */
#game div{
  position: absolute;
  width: 149px;
  height: 149px;
  box-shadow: 1px 1px 2px #777;
  background-color: #20a6fa;
  color: white;
  text-align: center;
  font-size: 150px;
  line-height: 150px;
  cursor: pointer;
  -webkit-transition: 0.3s;
     -moz-transition: 0.3s;
      -ms-transition: 0.3s;
       -o-transition: 0.3s;
          transition: 0.3s;
}

/* 控制区 */
#control{
  width: 150px;
  height: 450px;
  display: inline-block;
  float: right;
}

/* 控制区按钮 */
#control rowspan{
  height: 25px;
  font-size: 20px;
  color: #222;
  margin-top: 10px;
}

/* start按钮 */
#start{
  display: inline-block;
  font-size: 28px;
  width: 100px;
  height: 28px;
  background-color: #20a6fa;
  color: #ffe171;
  text-shadow: 1px 1px 2px #ffe171;
  border-radius: 5px;
  box-shadow: 2px 2px 5px #4c98f5;
  text-align: center;
  cursor: pointer;
}

/* reset按钮  */
#reset{
  display: inline-block;
  font-size:28px;
  width: 100px;
  height: 28px;
  background-color: #20a6fa;
  color: #ffe171;
  text-shadow: 1px 1px 2px #ffe171;
  border-radius: 5px;
  box-shadow: 2px 2px 5px #4c98f5;
  text-align: center;
  cursor: pointer;
}

#d1{
  left: 0px;
}

#d2{
  left: 150px;
}

#d3{
  left: 300px;
}

#d4{
  top: 150px;
  left: 0px;
}

#d5{
  top: 150px;
  left: 150px;
}

#d6{
  top: 150px;
  left: 300px;
}

#d7{
  top: 300px;
}

#d8{
  top: 300px;
  left: 150px;
}