前端分页页码静态部分制作

效果：

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>分页页码demo</title><style type="text/css">/*simple css reset*/*{margin:0px;padding:0px;}/*分页div面板样式*/.page-normal{color:#41B883;text-align:center;}/*所有分页页码的共同样式*/.page-normal a, .page-normal .page-current{border:1px solid #41B883;padding:5px 7px;text-decoration:none;}/*未选中的分页页码样式*/.page-normal a{color:#41B883;}/* 1. 选中的分页页码样式，即当前所在页面的页码* 2. 未选中的分页页码样式的鼠标滑过样式*/.page-normal .page-current, .page-normal a:hover{color:#FFF;background-color:#41B883;}</style></head><body><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><!--分页前端静态代码--><div class="page-normal"><a href="#">&nbsp;&lt;&nbsp;</a><a href="#">1</a><span>...</span><a href="#">7</a><a href="#">8</a><a href="#">9</a><span class="page-current">10</span><a href="#">11</a><a href="#">12</a><a href="#">13</a><span>...</span><a href="#">200</a><a href="#">&nbsp;&gt;&nbsp;</a></div>        </body>
</html>

参考资料：

慕课网视频传送门 http://www.imooc.com/learn/15

转载于:https://www.cnblogs.com/cc11001100/p/6352136.html

前端分页页码静态部分制作相关推荐

js实现前端分页页码管理
https://www.cnblogs.com/w-yong/p/6255444.html 本人已经成功实现分页,有问题欢迎交流,现在做一些补充:一下是我的: 说明一点:当前页和总页数是用作分页算 ...
分页页码的前端显示的实现
分页页码的前端显示实现效果说明准备做分页的时候滚回去找了一下之前写过的demo结果被自己写的丑哭了(大概长这样): 主要是不符合现在一般网站的跳转习惯,自己用着都觉得不方便,所以重新写了一下新的分 ...
Jquery前端分页插件pagination同步加载和异步加载
上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...
Web前端开发入门之网页制作三要素！
Web前端开发是由网页制作演变而来的,主要由HTML.CSS.JavaScript三大要素组成.专业的Web前端开发入门知识也一定会包含这些内容,今天小千就给大家简单介绍一下. HTML,超文本标记语 ...
纯JS前端分页方法（JS分页）
1.JS分页函数:开发过程中,分页功能一般是后台提供接口,前端只要传page(当前页码)和pageSize(每页最大显示条数)及对应的其他查询条件,就可以返回所需分页显示的数据. 但是有时也需要前端本 ...
java页面要素_Web前端入门技术之网页制作三要素
原标题:Web前端入门技术之网页制作三要素 Web前端技术开发是由网页制作演变而来的,主要由HTML.CSS.Java三大要素组成.专业的Web前端开发入门常识也必定会包含这些内容,今日千锋教师就给我 ...
一次性加载数据，前端分页
在项目中,前端显示数据的时候,很多地方需要用到分页,通常有两种方式: 一:点击页码的时候,ajax请求后台服务器得到每一页数据,然后在前台进行显示二:在页面加载,或者其他事件中,一次性将数据加载至前 ...
ajax前端分页实现
本来不打算重复造轮子的,网上也已经有了很多关于前端分页的框架,插件等等,但是还是打算写出来是因为前段时间有一个功能模块需要用到前端分页,然后找了很多框架,以及插件,发现其内容非常的复杂或者有的干脆就是 ...
#displaytag：一个简易的Java分页插件(无需其他的前端分页插件) @FDDLC
一.话题引入: 在开发一个某某系统时,经常要用到分页. 比如PageHelper,它是后端分页插件,如果要在前端展示分页效果,要么自己编写前端的分页逻辑,要么再上一个前端分页插件. 而displayt ...

前端分页页码静态部分制作

参考资料：

前端分页页码静态部分制作相关推荐

最新文章

热门文章