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

更新时间：2007年03月22日 00:00:00 作者：

纯CSS实现翻页效果，原理比较简单，书签配合隐藏。

同样，举一反三，可以做出其他的翻页的效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">  <head profile="http://www.w3.org/2000/08/w3c-synd/#">  <meta http-equiv="content-language" content="zh-cn" />  <meta http-equiv="content-type" content="text/html;charset=gb2312" />  <style>  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("https://www.jb51.net/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   }  </style>  <head/>  <body>  <dl>  <dt><a href="#a" title="">新闻</a><a href="#b" title="">娱乐</a><a href="#c" title="">体育</a></dt>  <dd>  <ul id="a">   <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>   <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>   <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>   <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>   <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>   <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>  </ul>  <ul id="b">   <li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li>   <li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li>   <li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li>   <li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li>   <li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li>   <li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li>  </ul>  <ul id="c">   <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>   <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>   <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>   <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>   <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>   <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>  </ul>  </dd>  </dl>  </body>  </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

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

提高CSS文件可维护性的五种方法总结
当完成一项前端的工作之后，许多人都会忘记该项目的结构与细节。然而代码并不是马上就能完全定型，在余下的时间里还有不断的维护工作，而这些工作也许不会是你自己完成。所以，结构优良的代码能很大程度上优化它的可维护性。下面列出五种提高CSS文件可维护性的方法，也就是一种较好的CSS样式指南。
2008-05-05
DIV和CSS排版中制作细线条的方法小结
DIV和CSS排版中制作细线条的方法小结...
2007-09-09
XHTML下css+div布局总结超强推荐
XHTML下css+div布局总结超强推荐...
2006-12-12
CSS渐变文本效果的两种方法比较
是否想不用photoshop来创建一个带渐变的标题文字吗? 这里用一个简单的css技巧来向你展示如何仅仅使用css和png图片来制造这种效果.
2008-05-05
让超出DIV宽度范围的文字自动显示省略号...
关键是:text-overflow: ellipsis;
2008-10-10
html中CSS:hover选择器改变子元素、同级元素、就近元素的样式
鼠标悬浮覆盖元素后,以前使用js的mouseover和mouseout添加监听事件可以实现交互,现在可以使用CSS中的:hover选择器提高性能,:hover选择器可以针对不同的HTML元素,在鼠标悬停时改变元素（也可以是子元素、同级元素、就近元素）的样式,增强网页的互动性和用户体验,
2023-08-08
常用的DIV+CSS的基本框架结构但不推荐都放一个div里
常用的DIV+CSS的基本框架结构但不推荐都放一个div里...
2007-09-09
Web标准学习资源（书籍、网站）推荐
Web标准学习资源（书籍、网站）推荐...
2007-02-02
无js5款纯div+css制作的弹出菜单标准
无js5款纯div+css制作的弹出菜单标准...
2007-09-09
学习小实例--滚动条的简单实现
下面小编就为大家带来一篇学习小实例--滚动条的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具