文章列表CSS選項(xiàng)卡切換效果_層和布局特效
很不錯的文章列表，類似選項(xiàng)卡一樣的功能，這一個有點(diǎn)特別，就是把鼠標(biāo)點(diǎn)擊的菜單放到了右邊，有一個小箭頭指示當(dāng)前怎位置，使文章結(jié)構(gòu)更加清淅，確實(shí)很不錯。<!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實(shí)戰(zhàn)——Ajax in Action》 中文電子版 (PDF)</a></li><li><a href="/soft/1005.shtml" target="_blank">《Ajax經(jīng)典案例開發(fā)大全》電子版 PDF 附隨書源碼</a></li><li><a href="/soft/1003.shtml" target="_blank">《Ajax基礎(chǔ)教程》 (PDF) 附隨書源代碼</a></li> </ul> <ul id="b"> <li><a href="/soft/1005.shtml" target="_blank">《Ajax經(jīng)典案例開發(fā)大全》電子版 PDF 附隨書源碼</a></li><li><a href="/soft/1124.shtml" target="_blank">《Ajax實(shí)戰(zhàn)——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基礎(chǔ)教程》 (PDF) 附隨書源代碼</a></li><li><a href="/soft/1001.shtml" target="_blank">ASP.NET AJAX程序設(shè)計(jì)第二卷（客戶端）中文電子書掃描版</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高級程序設(shè)計(jì)》電子版（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環(huán)境配置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實(shí)戰(zhàn)》 中文電子版 (PDF)</a></li> </ul></dd></dl> </body> </html>
。