HTML学习之翻页效果实现

原创 2016年08月30日 21:52:42
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            a{
                width: 17px;
                height: 20px;
                text-align: center;
                color: #2052a3;
                line-height: 20px;
                border: 1px solid #e0e1e2;
                text-decoration: none;
                display: inline-block;
                font: "宋体" 12px/20px;
            }

            .pageBtn{
                width: 64px;
            }
            a:hover,.select{
                background: #1f3a87;
                color: #fff;
            }
        </style>
    </head>
    <body>
        <div id="pagebox">
            <a href="" class="pageBtn">上一页</a>
            <a href="">1</a>
            <a href="">2</a>
            <a href="" class="select">3</a>
            <a href="">4</a>
            <a href="">5</a>
            <a href="">6</a>
            <a href="">7</a>
            <a href="">8</a>
            <a href="">9</a>
            <a href="" class="pageBtn">下一页</a>

    </body>
</html>

QQ阅读翻页效果推测

每一次翻页之后都会产生一个,推测按动前后按钮时采取的pre和next操作的结果是使得当前的content显示为none,而调用其前后的页面,将其原本为style="display:none,更改为 c...
  • u014507230
  • u014507230
  • 2015年04月27日 14:50
  • 435

html中翻书特效实现

本实例采用html5+CSS3,使用DIV布局,代码中加入了一些函数
  • u014687186
  • u014687186
  • 2014年07月05日 12:36
  • 740

纯CSS实现的3D翻页效果

CSS实现的3D翻页效果  我是三页翻页。 CSS代码如下:* { padding: 0; margin: 0; } body, html { height: 100%; } ...
  • CNZSWYMP
  • CNZSWYMP
  • 2017年07月17日 09:02
  • 326

2014-11-3Android学习------利用ViewFlipper实现滑动翻页的效果--------GIF动画实现

写一篇文章很辛苦啊!!! 转载请注明,联系请邮件nlp30508@qq.com 我学习Android都是结合源代码去学习,这样比较直观,非常清楚的看清效果,觉得很好,今天的...
  • u014737138
  • u014737138
  • 2014年11月06日 13:48
  • 733

Android 实现书籍翻页效果----升级篇

      自从之前发布了《Android 实现书籍翻页效果----完结篇 》之后,收到了很多朋友给我留言,前段时间由于事情较多,博客写得太匆忙很多细节地方没有描述清楚。所以不少人对其中的地方有不少不...
  • hmg25
  • hmg25
  • 2011年05月14日 14:42
  • 51121

js实现翻页效果

js实现翻页效果 转自:http://blog.csdn.net/redeagle_gbf/article/details/20044199 分页 ...
  • cai7095576
  • cai7095576
  • 2014年03月10日 20:21
  • 2112

css3实现web app翻页过度效果

最近在开发web app页面,要实现滑动翻页,一开始实现的效果是无任何过渡效果的,可是这样子的话页面会闪跳一下,用户体验非常不好。于是我们主管叫我用jquery mobile,可是用了这个库之后,问题...
  • u011011025
  • u011011025
  • 2015年06月29日 16:56
  • 2020

用纯CSS写的图片切换,翻页效果..

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-stric...
  • david286
  • david286
  • 2007年04月25日 13:04
  • 1014

web前端,实现上下翻页,支持鼠标滑动翻页h5+css+jq

源码下载:
  • zhaihaohao1
  • zhaihaohao1
  • 2015年10月01日 21:01
  • 3479

纯CSS3实现真实翻书效果

研读以下代码及其注释,让你轻松掌握如何用 纯CSS3实现真实翻书效果。 可以参考代码下的参考内容...
  • b954960630
  • b954960630
  • 2016年12月02日 13:36
  • 1653
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML学习之翻页效果实现
举报原因:
原因补充:

(最多只允许输入30个字)