站长资源 网络编程

代码经过精简后的仿QQ折叠菜单代码

整理:jimmy2026/8/7浏览2次

简介SlideView 滑动展示效果 .sv3 dl, .sv3 dt, .sv3 dd{ padding:0; margin:0; } .sv3 { width:240px; border:1px solid #BFC7D9; } .sv3 dl { width:240px; height:38

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>SlideView 滑动展示效果</title> </head> <body> <style type="text/css"> .sv3 dl, .sv3 dt, .sv3 dd{ padding:0; margin:0; } .sv3 { width:240px; border:1px solid #BFC7D9; } .sv3 dl { width:240px; height:380px; background:#EDF5FF; overflow:hidden; } .sv3 dt { padding:5px 10px; height:13px; font-size:13px; color:#000; background:#E5ECF9; border-top:1px solid #fff; border-bottom:1px solid #BFC7D9; } .sv3 dl.on dt { background:#3366CC; color:#FFF; font-weight:bold; } .sv3 dd { padding:10px; color:#333; font-size:12px; line-height:1.5em; } .sv3 dd a:link, .sv3 dd a:visited, .sv3 dd a:hover, .sv3 dd a:active { color:#333; display:block; text-align:right;} </style>  <dl> <dt>我的好友 </dt> <dd> 张三 </dd> <dd> 王五 </dd> </dl> <dl> <dt> 业务联系 </dt> <dd> 李经理 </dd> </dl> <dl> <dt> 家人 </dt> <dd> 爸爸 </dd> <dd> 妈妈 </dd> </dl> <dl> <dt> 同事 </dt> <dd> 小赵</dd> </dl> <dl> <dt> 讨厌的人 </dt> <dd> 梅朝风 </dd> </dl>   </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

上一篇：链接图片无缝(无间断)向左平滑滚动Js版代码

下一篇：据说是Google首页的网页模块拖动代码

站长资源网络编程

代码经过精简后的仿QQ折叠菜单代码

最新资源