文章列表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="mrc-type" mrc="text/html;charset=gb2312" /> <title>CSS文章列表切换</title> <style> dl {position:absolute;width:370px;height:170px;border:10px solid #eee;} dd {margin:0;width:370px;height:170px;overflow:hidden;} dt {position:absolute;right:1px;} ul {margin:0;padding:0;width:390px;height:170px;list-style:none;1122123<img src="http://p1.mb5u.com/texiao/3/20100522231239300.gif" _fcksavedurl="http://p1.mb5u.com/texiao/3/20100522231239300.gif">2244234background:url("http://p1.mb5u.com/texiao/3/20100522231239300.gif") no-repeat 75% 20px;border:1px solid #ccc} #b {background-position:75% center} #c {background-position:75% 86%} li {width:335px;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="/" title="">源码</a> <a href="#b" title="">书籍</a> <a href="#c" title="">软件</a> </dt> <dd><ul id="a"> <li><a href="/soft/3394.shtml" target="_blank">jQuery 1.3 API 参考手册 CHM</a></li><li><a href="/soft/2877.shtml" target="_blank">《Learning jQuery中文版》 pdf</a></li><li><a href="/soft/2720.shtml" target="_blank">《Ext 最新中文手册》 PDF</a></li><li><a href="/soft/1124.shtml" target="_blank">《Ajax实战——Ajax in Action》 中文电子版 (PDF)</a></li><li><a href="/soft/1005.shtml" target="_blank">《Ajax经典案例开发大全》电子版 PDF 附随书源码</a></li><li><a href="/soft/1003.shtml" target="_blank">《Ajax基础教程》 (PDF) 附随书源代码</a></li> </ul> <ul id="b"> <li><a href="/soft/1005.shtml" target="_blank">《Ajax经典案例开发大全》电子版 PDF 附随书源码</a></li><li><a href="/soft/1124.shtml" target="_blank">《Ajax实战——Ajax in Action》 中文电子版 (PDF)</a></li><li><a href="/soft/1009.shtml" target="_blank">《基于J2EE的Ajax宝典》（PDF）</a></li><li><a href="/soft/1003.shtml" target="_blank">《Ajax基础教程》 (PDF) 附随书源代码</a></li><li><a href="/soft/1001.shtml" target="_blank">ASP.NET AJAX程序设计第二卷（客户端）中文电子书扫描版</a></li> </ul> <ul id="c"> <li><a href="/soft/2877.shtml" target="_blank">《Learning jQuery中文版》 pdf</a></li><li><a href="/soft/1108.shtml" target="_blank">《Ajax高级程序设计》电子版（EXE）</a></li><li><a href="/soft/2720.shtml" target="_blank">《Ext 最新中文手册》 PDF</a></li><li><a href="/soft/1002.shtml" target="_blank">ASP.NET环境配置AJAX的视频教程 (EXE)</a></li><li><a href="/soft/3394.shtml" target="_blank">jQuery 1.3 API 参考手册 CHM</a></li><li><a href="/soft/1124.shtml" target="_blank">《Ajax实战》 中文电子版 (PDF)</a></li> </ul></dd></dl> </body> </html>
。