main.css

#game_container {
  width: 460px;
  height: 460px;
  margin: auto;
  background-color: bisque;
}

#game_header div {
  float: left;
  line-height: 0;
  font-size: 0;
  background-image: url('sprite100.gif');
}

#mines_count {
  width: 39px;
  height: 23px;
  margin-left: 6px;
  margin-top: 4px;
  margin-bottom: 5px;
  background-color: aquamarine;
  float: left;
}

#time {
  width: 39px;
  height: 23px;
  margin-right: 6px;
  margin-top: 4px;
  margin-bottom: 5px;
  background-color: aquamarine;
  float: right;
}

#header_face {
  margin-top: 3px;
  margin-bottom: 3px
}

.face_smile {
  background-position: 0 -55px;
  width: 26px;
  height: 26px
}

div#game_container div {
  float: left;
}

div#mines_count div {
  background-image: url('sprite100.gif');
  width: 13px;
  height: 23px;
  float: left;
}

div#time div {
  background-image: url('sprite100.gif');
  width: 13px;
  height: 23px;
  float: left;
}

div#board_left div {
  background-image: url('sprite100.gif');
}

div#board_right div {
  background-image: url('sprite100.gif');
}

.time0 {
  background-position: 0 0;
}

.time1 {
  background-position: -13px 0;
}

.time2 {
  background-position: -26px 0;
}

.time3 {
  background-position: -39px 0;
}

.time4 {
  background-position: -52px 0;
}

.time5 {
  background-position: -65px 0;
}

.time6 {
  background-position: -78px 0;
}

.time7 {
  background-position: -91px 0;
}

.time8 {
  background-position: -104px 0;
}

.time9 {
  background-position: -117px 0;
}

#board_container {
  width: 460px;
  height: 460px;
  padding: 0px;
  margin: 0px auto;
  border-radius: 2px;
  /* position: fixed; */
}

.cell {
  width: 16px;
  height: 16px;
  background-color: aquamarine;
  border-radius: 4;
  float: left;
  text-align: center;
  background-image: url('sprite100.gif');
  background-position: 0px -39px;
}

/* 地雷 */
.cell_m {
  background-position: -64px -39px;
}

/* 踩雷 */
.cell_x {
  background-position: -32px -39px;
}

/* 标记 */
.cell_p {
  background-position: -16px -39px;
  /* background-position: 0px -23px; */
}

.cell_p_err {
  background-position: -32px -39px;
}

.cell_preview {
  background-position: 0px -23px;
}

.cell_d0 {
  background-position: 0px -23px;
}

.cell_d1 {
  background-position: -16px -23px;
}

.cell_d2 {
  background-position: -32px -23px;
}

.cell_d3 {
  background-position: -48px -23px;
}

.cell_d4 {
  background-position: -64px -23px;
}

.cell_d5 {
  background-position: -80px -23px;
}

.cell_d6 {
  background-position: -96px -23px;
}

.cell_d7 {
  background-position: -110px -23px;
}

.cell_d8 {
  background-position: -126px -23px;
}

.border_tl {
  background-position: 0 -81px;
  width: 10px;
  height: 10px
}

.border_tr {
  background-position: -10px -81px;
  width: 10px;
  height: 10px
}

.border_tb {
  background-image: url('sprite100.gif');
  background-position: -40px -81px;
  width: 16px;
  height: 10px
}

.border_bl {
  background-image: url('sprite100.gif');
  background-position: -20px -81px;
  width: 10px;
  height: 10px
}

.border_br {
  background-image: url('sprite100.gif');
  background-position: -30px -81px;
  width: 10px;
  height: 10px
}

.border_lr {
  background-position: -134px -39px;
  width: 10px;
  height: 16px
}

.border_lr_long {
  background-position: -134px -39px;
  width: 10px;
  height: 32px
}