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

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

时间2024-05-23 08:06:03发布访客分类CMS浏览384
导读：我们有些时候再做Typecho CMS主题的时候，分页一般随手会使用默认系统自带的，但是有些时候确实比较枯燥，所以老蒋准备在以后有遇到合适的样式分页，以及有时间的时候，就整理常用且自认为好看的通用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}

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}

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

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

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

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

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

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

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

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

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

/**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分页 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分页 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分页 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;
}

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！


若转载请注明出处： 整理实用的Typecho分页样式和完整代码 方便实用
本文地址： https://pptw.com/jishu/666176.html
ZBLOG PHP程序可能用到的分页标签调用方法 java jframe类的使用方法是什么

游客 回复需填写必要信息
↑