纯CSS代码实现翻页 - 网站建设

　纯CSS代码实现翻页

作者：snwebsite　时间： 2007-03-21　文档类型：原创　来自：蓝色理想

纯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>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

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

运行代码框
<!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>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

经典论坛讨论
http://bbs.blueidea.com/thread-2728504-1-1.html

本文链接：http://www.blueidea.com/tech/site/2007/4549.asp　

出处：蓝色理想
责任编辑：feng4ever

◎进入论坛网站综合、网页制作版块参加讨论

作者文章

更多作者文章

2006年50佳css布局站点欣赏

使用有趣的自定义标记来布局页面

用background 插入flash播放器

web标准常见问题集合

放大镜效果

站点最新

站点最新列表

悟道web标准:前端性能优化

纯中文域名".中国"今日提交申请

世界之窗3.0皮肤设计大赛结果公布

使用jQuery制作滑动动画效果的层

如何设计网页横幅

Plump 图标设计

Subrat Nayak图标设计

百度知道推出文档分享服务

CSS Sprites(CSS雪碧):要还是不要?

UIRSS三周年纪念日推出V2公测版

栏目最新

栏目最新列表

Firefox的Jetpack扩展案例分析

阿里妈妈UED谈CSS Sprites技术

Photoshop中设计绿色时尚Web网站

操作Dom节点实现间歇滚动新闻

浏览器15年历史回顾

如何创建Firefox的Jetpack扩展

全透视:CSS Z-index 属性

用PS 3D工具绘制甜麦圈包装袋

悟道Web标准:让W3C标准兼容终端

悟道WEB标准:统一思想,遵循标准