CSS分頁簡潔樣式

iteye_7535發表於2011-03-02
CSS

pagination.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>CSS分頁</title>
    
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <link rel="stylesheet" type="text/css" href="pagination.css">

  </head>
  
  <body>
  	
  	<div class="pagination">
  		<a href="#">&lt;&lt;上一頁</a>
  		<a href="#">1</a>
  		<a href="#">2</a>
  		<a href="#">3</a>
  		<span class="elli_page">&hellip;</span>
  		<a href="#">10</a>
  		<span class="curr_page">11</span>
  		<a href="#">12</a>
  		<span class="elli_page">&hellip;</span>
  		<a href="#">18</a>
  		<a href="#">19</a>
  		<a href="#">下一頁&gt;&gt;</a>
  	</div>
  	
  </body>
</html>

 

 

pagination.css

/* ------------------------------ 分頁 ------------------------------ */

.pagination {
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
}

.pagination a, .pagination a:link, .pagination a:visited {
	margin: 0 5px 0 0;
	padding: 2px 5px 2px 5px;
	border: 1px solid #aaaadd;
	color: #006699;
	text-decoration: none;
}

.pagination span.curr_page {
	margin: 0 5px 0 0;
	padding: 2px 5px 2px 5px;
	font-weight: bold;
	color: #ffffff;
	border: 1px solid #006699;
	background-color: #006699;
}

.pagination a:hover, .pagination a:active {
	border: 1px solid #006699;
	color: #000000;
}

.pagination span.elli_page {
	margin: 0 5px 0 0;
	padding: 2px 5px 2px 5px;
}

 

 

 

效果：

----------------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------------

 

僅供學習！

相關文章