DIV CSS居中分页代码纯css div布局居中的CSS分页排版代码

2014-05-22 17:22:56 div css分页排版代码,此居中分页效果为水平排版居中的，解决分页排版DIV CSS居中效果。非常简单实用的居中分页排版代码。

div css分页排版代码,此居中分页效果为水平排版居中的，解决分页排版DIV CSS居中效果。非常简单实用的居中分页排版代码。

本分页代码特点：
1、纯DIV+CSS实现排版布局。非常简单实用。
2、本分页排版为水平平分居中的布局。
3、分页“上一页”、“首页”、“1”、“2”、“3”、“4”、“尾页”等数字均有边框。
4、鼠标悬停时，对应分页文字或数字背景变化。
5、没有超链接的文字灰色并有边框。

DIV CSS网页分页排版
DIV+CSS布局的水平居中的分页布局效果

完整HTML（DIV+CSS）代码：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
<title>居中分页DIV CSS  HTML8在线案例演示</title> 
<style> 
a{ text-decoration:none} 
.ep-pages{padding:10px 12px;clear:both;text-align:center;
font-family:Arial, "\5B8B\4F53", sans-serif;font-size:14px;vertical-align:top} 
.ep-pages a, .ep-pages span{display:inline-block;height:23px;line-height:23px;padding:0 8px;
margin:5px 1px 0 0;background:#fff;border:1px solid #e5e5e5;overflow:hidden;vertical-align:top} 
.ep-pages a:hover{background:#cc1b1b;border:1px solid #cc1b1b;text-decoration:none} 
.ep-pages a, .ep-pages a:visited{color:#252525} 
.ep-pages a:hover, .ep-pages a:active{color:#ffffff} 
.ep-pages .current{background:#cc1b1b;border:1px solid #cc1b1b;color:#fff} 
.ep-pages a.current, .ep-pages a.current:visited{color:#ffffff} 
.ep-pages a.current:hover, .ep-pages a.current:active{color:#ffffff} 
.ep-pages-ctrl{font-family:"\5B8B\4F53", sans-serif;font-weight:bold;font-size:16px} 
.ep-pages-e5e5e5{color:#e5e5e5} 
.ep-pages-all{font-size:12px;vertical-align:top} 
 
</style> 
</head> 
<body> 
<div class="ep-pages"> 
    <span class="ep-pages-e5e5e5">首页</span> <span class="ep-pages-ctrl ep-pages-e5e5e5">&lt;</span>
 <a href="#" target="_self" class="current">1</a> <a href="#" target="_self">2</a> <a href="#" target="_self">3</a>
 <span>...</span> <a href="#" target="_self" class="ep-pages-ctrl">&gt;</a> <a href="#" target="_self">尾页</a>
 <a href="#" target="_self" class="ep-pages-all">在本页阅读全文</a> 
</div> 
 
</body> 
</html>

以上完整div css代码可以直接复制使用。

在线演示：查看案例

打包下载完整源代码：

立即下载（1.304KB）

DIV CSS居中分页代码 纯css div布局居中的CSS分页排版代码

DIV CSS居中分页代码纯css div布局居中的CSS分页排版代码