CSS分页简洁样式

最新推荐文章于 2021-06-08 20:22:20 发布

iteye_7535

最新推荐文章于 2021-06-08 20:22:20 发布

阅读量406

点赞数

分类专栏： CSS 文章标签： CSS HTML

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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;
}

效果：

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

仅供学习！

iteye_7535

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS分页简洁样式

pagination.html&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;&lt;html&gt; &lt;head&gt; &lt;title&gt;CSS分页&lt;/title&gt; &lt;meta http-equiv="content-ty
复制链接

扫一扫

专栏目录