美化你的zblog分页样式

Zblog是一款非常出色的独立博客程序，不过为了简洁和可扩展性，zblog官方默认模板并没有太多的优化设置，因为那样势必会增加代码量和影响速度。今天我们讨论一下如何修改zblog的底部分页代码，具体样式你就看有图的分页样式。

首先，我们进入后台，编辑你的模板css文件，默认的位置在：

themes —》 模板名称—》style—》模板名称.css

因为大家的zblog模板都不一样，所以大家在寻找css文件的时候要根据自己使用的模板名称而定。

使用查找，找到 “ div.pagebar ”，不管你的 div.pagebar 是什么样的，你可以将 div.pagebar 和 div.pagebar.now-page以及其他以div.pagebar开头的代码替换为下面的代码。

div.pagebar {
        float: left;
        text-align:left;
        width:600px;
        margin:10px 0 0 10px;
        padding:0;
        line-height:150%;
        font-size:14px;
}

div.pagebar .now-page {
        color: #000000;
        margin:0 0 0 2px;
        padding:0 3px 0 3px;
        font-weight:bold;
        text-decoration: none;
}

div.pagebar a {
        color: #000000;
        border:1px solid #ACACAC;
        margin:0 0 0 2px;
        padding:0 3px 0 3px;
        background:#FFFFFF;
}

div.pagebar a:visited {
        color: #000000;
        text-decoration: none;

}

div.pagebar a:hover {
        color: #FFFFFF;
        background:#A30736;
        text-decoration: none;
}

简单介绍一下，以便大家使用正常。首先看第一段代码：

div.pagebar {
        float: left;
        text-align:left;
        width:600px;
        margin:10px 0 0 10px;
        padding:0;
        line-height:150%;
        font-size:14px;
}

此段代码定义了我们分页文字所在区域的基本属性：

float定义分页所在区域向哪个方向对齐；
text-align定义分页文字的对齐方向；
width定了分页区域的宽度，如果你使用600太宽，破坏了页面结构，你可以选择400、500等窄一点的宽度；
margin定义了分页区域距离页面中其他的模块的距离，后面的四个数字分别指代：上、右、下、左；
font-size定义了这些分页文字有多大；

div.pagebar .now-page是定义当前页码数字的样式，color是定义颜色的（关于颜色主要是采用RGB色—6位16进制的数字来定义），font-weight定义了是否加粗

后面的 div.pagebar a 和后面的 a:visited 和 a:hover 代码区域主要是定义这些文字作为链接时的样式，visited 指已访问的页码样式，a:hover 是移动鼠标到达时显示什么样式；这里面涉及的代码中 border 是定义页码文字所在区域边框的样式，而 background 是定义所在区域颜色的。

保存你的修改之后，打开一个页面，或者刷新一下你已经打开的页面，是否会看到效果呢？如果你对区域的颜色、文字大小、边框粗细不满意，可以根据上文的提示来修改。

到这里，你可能还需要修改一个地方，让我们的分页数字变的更好看，找到下面的文件修改：

THEMES—》模板名称—》TEMPLATE—》b_pagebar.html

编辑 b_pagebar.html 文件，是否在代码中发现了[ ]这两个符号，可以去掉它，精简后的代码是：

<a href="<#pagebar/page/url#>"><#pagebar/page/number#></a>

如果你觉得纯数字不好看，你可以在<#pagebar/page/number#>的前后添加你所希望的字符即可。

今天我们暂时讨论到这里，更多的Zblog代码修改我们以后慢慢介绍给大家。

本文是 有图 原创，原地址 http://www.utosee.com/post/zblog-fenye.html 转载请保留。