博客园 CodingLife 模板 翻页样式美化方法

博客园 CodingLife 模板 翻页样式美化方法

很喜欢这个模板，这个模板也是博客园人气最高的了吧。

但是它的翻页其实很有问题，当翻到第二页以后，翻页的样式让人用起来很不舒服。鼠标移上移出样式跳跃太大，给人一种好像样式有误的感觉。

所以我特地花时间美化了一下。

如果你恰好也是用这个模板的话，把以下代码复制一下，打开你的博客，然后到【设置】| 【页面定制CSS代码】这一栏中粘贴一下，就解决了。

然后预览看一下吧。

/* Banlieue13 导航栏美化
#navList {
min-height: 45px;
background: #C66767;
 80%;
}
#navigator a {
color: #000;
font-family: "verdana","ms song","宋体","Arial","微软雅黑", "Helvetica", "sans-serif";
font-size: 16pt;
font-weight:bold;
}*/

/*CodingLife模板 翻页美化*/
.topicListFooter .pager a:link,.topicListFooter .pager a:visited{
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: #169fe6;
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .09);
    -moz-box-shadow: 0 0 1px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .09);
    box-shadow: 0 0 1px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .09);
    height: 40px;
    line-height: 40px;
    margin-top: 0px;
    color: #fff;
    display: inline-block;
    padding: 0 15px;
    text-decoration: none;
    border: none
}
.topicListFooter .pager a:hover{
    background: #E86C74;
}
#nav_next_page a {
  background-color: #E86C74;
}
.topicListFooter {
  height:30px;
}
#homepage_top_pager.topicListFooter,#homepage1_HomePageDays_homepage_bottom_pager.topicListFooter {
  height: 68px;
}
#under_post_news {
  width: 848px;
  margin-left: 0px; 
}
#topics .postDesc a{
 margin:0 0.5em;
}