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

　　分页导航一般由包裹直接跳转链接(上一页、下一页和页码)的容器盒子，包裹表单提交(提交指定的页码进行跳转指定的页面)的容器盒子组成。

　　先来看看直接跳转页码的HTML部分，我们需要一个包裹a链接的div盒子，如下图：

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

　　CSS代码如下图：

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

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

　　CSS如下：

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

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

　　完整的效果如下图：

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

延伸阅读

• 如何才能成为一名专业的网页设计师?

  一个专业网站设计，自然需要找到专业的设计师来对网站进行设计，这样才能设计出让企业满意的网站，对网站的后期运营也是很有利的。可是作为一名专业的网站设计师，是需要满足一些条件的。到...

• 2020年企业网页设计模板的流行趋势

  在设计界有个名言是“时尚总是轮回的”，这句话同样适用于企业网页设计方面，经历过了扁平化设计、卡片式设计以及质感设计之后，你知道在2020年又流行的是什么风格的企业网页设计模板吗...

• 网页设计要多少钱？

  网页设计是现代互联网时代十分重要的一个环节，对于一个网站的成功与否起着至关重要的作用。那么，对于一个网站的设计，需要多少钱呢?这是许多人在进行网站建设时都会考虑的一个问题。接下...

• 移动端网页设计

  移动端网页设计是指专门为移动设备(如手机、平板等)设计和开发的网页。随着智能手机的普及和移动互联网的发展，越来越多的用户使用移动设备上网，因此移动端网页设计愈发重要。在移动端网...

• 深度探析：从初探到高级应用的页面网页设计

  在当今互联网盛行的时代，页面网页设计已成为一个关键的组成部分。无论是企业、机构，还是个人品牌，一个好的页面设计可以为其带来显著的优势。但页面网页设计并不仅仅是关于视觉元素，它是...