当前位置:  编程技术>WEB前端

代码实例之纯CSS代码实现翻页效果

    来源: 互联网  发布时间:2014-09-06

    本文导语:  纯CSS实现翻页效果,原理比较简单,书签配合隐藏。  dl { position:absolute; width:240px; height:170px; border:10px solid #eee; } dd { margin:0; width:240px; height:170px; overflow:hidden; } img { border:1px solid black ...

纯CSS实现翻页效果,原理比较简单,书签配合隐藏。 
dl { position:absolute; width:240px; height:170px; border:10px solid #eee; } dd { margin:0; width:240px; height:170px; overflow:hidden; } img { border:1px solid black } dt { position:absolute; right:3px; top:50px; } a { display:block; margin:1px; width:20px; height:20px; text-align:center; font:700 12px/20px "宋体",sans-serif; color:#fff; text-decoration:none; background:#666; border:1px solid #fff; filter:alpha(opacity=40); opacity:.4; } a:hover { background:#000 } 123
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
 
同样,举一反三,可以做出其他的翻页的效果。 

dl { position:absolute; width:240px; height:170px; border:10px solid #eee; } dd { margin:0; width:240px; height:170px; overflow:hidden; } dt { position:absolute; right:1px; } ul { margin:0; padding:0; width:260px; height:170px; list-style:none; background:url("/upload/2007322173320204.gif") no-repeat 75% 20px; border:1px solid #ccc } #b { background-position:75% center } #c { background-position:75% 86% } li { width:205px; height:27px; font:12px/27px "宋体",sans-serif; white-space:nowrap; overflow:hidden; } dt a { display:block; margin:1px; width:30px; height:56px; text-align:center; font:700 12px/55px "宋体",sans-serif; color:#fff; text-decoration:none; background:#666; } dt a:hover { background:orange } 新闻娱乐体育
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

    
 
 

您可能感兴趣的文章:

  • 使用libpcap读取tcpdump抓取的文件并解析c代码实例
  • java web start实例代码COPY不了,怎么办?
  • Python 3 Tkinter教程之事件Event绑定处理代码实例
  • 急需关于linux多线程的代码工程实例-高手请进啊
  • php session_id()函数介绍及代码实例
  • 调用常量还要实例化吗?看下面代码
  • .NET下 c#通过COM组件操作并导出Excel实例代码
  • JavaScript正则表达式之后向引用实例代码
  • java Servlet获取和设置cookie实例代码
  • java结束进程的实例代码
  • c++模板(template)常见用法代码实例
  • C#清空添加的txt文件的实例代码
  • HTML 基础知识教程及代码实例
  • C#递归题目实例代码
  • HTML 标准颜色值实例代码表
  • php生成excel列序号代码实例
  • 在Mysql上创建数据表实例代码
  • ImageView简单加载网络图片实例代码
  • 急!大家谁有类似visio的java实例或代码?
  • adnroid已安装应用中检测某应用是否安装的代码实例
  • php防止sql注入代码实例
  • 在LINUX下怎么用代码判断是否开启了3D效果
  • 超级连接的提示中换行效果实现代码
  • jQuery产品间断向下滚动效果核心代码
  • jquery Ajax 实现加载数据前动画效果的示例代码
  • 用css滤镜实现的文字描边效果的代码
  • CSS opacity - 实现图片半透明效果的代码
  • Android应用开发中模拟按下HOME键的效果(实现代码)
  • jQuery淡入淡出效果代码
  • CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
  • QQ空间顶部折页撕开效果示例代码
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • javascript 添加到收藏夹和书签代码示例
  • 在JBuilder中,为什么编写的代码中,当代码出现关键字时,后面的部分代码就移位了,当在有关键字的那些代码行进行选择时,也会出现鼠标位
  • Python GUI编程:tkinter实现一个窗口并居中代码
  • 为什么两行代码间不加入其他代码就崩溃,而加入了日志代码后就不崩溃?
  • JSP中清空cookie代码参考
  • 在ubuntu8.10 新立得中安装anjuta,为什么没有代码提示功能,怎么做才有,还有自动代码补全和代码提示有什么区别,
  • Python获取网页编码的方法及示例代码
  • 到底怎么样的代码算是有效代码?请教了。。
  • HTML网页中的html body onload自动跳转方法介绍及自动跳转代码示例
  • 如果要研究源代码以提高自己,哪一个开放源代码的软件比较合适?
  • php通过socket_bind()设置IP地址代码示例
  • linux源代码的时间函数源代码
  • boost库lexical_cast不同用法代码参考
  • gdb的时候代码 next显示的代码乱了
  • 通过javascript库JQuery实现页面跳转功能代码
  • 源代码!源代码!
  • HTML网页的Meta Refresh自动跳转方法介绍及Meta Refresh自动跳转代码示例
  • 哪位会使用代码保护工具WingGuard来保护java代码?
  • Linux c++虚函数(virtual function)简单用法示例代码
  • 如何得到C语言代码对应的汇编代码?
  • NET c#索引器(indexer)介绍及代码示例
  • RedHat Linux是开放源代码的吗?如何能看见它的源代码,如何进行修改?


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3