body,
ul,
li {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
.box {
  width: 400px;
  height: auto;
  margin: 50px auto 0;
}
.box ul {
  width: 100%;
  overflow: hidden;
  padding: 0 3px 3px 0;
}
.box li {
  float: left;
  width: 37px;
  height: 37px;
  line-height: 37px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  background: #888;
  border: 3px double #000;
  margin: 0 -3px -3px 0;
  color: #f00;
}
.box div {
  margin-top: 8px;
}
.box div span {
  color: #00f;
  font-weight: bold;
}
.box div strong {
  color: #f00;
}
.box .qi,
.box .lei {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}
.box .lei {
  background-image: url(../images/lei.jpg);
}
.box .qi {
  background-image: url(../images/qi.jpg);
}
.box .none {
  background: #ccc;
}