dabblet.css

/* 1tao笔试题 */
.mod ul, .mod li { padding:0;margin:0;list-style:none; }
.mod { 
  width:165px;
  padding:5px 0 0 5px;
  overflow:hidden;
  font-size:0;
  letter-spacing:-0.31em;
  *letter-spacing:normal;
  word-spacing:-0.43em;
}
.mod li {
  display:inline-block;
  *display:inline;
  zoom:1;
}
.mod a { 
  display:inline-block;
  *display:inline;
  zoom:1;
  width:50px;
  height:50px;
  margin:-5px 0 0 -5px;
  border:5px solid blue;
  line-height:50px;
  text-align:center;
  font-size:12px;
  text-decoration:none;
  letter-spacing:normal;
  word-spacing:normal;
  }
  
 .mod a:hover,
 .mod a:active {
   position:relative;
   z-index:1;
   border-color: red;
   -webkit-transition: border-color .5s;
      -moz-transition: border-color .5s;
       -ms-transition: border-color .5s;
           transition: border-color .5s;
 }

dabblet.html

<div class="mod">
<ul>
<li><a href="#1">1</a></li>
<li><a href="#2">2</a></li>
<li><a href="#3">3</a></li>
<li><a href="#4">4</a></li>
<li><a href="#5">5</a></li>
<li><a href="#6">6</a></li>
<li><a href="#7">7</a></li>
<li><a href="#8">8</a></li>
<li><a href="#9">9</a></li>
</ul>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}