纯CSS实现翻页效果，原理比较简单，书签配合隐藏。运行代码框<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh"><br /><head profile="http://www.w3.org/2000/08/w3c-synd/#"><br /><meta http-equiv="content-language" content="zh-cn" /><br /><meta http-equiv="content-type" content="text/html;charset=gb2312" /><br /><br /><style><br /><br />dl {<br /> position:absolute;<br /> width:240px;<br /> height:170px;<br /> border:10px solid #eee;<br /> }<br />dd {<br /> margin:0;<br /> width:240px;<br /> height:170px;<br /> overflow:hidden;<br /> }<br />img {<br /> border:1px solid black<br /> }<br />dt {<br /> position:absolute;<br /> right:3px;<br /> top:50px;<br /> }<br />a {<br /> display:block;<br /> margin:1px;<br /> width:20px;<br /> height:20px;<br /> text-align:center;<br /> font:700 12px/20px "宋体",sans-serif;<br /> color:#fff;<br /> text-decoration:none;<br /> background:#666;<br /> border:1px solid #fff;<br /> filter:alpha(opacity=40);<br /> opacity:.4;<br /> }<br />a:hover {<br /> background:#000<br /> }<br /></style><br /></head><br /><body><br /><dl><br /><dt><a href="#a" title="">1</a><a href="#b" title="">2</a><a href="#c" title="">3</a></dt><br /><dd><br /><img src="http://www.blueidea.com/articleimg/2007/03/4549/1.jpg" alt="" title="" id="a" /><br /><img src="http://www.blueidea.com/articleimg/2007/03/4549/2.jpg" alt="" title="" id="b" /><br /><img src="http://www.blueidea.com/articleimg/2007/03/4549/3.jpg" alt="" title="" id="c" /><br /></dd><br /></dl><br /></body><br /></html> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
同样，举一反三，可以做出其他的翻页的效果。
运行代码框<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh"><br /><head profile="http://www.w3.org/2000/08/w3c-synd/#"><br /><meta http-equiv="content-language" content="zh-cn" /><br /><meta http-equiv="content-type" content="text/html;charset=gb2312" /><br /><br /><style><br /><br />dl {<br /> position:absolute;<br /> width:240px;<br /> height:170px;<br /> border:10px solid #eee;<br /> }<br />dd {<br /> margin:0;<br /> width:240px;<br /> height:170px;<br /> overflow:hidden;<br /> }<br />dt {<br /> position:absolute;<br /> right:1px;<br /> }<br /><br />ul {<br /> margin:0;<br /> padding:0;<br /> width:260px;<br /> height:170px;<br /> list-style:none;<br /> background:url("http://bbs.blueidea.com/attachments/2006/11/10/arrowb_kJrcZheJmiIF.gif") no-repeat 75% 20px;<br /> border:1px solid #ccc<br /> }<br />#b {<br /> background-position:75% center<br /> }<br />#c {<br /> background-position:75% 86%<br /> }<br />li {<br /> width:205px;<br /> height:27px;<br /> font:12px/27px "宋体",sans-serif;<br /> white-space:nowrap;<br /> overflow:hidden;<br /> }<br />dt a {<br /> display:block;<br /> margin:1px;<br /> width:30px;<br /> height:56px;<br /> text-align:center;<br /> font:700 12px/55px "宋体",sans-serif;<br /> color:#fff;<br /> text-decoration:none;<br /> background:#666;<br /> }<br />dt a:hover {<br /> background:orange<br /> }<br /></style><br /><head/><br /><body><br /><dl><br /><dt><a href="#a" title="">新闻</a><a href="#b" title="">娱乐</a><a href="#c" title="">体育</a></dt><br /><dd><br /><br /><br /><br /><ul id="a"><br /> <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li><br /> <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li><br /> <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li><br /> <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li><br /> <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li><br /> <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li><br /></ul><br /><br /><ul id="b"><br /> <li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li><br /> <li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li><br /> <li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li><br /> <li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li><br /> <li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li><br /> <li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li><br /></ul><br /><br /><ul id="c"><br /> <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li><br /> <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li><br /> <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li><br /> <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li><br /> <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li><br /> <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li><br /></ul><br /></dd><br /></dl><br /></body><br /></html> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
经典论坛讨论http://bbs.blueidea.com/thread-2728504-1-1.html
Admin
