400-800-9385
网站建设资讯详细

如何解决网页CSS分页导航栏的问题

发表日期:2018-12-14 09:52:42   作者来源:方维网络   浏览:2583   标签:网页制作    
现在绝大部分公司都有很多产品、新闻或文章之类的信息需要展示在网站上,而一个信息列表展示页面不宜过长,往往这时候就要用到分页导航了;分页导航有很多好处,用户可以快速跳过一些不想看的信息,便于定位和查找;减少页面大小,提高加载页面的加载速度。

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

HTML代码

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

前端显示效果
CSS代码如下图:

CSS代码

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

HTML代码2

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

前端代码

CSS如下:

CSS代码2

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

HTML代码3

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

CSS代码

完整的效果如下图:

完整分页效果

当数据比较多,超过一个页面显示的时候,就需要使用到分页,所以分页显示在网站制作中是经常使用的,希望此文可帮助大家。
如没特殊注明,文章均为方维网络原创,转载请注明来自https://www.szfangwei.cn/news/4805.html
网页相关公司评论
  • 记者从云南哀牢山失联人员搜救指挥部获悉,在云南哀牢山野外作业时失联的4名中国地质调查局人员全部找到,均已遇难。Upw网页模板,帝国...
    宜昌网站搭建公司
  • 基本的网站建设流程涉及到各个方面,运营网站服务器、网站域名、网站策划、网站设计等,设计内容很多,但如果是基本步骤流程也有;网站建设是一个广义的术语,它涵盖了许多不同技能和学科中使用...
    漯河开发网站公司