CSS分页数字放大效果

<!–StartFragment–><style type="text/css">

.demo a {

float:left;

margin:5px 1px 0 1px;

width:20px;

height:20px;

color:#999;

font:12px/20px 宋体;

text-align:center;

text-decoration:none;

border:1px solid orange;

}

.demo a:hover {

position:relative;

margin:0 -9px 0 -9px;

padding:0 5px;

width:30px;

height:30px;

font:bold 16px/30px 宋体;

color:#000;

border:1px solid black;

background:#eee;

}

</style>

<div class="demo">

<a href="#">1</a>

<a href="#">2</a>

<a href="#">3</a>

<a href="#">4</a>

<a href="#">5</a>

<a href="#">6</a>

<a href="#">7</a>

<a href="#">8</a>

<a href="#">9</a>

<a href="#">10</a>

</div>

<p>

人生的路无需苛求。只要你迈步，路就在你的脚下延伸。