当前位置：老蒋部落 > 前端笔记 > Typecho > 正文

整理实用的Typecho分页样式和完整代码 方便实用

  • 老蒋 发布于 2020-07-30 17:40:59
  • 分类：Typecho

我们有些时候再做Typecho CMS主题的时候，分页一般随手会使用默认系统自带的，但是有些时候确实比较枯燥，所以老蒋准备在以后有遇到合适的样式分页，以及有时间的时候，就整理常用且自认为好看的通用Typecho分页，如果我们也有需要的话，那就使用上。

第一、默认主题自带演示

1、调用方式

<?php $this->pageNav('&laquo; 前一页', '后一页 &raquo;'); ?>

类似还有这种，可以限制展示的页面编码数量：

<?php $this->pageNav('上一页', '下一页', '5', '……'); ?>

这是默认Typecho分页调用方式。

2、调用样式

A - 官方默认

.page-navigator {
	list-style: none;
	margin: 25px 0;
	padding: 0;
	text-align: center;
}

.page-navigator li {
	display: inline-block;
	margin: 0 4px;
}

.page-navigator a {
	display: inline-block;
	padding: 0 10px;
	height: 30px;
	line-height: 30px;
}

.page-navigator a:hover {
	background: #EEE;
	text-decoration: none;
}

.page-navigator .current a {
	color: #444;
	background: #EEE;
}

B - 下划线样式

