蓝色清爽可用做排行的侧边列表滑动门代码
代码简介:
一个很节省布局的侧边滑动门,一般用作阅读排行或下载排行,清新风格,没有用到任何的修饰图片,直接拷贝到你的网页里就可以用啦。这还支持多内容切换,也就是可以复制多个门单元以适应需要。
代码内容:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <title>蓝色清爽可用做排行的侧边列表滑动门代码_网页代码站(www.webdm.cn)</title> <style type="text/css"> body{font-size:12px;} a:link,a:visited{font-size:12px;color:#666;text-decoration:none;} a:hover{color:#ff0000;text-decoration:underline;} #Tab{margin:0 auto;width:220px;border:1px solid #BCE2F3;} .Menubox{height:28px;border-bottom:1px solid #64B8E4;background:#E4F2FB;} .Menubox ul{list-style:none;margin:7px 40px;padding:0;position:absolute;} .Menubox ul li{float:left;background:#64B8E4;line-height:20px;display:block;cursor:pointer;width:65px;text-align:center;color:#fff;font- weight:bold;border-top:1px solid #64B8E4;border-left:1px solid #64B8E4;border-right:1px solid #64B8E4;} .Menubox ul li.hover{background:#fff;border-bottom:1px solid #fff;color:#147AB8;} .Contentbox{clear:both;margin-top:0px;border-top:none;height:181px;padding-top:8px;height:100%;} .Contentbox ul{list-style:none;margin:7px;padding:0;} .Contentbox ul li{line-height:24px;border-bottom:1px dotted #ccc;} </style> <script> <!-- function setTab(name,cursel,n){ for(i=1;i<=n;i++){ var menu=document.getElementById(name+i); var con=document.getElementById("con_"+name+"_"+i); menu.className=i==cursel?"hover":""; con.style.display=i==cursel?"block":"none"; } } //--> </script> </head> <body> <br><br> <div id="Tab"> <div class="Menubox"> <ul> <li id="menu1" onmouseover="setTab('menu',1,2)" class="hover">最新更新</li> <li id="menu2" onmouseover="setTab('menu',2,2)" >下载排行</li> </ul> </div> <div class="Contentbox"> <div id="con_menu_1" class="hover"> <ul> <li><a href="/" target="_blank">VB获取数据表名称的一个实例</a></li><li><a href="/" target="_blank">ASP+jQuery无刷新读写数据库操作 </a></li><li><a href="/" target="_blank">VC仿QQ游戏大厅的树型展开菜单控件</a></li><li><a href="http://www.webdm.cn" target="_blank">jQuery浮动层 图片展示特效</a></li><li><a href="/" target="_blank">xhEditor网页编辑器</a></li><li><a href="/" target="_blank">轩溪ASP生成HTML下载系统 v3.81</a></li><li><a href="/" target="_blank">VB6商品出租管理系统完整源代码</a></li> </ul> </div> <div id="con_menu_2" style="display:none"> <ul> <li><a href="http://www.webdm.cn" target="_blank">VB仿Unix红帽操作系统界面源码</a></li><li><a href="/" target="_blank">Java企业人事管理系 统源码</a></li><li><a href="/" target="_blank">jQuery 动态添加层、拖动层实例</a></li><li><a href="/" target="_blank">Java根据数字报语音的程序 </a></li><li><a href="/" target="_blank">listview控件自定义扩展VB版</a></li><li><a href="/" target="_blank">《深入MIDP2.0工具类别》指导书 </a></li><li><a href="/" target="_blank">《MIDP 图形编程简介》 PDF</a></li> </ul> </div> </div> </div> </body> </html> <br> <a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!
代码来自:http://www.webdm.cn/webcode/bb9a5d1a-4255-47c4-b1c3-9e82697050d1.html