CSS Hover 를 이용한 깔끔한 페이징 > html

<style type="text/css">
ul {
 list-style:none;
 float:left;
 display:inline;
}
ul li {
 float:left;
}
ul li a {
 float:left;
 padding:4px;
 margin-right:3px;
 width:15px;
 color:#000;
 font:bold 12px tahoma;
 border:1px solid #eee;
 text-align:center;
 text-decoration:none;
}
ul li a:hover, ul li a:focus {
 color:#fff;
 border:1px solid #f40;
 background-color:#f40;
}
</style>

 

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