纯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; } 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 } </style> </head> <body> <dl> <dt><a href="#a" title="">1</a><a href="#b" title="">2</a><a href="#c" title="">3</a></dt> <dd> <img src="http://www.blueidea.com/articleimg/2007/03/4549/1.jpg" alt="" title="" id="a" /> <img src="http://www.hackhome.com/uploadImages/2007-4-27/20074279364326611.jpg" alt="" title="" id="b" /> <img src="http://www.hackhome.com/uploadImages/2007-4-27/20074279364576501.jpg" alt="" title="" id="c" /> </dd> </dl> </body> </html> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
同样，举一反三，可以做出其他的翻页的效果。
运行代码框<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <br></li> <li style="text-align:center;"><FONT color=#ff0000>[1]</font> <a href="Article_94399_2.html">[2]</a> <a href="Article_94399_3.html">[3]</a> <a href="Article_94399_2.html">下一页</a> </li> <li> <script language="javascript"> function copypageurltitle() { var clipBoardContent=''; clipBoardContent =document.title; clipBoardContent+='\r\n'; clipBoardContent+=document.location; window.clipboardData.setData("Text",clipBoardContent); alert("标题和网址已经拷贝，请发给你QQ/Msn或者可以粘贴到论坛上和您的好友一起分享 ^_^ "); } </script> <button onClick="copypageurltitle();">复制本页网址和标题，发送给你QQ/Msn的好友一起分享</button><br> <br> <script src="../gg/end.js"></script> </li> <li class="title">纯CSS代码实现翻页 相关文章：</li> <li>·<a href="../InfoView/Article_94399.html" target="_blank" Title="纯CSS代码实现翻页">纯CSS代码实现翻页</a></li> <li>·<a href="../InfoView/Article_175683.html" target="_blank" Title="代码实例：纯CSS代码实现翻页">代码实例：纯CSS代码实现翻页</a></li> <li class="title">纯CSS代码实现翻页 相关软件</li> <p>上一篇:<a href="Article_94401.html" title="网页标准化制作：CSS的超级技巧大放送">网页标准化制作：CSS的超级技巧大放送</a></p> <p>下一篇:<a href="Article_94397.html" title="彻底弄懂CSS盒子模式（DIV布局快速入门）">彻底弄懂CSS盒子模式（DIV布局快速入门）</a></p> <li>特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作</li> <li>者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转</li> <li>载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com</li> </ul> </div> <div id="article_right" style="overflow:hidden;"> <h3>精品推荐</h3> <p align="center"><script src="../gg/all_150_60.js"></script></p> <h3><a href="../InfoList/Top_1.html" target="_blank">热点TOP10</a></h3> <div style="word-wrap:break-word;word-break:break-all;white-space:normal;"><ul> <li>·<a href="../InfoView/Article_175612.html" target="_blank" Title="DIV+CSS布局入门实例教程">DIV+CSS布局入门实例教程</a> </li> <li>·<a href="../InfoView/Article_8787.html" target="_blank" Title="创建一个纯CSS的水平导航条">创建一个纯CSS的水平导航条</a> </li> <li>·<a href="../InfoView/Article_94587.html" target="_blank" Title="设计一个基于CSS的网页模板">设计一个基于CSS的网页模板</a> </li> <li>·<a href="../InfoView/Article_94717.html" target="_blank" Title="Javascript+CSS横向三级导航菜单">Javascript+CSS横向三级导航菜单</a> </li> <li>·<a href="../InfoView/Article_175682.html" target="_blank" Title="站长推荐：53个CSS-不可或缺的技巧">站长推荐：53个CSS-不可或缺的技巧</a> </li> <li>·<a href="../InfoView/Article_94622.html" target="_blank" Title="如何使用CSS来进行网页排版">如何使用CSS来进行网页排版</a> </li> <li>·<a href="../InfoView/Article_94584.html" target="_blank" Title="CSS文本：word-wrap">CSS文本：word-wrap</a> </li> <li>·<a href="../InfoView/Article_94397.html" target="_blank" Title="彻底弄懂CSS盒子模式（DIV布局快速入门）">彻底弄懂CSS盒子模式（DIV布局快速入门）</a> </li> <li>·<a href="../InfoView/Article_94411.html" target="_blank" Title="网页设计基础:Div+CSS布局入门教程">网页设计基础:Div+CSS布局入门教程</a> </li> <li>·<a href="../InfoView/Article_9715.html" target="_blank" Title="CSS中的滑动门技术">CSS中的滑动门技术</a> </li> <li>·<a href="../InfoView/Article_175747.html" target="_blank" Title="使用CSS处理表格边框样式化">使用CSS处理表格边框样式化</a> </li> <li>·<a href="../InfoView/Article_178014.html" target="_blank" Title="DIV CSS网页布局导航菜单源代码(17)">DIV CSS网页布局导航菜单源代码(17)</a> </li> <li>·<a href="../InfoView/Article_95209.html" target="_blank" Title="CSS文本：text-overflow">CSS文本：text-overflow</a> </li> <li>·<a href="../InfoView/Article_151013.html" target="_blank" Title="总结：用CSS进行网页样式设计攻略全集">总结：用CSS进行网页样式设计攻略全集</a> </li> <li>·<a href="../InfoView/Article_94285.html" target="_blank" Title="DW MX 2004 CSS 属性详解">DW MX 2004 CSS 属性详解</a> </li> <li>·<a href="../InfoView/Article_184873.html" target="_blank" Title="小技巧：div+css高度自适应">小技巧：div+css高度自适应</a> </li> <li>·<a href="../InfoView/Article_95126.html" target="_blank" Title="如何用css设置网页字体">如何用css设置网页字体</a> </li> <li>·<a href="../InfoView/Article_95132.html" target="_blank" Title="如何用CSS定义表格与模拟表格">如何用CSS定义表格与模拟表格</a> </li> <li>·<a href="../InfoView/Article_33308.html" target="_blank" Title="使用纯 CSS 设计3D按钮">使用纯 CSS 设计3D按钮</a> </li> <li>·<a href="../InfoView/Article_95253.html" target="_blank" Title="深入了解CSS的继承性及其应用">深入了解CSS的继承性及其应用</a> </li> </ul> </div> <h3><a href="../InfoList/Hot_1.html" target="_blank">特别推荐</a></h3> <div style="word-wrap:break-word;word-break:break-all;white-space:normal;"><ul> <li>·<a href="../InfoView/Article_188554.html" target="_blank" Title="CSS网站布局技巧几则总结">CSS网站布局技巧几则总结</a> </li> <li>·<a href="../InfoView/Article_94397.html" target="_blank" Title="彻底弄懂CSS盒子模式（DIV布局快速入门）">彻底弄懂CSS盒子模式（DIV布局快速入门）</a> </li> <li>·<a href="../InfoView/Article_184872.html" target="_blank" Title="CSS样式设计之CSS滤镜资料小结">CSS样式设计之CSS滤镜资料小结</a> </li> <li>·<a href="../InfoView/Article_151013.html" target="_blank" Title="总结：用CSS进行网页样式设计攻略全集">总结：用CSS进行网页样式设计攻略全集</a> </li> <li>·<a href="../InfoView/Article_8787.html" target="_blank" Title="创建一个纯CSS的水平导航条">创建一个纯CSS的水平导航条</a> </li> <li>·<a href="../InfoView/Article_95126.html" target="_blank" Title="如何用css设置网页字体">如何用css设置网页字体</a> </li> <li>·<a href="../InfoView/Article_9715.html" target="_blank" Title="CSS中的滑动门技术">CSS中的滑动门技术</a> </li> <li>·<a href="../InfoView/Article_94717.html" target="_blank" Title="Javascript+CSS横向三级导航菜单">Javascript+CSS横向三级导航菜单</a> </li> <li>·<a href="../InfoView/Article_94584.html" target="_blank" Title="CSS文本：word-wrap">CSS文本：word-wrap</a> </li> <li>·<a href="../InfoView/Article_95088.html" target="_blank" Title="用CSS进行网页样式设计攻略全集">用CSS进行网页样式设计攻略全集</a> </li> <li>·<a href="../InfoView/Article_95069.html" target="_blank" Title="用CSS实现的固定表头的HTML表格">用CSS实现的固定表头的HTML表格</a> </li> <li>·<a href="../InfoView/Article_3050.html" target="_blank" Title="CSS属性列表">CSS属性列表</a> </li> <li>·<a href="../InfoView/Article_94622.html" target="_blank" Title="如何使用CSS来进行网页排版">如何使用CSS来进行网页排版</a> </li> <li>·<a href="../InfoView/Article_33308.html" target="_blank" Title="使用纯 CSS 设计3D按钮">使用纯 CSS 设计3D按钮</a> </li> <li>·<a href="../InfoView/Article_151066.html" target="_blank" Title="纯CSS制作简洁的垂直导航">纯CSS制作简洁的垂直导航</a> </li> <li>·<a href="../InfoView/Article_94411.html" target="_blank" Title="网页设计基础:Div+CSS布局入门教程">网页设计基础:Div+CSS布局入门教程</a> </li> <li>·<a href="../InfoView/Article_94621.html" target="_blank" Title="CSS 制作的三级菜单特效代码">CSS 制作的三级菜单特效代码</a> </li> <li>·<a href="../InfoView/Article_94587.html" target="_blank" Title="设计一个基于CSS的网页模板">设计一个基于CSS的网页模板</a> </li> <li>·<a href="../InfoView/Article_95132.html" target="_blank" Title="如何用CSS定义表格与模拟表格">如何用CSS定义表格与模拟表格</a> </li> <li>·<a href="../InfoView/Article_151040.html" target="_blank" Title="用CSS制作的美国国旗">用CSS制作的美国国旗</a> </li> </ul> </div> </div> <div class="clear"></div> </div> <ul id="fooder"> <li class="link"> | <a style="CURSOR: help" href="../plus/Help.html" rel="nofollow" >帮助(？)</a> | <a href="../plus/Say.html" rel="nofollow">版权声明</a> | <a href="../plus/Link.html" >友情连接</a> | <a href="../plus/Softup.html" rel="nofollow" >信息发布</a> </li> <li><span>Copyright 2003-2007 <a href="http://www.hackhome.com" title="网侠" >网侠</a> All Rights Reserved.</span><script language="javascript" type="text/javascript" src="http://js.users.51.la/1214545.js"></script> <a href="http://www.miibeian.gov.cn/" target="_blank" >粤ICP备05018371号</a> <script src="../Hits.asp?ArticleID=94399"></script> </li> </ul> </body> </html>
