博客里自带的分页数字太小了!很难看清而且有时还会点错，于是想着如何修改一下让使它变得好看、更方便。在zblog官方论坛查看了一些贴子，终于看到了一个自已比较喜欢的，修改成功后将方法贴在这里分享给大家。
下面介绍一下过程。
首先修改template下的b_pagebar.html，把
<a href="<#pagebar/page/url#>">[<#pagebar/page/number#>]</a>
改为
<a href="<#pagebar/page/url#>"><#pagebar/page/number#></a>
去掉两个中括号，我要做成按钮的形式，加上会很难看。
然后修改博客的样式文件，我的样式叫yilong.CSS，在style目录下。z-blog的分页链接预留了一个class叫pagebar，但是默认的模版没有写出来，所以要添加一个class。在CSS中，class引用的样式用“.”标识，id引用的用“#”标识。
先定义pagebar的整体样式，这里定义为高度20px，行高20px：
.pagebar{
line-height:20px;
height:20px
}
然后定义链接和当前页的样式：
.pagebar a,.pagebar .now-page{
padding:1px 5px 2px 5px;
margin:0 2px;
text-align:center;
font-weight:bold;
font-family:verdana;
border:1px solid #ccc;
text-decoration:none
}
这里把.pagebar a和.pagebar .now-page一起定义，定义多个用半角逗号分隔，padding后面依次为上、右、下、左的填充大小。margin后面的0为上下间距，2px为左右间距，如果把左右间距设为0的话，所有链接会挨个连在一起，不好看。text-align设定文字的对齐方式为居中，font-weight设置文字为加粗，font-family设定字体为verdana，border设置边框为1像素，实线，颜色为#ccc， text-decoration设置文字的修饰为none，即没有任何修饰。
接下来添加鼠标停留在上面时的样式：
.pagebar a:hover{
border:1px solid #c00;
text-decoration:none
}
a:hover为鼠标停留时边框颜色变成红色#c00，文字不添加任何修饰，因为默认是鼠标停留文字出现下划线，这里用 text-decoration:none把下划线去掉。
全部样式为：
.pagebar{
line-height:20px;
height:20px
}
.pagebar a,.pagebar .now-page{
padding:1px 5px 2px 5px;
margin:0 2px;
text-align:center;
font-weight:bold;
font-family:verdana;
border:1px solid #ccc;
text-decoration:none
}
.pagebar a:hover{
border:1px solid #c00;
text-decoration:none
}
本文来源于飞月博客 http://www.flymoonblog.cn/blog/ , 原文地址：http://www.flymoonblog.cn/blog/post/145.html