/**分页 整理 itbulu.com*/
.page-navigator {
 list-style:none;
 margin:10px 0 0;
 padding:0;
 text-align:center;
 font-size:.875em
}
.page-navigator li {
 display:inline-block;
 margin:0 4px
}
.page-navigator a {
 display:inline-block;
 padding:0 10px;
 height:30px;
 line-height:30px
}
.page-navigator a:hover {
 background:linear-gradient(#72b2aa,#72b2aa) bottom center no-repeat;
 background-size:100% 3px
}
.page-navigator .current a {
 color:#72b2aa
}

整理实用的Typecho分页样式和完整代码 方便实用 - 第1张

3、带背景的样式

.page-navigator {
 text-align:center;
 padding:20px 0 0
}
.page-navigator li {
 display:inline;
 margin:5px;
 border-radius:3px
}
.page-navigator li a {
 display:inline-block;
 padding:1px 5px;
 margin:3px;
 border-radius:3px
}
.page-navigator li.current,
.page-navigator li:hover {
 background-color:#27ae60;
 color:#fff
}
.page-navigator li a:hover {
 color:#fff
}

整理实用的Typecho分页样式和完整代码 方便实用 - 第2张

第二、上一页/下一页样式

这个样式我们也是比较常见的，比如我们看到有上一页和下一页的模式。

上一页：<?php $this->pageLink('上一页'); ?>

下一页：<?php $this->pageLink('下一页','next'); ?>

如果我们在评论模板上也需要修改的话，也是要对应修改一下。

上一页：<?php $comments->pageLink('上一页'); ?>

下一页：<?php $comments->pageLink('下一页','next'); ?>

第三、老蒋加工的一些分页样式

这里老蒋根据个人认为不错的样式，然后备用的分页样式。

整理实用的Typecho分页样式和完整代码 方便实用 - 第3张

/**Typecho分页 itbulu.com */
.page-navigator {
  list-style: none;margin: 25px 0;padding: 0;text-align: center;}
.page-navigator li {
  display: inline-block;
  PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center;
}
.page-navigator a {
  BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #eee 1px solid; COLOR: #036cb4; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid; TEXT-DECORATION: none;
}
.page-navigator a:hover {
  BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; BORDER-LEFT: #999 1px solid; COLOR: #666; BORDER-BOTTOM: #999 1px solid;
}
.page-navigator a:active {
  BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; BORDER-LEFT: #999 1px solid; COLOR: #666; BORDER-BOTTOM: #999 1px solid;
}
.page-navigator .current a {
  BORDER-RIGHT: #036cb4 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #036cb4 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #036cb4 1px solid; COLOR: #fff; PADDING-TOP: 2px; BORDER-BOTTOM: #036cb4 1px solid; BACKGROUND-COLOR: #036cb4;
}

整理实用的Typecho分页样式和完整代码 方便实用 - 第4张

/**Typecho分页 itbulu.com */
.page-navigator {
  list-style: none;margin: 25px 0;padding: 0;text-align: center;}
.page-navigator li {
  display: inline-block;
  PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center;
}
.page-navigator a {
  BORDER-RIGHT: #ddd 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ddd 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #ddd 1px solid; COLOR: #88af3f; MARGIN-RIGHT: 2px; PADDING-TOP: 2px; BORDER-BOTTOM: #ddd 1px solid; TEXT-DECORATION: none;
}
.page-navigator a:hover {
  BORDER-RIGHT: #85bd1e 1px solid; BORDER-TOP: #85bd1e 1px solid; BORDER-LEFT: #85bd1e 1px solid; COLOR: #638425; BORDER-BOTTOM: #85bd1e 1px solid; BACKGROUND-COLOR: #f1ffd6;
}
.page-navigator a:active {
  BORDER-RIGHT: #85bd1e 1px solid; BORDER-TOP: #85bd1e 1px solid; BORDER-LEFT: #85bd1e 1px solid; COLOR: #638425; BORDER-BOTTOM: #85bd1e 1px solid; BACKGROUND-COLOR: #f1ffd6;
}
.page-navigator .current a {
  BORDER-RIGHT: #b2e05d 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #b2e05d 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; BORDER-LEFT: #b2e05d 1px solid; COLOR: #fff; MARGIN-RIGHT: 2px; PADDING-TOP: 2px; BORDER-BOTTOM: #b2e05d 1px solid; BACKGROUND-COLOR: #b2e05d;
}

整理实用的Typecho分页样式和完整代码 方便实用 - 第5张

/**Typecho分页 itbulu.com */
.page-navigator {
  list-style: none;margin: 25px 0;padding: 0;text-align: center;}
.page-navigator li {
  display: inline-block;
  PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; MARGIN: 7px; PADDING-TOP: 2px; FONT-FAMILY: "Lucida Sans Unicode", "Lucida Grande", LucidaGrande, "Lucida Sans", Geneva, Verdana, sans-serif;
}
.page-navigator a {
  PADDING-RIGHT: 0.64em; PADDING-LEFT: 0.64em; PADDING-BOTTOM: 0.43em; MARGIN: 2px; COLOR: #fff; PADDING-TOP: 0.5em; BACKGROUND-COLOR: #ee4e4e; TEXT-DECORATION: none;
}
.page-navigator a:hover {
  PADDING-RIGHT: 0.64em; PADDING-LEFT: 0.64em; PADDING-BOTTOM: 0.43em; MARGIN: 2px; COLOR: #fff; PADDING-TOP: 0.5em; BACKGROUND-COLOR: #de1818;
}
.page-navigator a:active {
  PADDING-RIGHT: 0.64em; PADDING-LEFT: 0.64em; PADDING-BOTTOM: 0.43em; MARGIN: 2px; COLOR: #fff; PADDING-TOP: 0.5em; BACKGROUND-COLOR: #de1818;
}
.page-navigator .current a {
  PADDING-RIGHT: 0.64em; PADDING-LEFT: 0.64em; PADDING-BOTTOM: 0.43em; MARGIN: 2px; COLOR: #6d643c; PADDING-TOP: 0.5em; BACKGROUND-COLOR: #f6efcc;
}

整理实用的Typecho分页样式和完整代码 方便实用 - 第6张

/**Typecho分页 itbulu.com */
.page-navigator {
  list-style: none;margin: 25px 0;padding: 0;text-align: center;}
.page-navigator li {
  display: inline-block;
  PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center;
}
.page-navigator a {
  BORDER-RIGHT: #ddd 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ddd 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #ddd 1px solid; COLOR: #aaa; MARGIN-RIGHT: 2px; PADDING-TOP: 2px; BORDER-BOTTOM: #ddd 1px solid; TEXT-DECORATION: none;
}
.page-navigator a:hover {
  BORDER-RIGHT: #a0a0a0 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #a0a0a0 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #a0a0a0 1px solid; MARGIN-RIGHT: 2px; PADDING-TOP: 2px; BORDER-BOTTOM: #a0a0a0 1px solid;
}
.page-navigator a:active {
  BORDER-RIGHT: #a0a0a0 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #a0a0a0 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #a0a0a0 1px solid; MARGIN-RIGHT: 2px; PADDING-TOP: 2px; BORDER-BOTTOM: #a0a0a0 1px solid;
}
.page-navigator .current a {
  BORDER-RIGHT: #e0e0e0 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #e0e0e0 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; BORDER-LEFT: #e0e0e0 1px solid; COLOR: #aaa; MARGIN-RIGHT: 2px; PADDING-TOP: 2px; BORDER-BOTTOM: #e0e0e0 1px solid; BACKGROUND-COLOR: #f0f0f0;
}

总结，以后老蒋遇到其他的再整理。

投上你的一票

本文出处：老蒋部落 » 整理实用的Typecho分页样式和完整代码 方便实用 | 欢迎分享（ 公众号：老蒋朋友圈 ）

标签：
公众号 「老蒋朋友圈」获取站长新知 / 加QQ群 【1012423279】获取商家优惠推送

相关推荐

站内搜索

国外域名商

国外域名商

2021年常用国外域名注册商送隐私保护。国外域名注册商转出转入自自由适合外贸和个人建站需要。

虚拟主机商

虚拟主机商

精选国外TOP10虚拟主机商，适合个人和企业以及外贸建站，包括美国、香港、欧洲机房。

独立服务器商

独立服务器商

精选优秀独立服务器、多IP站群服务商，适合中高端业务项目和站群业务需要。

便宜VPS商

便宜VPS商

精选我们常用的便宜VPS主机商，相比虚拟主机而言VPS主机更为灵活和配置自定义强。

热门标签

关注我们

推荐文章