web页面常用分页效果

1、分页效果如下&＃xff1a;

代码实现&＃xff1a;

css样式实现&＃xff1a;

/* 分页 */
#pages .page-center{float: left;transform: translateX(100%);
}
#pages ul li{display:block;float:left;height:36px;text-align:center;line-height:36px;margin-right:5px;color:#a9a9a9;
}
#pages ul li a , #pages ul li span{display:block;float:left;background:#fff;padding:0 15px;height:36px;text-align:center;line-height:36px;color:#a9a9a9;
}
#pages ul li span{background: #0068b7;color:#fff;
}
#pages ul li a:hover{background-color:#969696;color:#fff;
}
#pages ul .prev a{background:#fff url(../images/icons.png) no-repeat -52px -217px;
}
#pages ul .next a{background:#fff url(../images/icons.png) no-repeat -75px -247px;
}
#pages ul .prev a:hover{background-position:-76px -217px;
}
#pages ul .next a:hover{background-position:-50px -247px;
}