现在绝大□□部分公司□□□□都有很多□□产品、新闻或文◉章之类的□□信息需要□□□展示在网▲站上，而一个信□□□息列表展◆示页面不□□□□宜过长，往往这时□□□□候就要用▼到分页导□□□□航了；分页导航□□□有很多好□□□处，用户可以□□□□快速跳过●一些不想◆看的信息，便于定位□□和查找；减少页面□□□大小，提高加载□□□页面的加□□载速度。

分页导航□□□□一般由包□□裹直接跳□□□□转链接（上一页、下一页和□□页码）的容器盒□□□子，包裹表单◎提交（提交指定□□□□的页码进□□□□行跳转指□□□定的页面）的容器盒□□□子组成。
先来看看★直接跳转□□□页码的HTML部分，我们需要□□□一个包裹a链接的div盒子，如下图：
 

这里我只□□显示4个页码直□□接跳转链□□□接，如果有需□□□要可以自□□□□行添加页□□□□码数量；接下来，我们需要□□□添加一些CLASS类名和CSS样式让页□□□码在一行□□内显示居▽中，有边框、间距、颜色和默□□□认的选中△状态，如下图：
 

CSS代码如下图：



表单提交□□的HTML的部分，需要填写□□□□跳转数的input和提交确✦认按钮；如下图：



用CSS来设置字□□□体大小、一行显示□□□和按钮颜□□□□色，如下图：



CSS如下：



然后将这◥两部分合□□□□并，只要在外□□□□面在包裹□□□一个DIV盒子即可HTML如下图：



将这两部□□分合并后□□□不是居中□□显示，所以我们□□□需要在最□□□外面的DIV盒子设置CSS如下图：



完整的效□□果如下图：

当数据比□□较多，超过一个□□页面显示□□□的时候，就需要使◥用到分页，所以分页◇显示在网站制作中是经常♦使用的，希望此文□□□可帮助大□□□家。