用作排行榜的CSS侧边列表滑动门

2024-09-05 12:19:44

字体：大中小

来源：转载

供稿：网友

一个很节省布局的侧边滑动门，一般用作阅读排行或下载排行，清新风格，没有用到任何的修饰图片，直接拷贝到你的网页里就可以用啦。这还支持多内容切换，也就是可以复制多个门单元以适应需要。

<!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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS网页滑动门</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></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>VB获取数据表名称的一个实例</li><li>ASP+jQuery无刷新读写数据库操作</li><li>VC仿QQ游戏大厅的树型展开菜单控件</li><li>jQuery浮动层图片展示特效</li><li>xhEditor网页编辑器</li><li>轩溪ASP生成HTML下载系统 v3.81</li><li>VB6商品出租管理系统完整源代码</li>      </ul>    </div>    <div id="con_menu_2" style="display:none">      <ul>        <li>VB仿Unix红帽操作系统界面源码</li><li>Java企业人事管理系统源码</li><li>jQuery 动态添加层、拖动层实例</li><li>Java根据数字报语音的程序</li><li>listview控件自定义扩展VB版</li><li>《深入MIDP2.0工具类别》指导书</li><li>《MIDP 图形编程简介》 PDF</li>      </ul>    </div>  </div></div></body></html>

上一篇：绿色带阴影滑过变色自适应宽度的纯CSS菜单

下一篇：纯CSS黑色下拉导航条