css实现的一个漂亮的分页样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS实现的一个漂亮分页按钮样式</title><style type="text/css">.pagination{ overflow:hidden; margin:0; padding:10px 10px 6px 10px; border-top:1px solid #f60; _zoom:1;}.pagination *{ display:inline; float:left; margin:0; padding:0; font-size:12px;}.pagination i{ float:none; padding-right:1px;}.currentPage b{ float:none; color:#f00;}.pagination li{ list-style:none; margin:0 5px;}.pagination li li{ position:relative; margin:-2px 0 0; font-family: Arial, Helvetica, sans-serif}.firstPage a,.previousPage a,.nextPage a,.lastPage a{ overflow:hidden; height:0; text-indent:-9999em; border-top:8px solid #fff; border-bottom:8px solid #fff;}.pagination li li a{ margin:0 1px; padding:0 4px; border:3px double #fff; +border-color:#eee; background:#eee; color:#06f; text-decoration:none;}.pagination li li a:hover{ background:#f60; border-color:#fff; +border-color:#f60; color:#fff;}li.firstPage{ margin-left:40px; border-left:3px solid #06f;}.firstPage a,.previousPage a{ border-right:12px solid #06f;}.firstPage a:hover,.previousPage a:hover{ border-right-color: #f60;}.nextPage a,.lastPage a{ border-left:12px solid #06f;}.nextPage a:hover,.lastPage a:hover{ border-left-color:#f60;}li.lastPage{ border-right:3px solid #06f;}li li.currentState a{ position:relative; margin:-1px 3px; padding:1px 4px; border:3px double #fff; +border-color:#f60; background:#f60; color:#fff;}li.currentState,.currentState a,.currentState a:hover{ border-color:#fff #ccc; cursor:default;}</style></head><body><ul title="分页列表"> <li title="首页">首页</a></li> <li title="前一页">前一页</a></li> <li> <ol> <li><a title="转到第1页" href="javascript:;">1</a></li> <li><a title="转到第2页" href="javascript:;">2</a></li> <li title="当前页"><a href="javascript:;">3</a></li> <li><a title="转到第4页" href="javascript:;">4</a></li> <li><a title="转到第5页" href="javascript:;">5</a></li> <li><a title="转到第6页" href="javascript:;">6</a></li> <li><a title="转到第7页" href="javascript:;">7</a></li> <li><a title="转到第8页" href="javascript:;">8</a></li> <li><a title="转到第9页" href="javascript:;">9</a></li> </ol> </li> <li title="后一页">后一页</a></li> <li title="尾页">尾页</a></i></ul></body></html>