有图小站

关注电脑网络,记录健康生活。有图小站,价值分享。

当前位置: 首页 > 网络 > 美化你的zblog分页样式

美化你的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 转载请保留。





上一篇:联想笔记本 IdeaPad Y430 驱动下载
下一篇:zblog rss优化插件




版权所有 有图小站 关注 电脑 网络 软件 健康 豫ICP备12023314号