MENU

Typecho更好的翻页样式

• 2020 年 03 月 26 日 • Typecho

最近学习CSS小有心得,于是着手写了一个新的翻页样式,颜色我用了粉红色,就当是老夫聊发少年狂吧,不废话了,上干货。

用法

用下面的代码替换你的主题CSS里的翻页代码

/* Pagination */

.pagination {
  padding: 0;
  text-align: center;
}

.pagination li {
  display: inline-block;
  margin: 0 0.125em;
}

.pagination > li > a, .pagination > li > span {
  background: #ffffff;
  padding: 0.45rem 0.75rem;
  font-family: inherit;
  font-weight: 500;
  border-radius: 50px;
  color: #ec7d98;
  border: 1px solid #ec7d98;
  text-decoration: none;
  line-height: 2.5;
}

.pagination > li > a:hover, .pagination > li > span:hover {
  color: #d25372;
  border: 1px solid #d25372;
}

.pagination > li.active > a {
  color: #ffffff;
  background: #ec7d98;
  border: 1px solid #ec7d98;
}

.pagination > li.active > a:hover {
  background: #d25372;
  border: 1px solid #d25372;
}

首页代码

用下面代码替换你主题下index.php下的翻页(记得替换分类)

<?php $this->pageNav('&laquo;', '&raquo;', 1, '…', array('wrapTag' => 'ul', 'wrapClass' => 'pagination', 'itemTag' => 'li', 'textTag' => 'span', 'currentClass' => 'active', 'prevClass' => 'prev', 'nextClass' => 'next')); ?>

一句话

颜色不喜欢可以自行更换,改CSS下代码即可,建议粉红色,毕竟很浪,这个颜色我对比了好久才确定下来的。

最后编辑于: 2020 年 05 月 30 日
添加新评论

已有 1 条评论
  1. 使用后电脑上可以显示,但是手机端不显示CSS效果

0:00