代码：

<!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. Numpy系列（十三）- 文件IO

    NumPy提供了多种存取数组内容的文件操作函数.保存数组数据的文件可以是二进制格式或者文本格式.二进制格式的文件又分为NumPy专用的格式化二进制类型和无格式类型. 一,tofile()和fromfi ...

  2. Entity Framework入门教程（13)---EF中的高并发

    EF中的高并发 这里只介绍EF6中database-first开发方案的高并发解决方案,code-first开发方案中的高并发会在以后的EF CodeFirst系列中介绍. EF默认支持乐观并发:我们 ...

  3. CentOS7.2 设置静态ip

    先找到配置文件: [root@localhost bin]# cd /etc/sysconfig/network-scripts [root@localhost network-scripts]# l ...

  4. DirectX11 With Windows SDK--15 几何着色器初探

    前言 从这一部分开始,感觉就像是踏入了无人深空一样,在之前初学DX11的时候,这部分内容都是基本上跳过的,现在打算重新认真地把它给拾回来. DirectX11 With Windows SDK完整目录 ...

  5. OpenStack VS Kubernetes，谁是你心中的王者？

      当下云计算的领域里热度最高的两个项目,无疑是OpenStack和Kubernetes.如果云计算是一个风起云涌的江湖,毫不夸张的说OpenStack和Kubernetes就是江湖里的泰山北斗.Op ...

  6. 盒子显隐，伪类边框，盒子阴影,2d平面形变

    -盒子显隐 显隐的盒子尽量不影响其他盒子的布局 display:none; 消失的时候不占位置,显示的时候占位 opacity:0-1; 盒子透明度 overflow: hidden; 超出部分隐藏 ...

  7. 乘积型Sobolev不等式

    (Multiplicative Sobolev inequality). Let $\mu,\lambda$ and $\gamma$ be three parameters that satisfy ...

  8. jQuery实现获取选中复选框的值

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Jq ...

  9. 老师博客copy -高阶函数2

    新闻 管理   Py西游攻关之函数   一 函数是什么? 函数一词来源于数学,但编程中的「函数」概念,与数学中的函数是有很大不同的,具体区别,我们后面会讲,编程中的函数在英文中也有很多不同的叫法.在B ...

  10. 解决radio、select表单返回时，再次选择失效

    应用场景:我们在选择好radio跟select之后提交表单,返回历史记录时,再次选择,提交表单,发现提交的是上次表单选择的 解决办法:我们可以一进页面就给radio跟select的选项重置掉,因为,返 ...