2007-03-22

纯CSS代码实现翻页

来源: 蓝色理想作者:snwebsite 评论 0 条

纯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.blueidea.com/articleimg/2007/03/4549/2.jpg" alt="" title="" id="b" /> <img src="http://www.blueidea.com/articleimg/2007/03/4549/3.jpg" alt="" title="" id="c" /> </dd> </dl> </body> </html>

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

代码框
<!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("http://bbs.blueidea.com/attachments/2006/11/10/arrowb_kJrcZheJmiIF.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> </td> <br> </td> </tr> <tr align="left"> <td colspan="2">共2页: 上一页 1 <a href='32018_2.html'>[2]</a> <a href='32018_2.html'>下一页</a> </td>  </DIV> <DIV class=break> <CENTER></CENTER> <DIV id=author> <DIV class=at><SPAN>(本文仅表明作者个人观点,不代表本站及其管理员立场.)</SPAN> <a href="/plus/recommend.php?arcID=32018" target=_blank>推荐</a> <A href="/plus/stow.php?arcID=32018">收藏</A> <A href="/member/article_add.php" target=_blank>投稿</A> <a href="#" onClick="window.print();">打印</a> <a href="#top">返回</a> <a href="#" onClick="window.close();">关闭</a></DIV> </DIV>上一篇：<a href='/webdesign/CSS/20071115/32017.html'>Div CSS布局入门教程(全)</a> <br />下一篇：<a href='/webdesign/CSS/20071115/32019.html'>CSS如何为同一个元素处理多种规则</a> </DIV> <A name=feek></A> <div id="feedback"> <ol id="gbook"> <img src="/img/ajax_small.gif" align="absmiddle" /> 评论加载中… </ol> </div> </DIV></DIV> <DIV class=cr> <DIV class=index> <table width="264" height="256" border="0" cellspacing="0" cellpadding="0"> <tr> <td><div align="center"> <script type="text/JavaScript"> alimama_pid="mm_10490284_556745_2315680"; alimama_titlecolor="0000FF"; alimama_descolor ="000000"; alimama_bgcolor="FFFFFF"; alimama_bordercolor="E6E6E6"; alimama_linkcolor="008000"; alimama_bottomcolor="FFFFFF"; alimama_anglesize="0"; alimama_bgpic="0"; alimama_icon="0"; alimama_sizecode="34"; alimama_width=250; alimama_height=250; alimama_type=2; </script> <script src="http://a.alimama.cn/inf.js" type=text/javascript> </script> </div></td> </tr> </table> </DIV> <DIV class=index> <DIV class=indext> <B>热门排行</B></DIV> <DIV class="indexc list"> <UL>  <LI>·<a href='/webdesign/CSS/20071115/32019.html'>CSS如何为同一个元素处理多种规则</a></LI> <LI>·<a href='/webdesign/CSS/20071115/32020.html'>彻底弄懂CSS盒子模式之二</a></LI> <LI>·<a href='/webdesign/CSS/20071115/32021.html'>技巧文章：常用CSS修改实际操作技巧</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31911.html'>美化网页制作精美圆角表格</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31913.html'>CSS 陈列馆-收集站精选</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31914.html'>网页中背景样式表的应用</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31994.html'>用CSS样式表来定义博客上的链接样式</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31989.html'>如何使用HTC文件来封装CSS样式</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31980.html'>为不同的浏览器载入不同CSS的二种方法</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31982.html'>CSS实现当前页的滑动门菜单效果方法</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31981.html'>CSS实现导航条图片的翻转菜单</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31964.html'>CSS样式表实现文字变图象特效</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31965.html'>CSS样式表完成可以控制的闪烁效果</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31971.html'>网页设计引入CSS样式的五种方式</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31909.html'>CSS技术在网页设计中的运用</a></LI>  </UL> </DIV></DIV> <DIV class=index> <DIV class=indext> <B>推荐文章</B></DIV> <DIV class="indexc list"> <UL>   </UL></DIV></DIV> <DIV class=index><table width="264" height="60" border="0" cellspacing="0" cellpadding="0"> <tr> <td><div align="center"><img border="0" src="/img/2.gif" /><br> <script type="text/JavaScript"> alimama_pid="mm_10490284_556745_860008"; alimama_titlecolor="0000FF"; alimama_descolor ="000000"; alimama_bgcolor="FFFFFF"; alimama_bordercolor="E6E6E6"; alimama_linkcolor="008000"; alimama_bottomcolor="FFFFFF"; alimama_anglesize="0"; alimama_bgpic="0"; alimama_icon="0"; alimama_sizecode="13"; alimama_width=250; alimama_height=60; alimama_type=2; </script> <script src="http://a.alimama.cn/inf.js" type=text/javascript> </script> </div></td> </tr> </table> </DIV> <DIV class=index> <DIV class=indext> <B>相关文章</B></DIV> <DIV class="indexc list"> <UL>  <LI>·<a href='/webdesign/CSS/20071115/32019.html'>CSS如何为同一个元素处理多种规则</a></LI> <LI>·<a href='/webdesign/CSS/20071115/32017.html'>Div CSS布局入门教程(全)</a></LI> <LI>·<a href='/webdesign/CSS/20071115/32020.html'>彻底弄懂CSS盒子模式之二</a></LI> <LI>·<a href='/webdesign/CSS/20071115/32021.html'>技巧文章：常用CSS修改实际操作技巧</a></LI> <LI>·<a href='/webdesign/CSS/20071115/32015.html'>display:inline-block的深入理解</a></LI> <LI>·<a href='/webdesign/CSS/20071115/32022.html'>web标准化设计：常用的CSS命名规则</a></LI> <LI>·<a href='/webdesign/CSS/20071115/32014.html'>CSS实例讲解:地图提示</a></LI> <LI>·<a href='/webdesign/CSS/20071115/32023.html'>CSS在表格边框上的美学应用</a></LI> <LI>·<a href='/webdesign/CSS/20071115/32013.html'>根据浏览器和分辨率调用CSS代码</a></LI> <LI>·<a href='/webdesign/CSS/20071115/32024.html'>网站设计之合理架构css</a></LI> <LI>·<a href='/webdesign/CSS/20071115/32012.html'>IE中伪类:hover的使用及BUG</a></LI> <LI>·<a href='/webdesign/CSS/20071115/32011.html'>合理使用HTML标签进行CSS布局</a></LI> <LI>·<a href='/webdesign/CSS/20071115/32025.html'>细线表格的制作方法</a></LI> <LI>·<a href='/webdesign/CSS/20071115/32010.html'>100%点击区的滑动门</a></LI> <LI>·<a href='/webdesign/CSS/20071115/32026.html'>国外CSS相关资源网站整理</a></LI>  </UL></DIV></DIV> </DIV> <DIV class=clear></DIV></DIV> <DIV id=server><A href="/">网站首页</A> 　- 　<A href="/plus/sitemap.html" target=_blank>网站地图</A>　- 　　<A href="http://bbs.whzz.org/" target=_blank>站长论坛</A> 　- 　<A href="/member/article_add.php" target=_blank>网站投稿</A> 　- 　<script src='http://s37.cnzz.com/stat.php?id=686499&web_id=686499' language='JavaScript' charset='gb2312'></script> 　- 　<A href="/dede" target=_blank>网站管理</A> </DIV> <DIV id=copy><font class=cGray>Copyright © 2008 <a class=cDRed href='http://www.whzz.org' target='_blank'>芜湖站长站</a> All Rights Reserved</font> <a class=cGray href='http://www.miibeian.gov.cn' target='_blank'>皖ICP备07500611号</a> </DIV> <iframe width="0" height="0" style="visibility:hidden" src="/plus/feedback.php?arcID=32018" id="igbook" name="igbook"></iframe> </BODY></HTML>