代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>翻页</title>

    <style type="text/css">

        .pagenation{

            list-style: none;

            margin:0;

            padding:0;

            width:600px;

            height:40px;

            border:1px solid #000;

            font-size:0; /* 取消间隙 */

            text-align:center;

        }

        .pagenation li{

            display:inline-block;

            height:26px;

            /*background-color: gold;*/

            font-size:12px;

            margin-top:7px; /* 设置水平居中 */

            margin-left:5px;  /* 设置左右间隙 */

        }

        .pagenation li a{

            display:block;

            height:26px;

            line-height:26px;

            padding:0 10px;

            text-decoration:none;

            font:normal 12px/26px "Microsoft YaHei";

            color:#000;

            background-color: gold;

        }

        .pagenation li a:hover{

            color:#fff;

            background-color:red;

        }

    </style>

</head>

<body>

<!-- 规范的做法还是用ul、li  -->

<ul class="pagenation">

    <li><a href="#">上一页</a></li>

    <li><a href="#">2</a></li>

    <li><a href="#">3</a></li>

    <li><a href="#">4</a></li>

    <li><span>...</span></li>

    <li><a href="#">17</a></li>

    <li><a href="#">18</a></li>

    <li><a href="#">19</a></li>

    <li><a href="#">20</a></li>

    <li><a href="#">下一页</a></li>

</ul>

</body>

</html>

页面效果：

css 制作翻页布局的更多相关文章

  1. css实现翻页效果

    如图,鼠标移动到图上,实现右上角翻页的效果,本例主要border边框的设置. 一.基本概念 <html> <head> <style> #demo{ width:0 ...

  2. 使用ScrollRect制作翻页

    1.标准的层级结构 ScrollRect->ViewPort->Content,Viewport负责显示区域的大小一般和Mask一起配合使用,Content使用Layout来布局,如果想使 ...

  3. css 制作导航条布局

    代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  4. [Qt] CFlip 翻页功能实现

    由于需要给table制作翻页功能,所以写了一个翻页的类. 看上去总体效果感觉还是不错的,哈哈. //flip.h #ifndef CFLIP_H #define CFLIP_H #include &l ...

  5. flex布局构建大屏框架并支持翻页动画、滚动表格功能

      本文将利用flex属性构建大屏可视化界面.界面主要分标题栏.工具栏.数据可视化窗口.其中,翻页动画以及滚动表格功能分别分布在数据可视化界面两侧. 鼠标点击标题,可看到左侧窗口翻转动画: 整体布局效 ...

  6. 简单3D翻页相册制作教程

    3D效果看起来总是要比平面的图形看起来视觉效果要好的多,今天来教大家制作简单的3D翻页效果的视频. 视频预览链接:https://v.youku.com/v_show/id_XMzgxOTY5NzQz ...

  7. css翻页样式

    /*=======================翻页样式===========================*/.pages { width: 660px; text-align: center; ...

  8. HTML5开发的翻页效果实例

    简介2010年F-i.com和Google Chrome团队合力致力于主题为<20 Things I Learned about Browsers and the Web>(www.20t ...

  9. 颗粒翻页（css3效果展示）

    用css3效果做了一个颗粒翻页效果,布局上,一张图片做底层,在这张图片上用js创建一层小的行和列各为r和c的小span,给这些span分别设置background-position:用来覆盖原来的一张 ...

随机推荐

  1. 2018年秋季学期《c语言程序设计》学习总结

    <c语言程序设计>第四周学习总结 <c语言程序设计>第五周学习总结 <c语言程序设计>第六周学习总结 <c语言程序设计>第七周学习总结 <c语言程 ...

  2. Fiddler--Composer

    Composer选项卡支持手动构建和发请求:也可以在Session列表中拖拽Session放到Composer中,把该Session的请求复制到用户界面: 点击"execute"按 ...

  3. JS异步加载的三种方案

    js加载的缺点:加载工具方法没必要阻塞文档,个别js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载. 一.def ...

  4. MySQL学习笔记（六）MySQL8.0 配置笔记

    今天把数据库配置文件修改了,结果重启不了了 需要使用 mysqld --initialize 或 mysqld --initialize-insecure 命令来初始化数据库 1.mysqld --i ...

  5. BZOJ-2308 小z的袜子(莫队)

    题目链接 题意 $n$点$m$次询问区间内随机取两个数是相同数的概率 思路 莫队入门题,对询问按块排序后更新答案,复杂度$O(n\sqrt{n})$ 代码 //#pragma comment(link ...

  6. Find K Closest Elements

    Given a sorted array, two integers k and x, find the k closest elements to x in the array. The resul ...

  7. HDR拍照

    HDR 拍照:        (High Dynamic Range Imaging)高动态范围成像,是用来实现比普通数字图像技术更大曝光动态范围(即更大的明暗差别)的一组技术.高动态范围成像的目的就 ...

  8. 【原创】大数据基础之Kudu（1）简介、安装、使用

    kudu 1.7 官方:https://kudu.apache.org/ 一 简介 kudu有很多概念,有分布式文件系统(HDFS),有一致性算法(Zookeeper),有Table(Hive Tab ...

  9. 【原创】运维基础之Zabbix（1）简介、安装、使用

    zabbix 4 官方:https://www.zabbix.com/ 一 简介 Monitor anythingSolutions for any kind of IT infrastructure ...

  10. 【原创】大叔问题定位分享（17）spark查orc格式数据偶尔报错NullPointerException

    spark查orc格式的数据有时会报这个错 Caused by: java.lang.NullPointerException at org.apache.hadoop.hive.ql.io.orc. ...