代码：

<!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. SNMP学习——v3 VACM

    目录: ☆ SNMPv3视图访问控制模型    ☆ SNMPv3报文格式    ☆ VACM参数    ☆ Context Table    ☆ Security To Group Table     ...

  2. oldboy s21day06

    #!/usr/bin/env python# -*- coding:utf-8 -*- # 1.列举你了解的字典中的功能(字典独有).'''dic.keys() 获取所有keydic.values() ...

  3. MyEclipse 2015 Stable 2.0破解方法

    本篇博文简单介绍一下利用网上说明的方法破解MyEclipse 2015 Stable 2.0的具体细节.因为原来在贴吧上的方法不够详细,所以本人重新整理了一下.方法源自:http://tieba.ba ...

  4. QGE 在齐次 Besov 空间中的准则

    在 [Zhang, Zujin. On the blow-up criterion for the quasi-geostrophic equations in homogeneous Besov s ...

  5. C++创建对象的三种方法

    我自己以前经常弄混 A a(1); 栈内存中分配 A b = A(1); 栈内存中分配,和第一种无本质区别 A c = new A(1); 堆内存中分配 前两种在函数体执行完毕之后会被释放,第三种需要 ...

  6. 《java与模式》

    2012年3月 随笔档案 - java_my_life - 博客园--此网友 12年的博客都是和模式有关的,希望可以多看看.http://www.cnblogs.com/java-my-life/ar ...

  7. HTTP报错401和403详解及解决办法

    一.401: 1. HTTP 401 错误 - 未授权: (Unauthorized) 您的Web服务器认为,客户端发送的 HTTP 数据流是正确的,但进入网址 (URL) 资源 , 需要用户身份验证 ...

  8. 帆软报表（finereport）动态列查询

    新建普通报表,新建一个数据集ds1,sql语句:select * from 销量 设计模板:选择复选按钮组控件 设置  控件名称 paraed , 控件值设置为公式:["列名",& ...

  9. 帆软报表（finereport）图表——扇形图/等弧度的玫瑰图

    扇形图/等弧度的玫瑰图,展示的是展示数据所占的比例,需要所有数据的和加起来为1. 下面利用一个实例说明玫瑰图的用法和设置起始角度和终止角度,操作如下: 1.配置一个内置数据集 新增一个等弧度的玫瑰图模 ...

  10. 【原创】大数据基础之ElasticSearch（4）es数据导入过程

    1 准备analyzer 内置analyzer 参考:https://www.elastic.co/guide/en/elasticsearch/reference/current/analysis- ...