模仿微软CSS滑动门（TAB）

2024-09-05 12:19:24

字体：大中小

来源：转载

供稿：网友

模仿微软中国首页的CSS滑动门（TABS），竖向排列的选项卡，比较漂亮，要用到3个图片，点击运行可以看到效果，图片请自行下载。

<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>模仿微软CSS滑动门</title><style type="text/css">body{margin:0; padding:0; text-align:center; font-family:arial, sans-serif; font-size:12px}p{padding:0; margin:0; line-height:1.5em}#wrap{border:1px solid #A2A7AB; margin:20px auto; padding:8px; text-align:left; width:500px; background:url(/jscss/demoimg/200903/wrap11.jpg)}#menu{float:left; width:22%; background:url(/jscss/demoimg/200903/menu11.jpg) no-repeat right center}#menu ul{list-style:none; margin:0; padding:0}#menu li{height:25px; line-height:25px; text-align:right}#menu a{color:#000; text-decoration:none; display:block; padding-right:25px}#menu a:hover,#menu .on a{background:url(/jscss/demoimg/200903/over11.jpg) no-repeat right center; color:#039}#content{float:right; width:70%}#content h1{font-size:16px; font-weight:normal; margin:0; padding:0; margin-bottom:8px}#content ul{list-style:none; margin:0; padding:0}#content li{padding:3px}#copy{clear:both}</style><script type="text/javascript"></script></head><body><div id="wrap"><div id="menu"><ul><li id="m1" class="on">Indexs</li><li id="m2">Services</li><li id="m3">Codes</li><li id="m4">Windows</li><li id="m5">Offices</li></ul></div><div id="content"><div id="c1"><h1>Indexs</h1><ul> <li>Ajax无刷新评论（ASP.net+Jquery）</li><li>VB仿Vista风格真彩色图标按钮控件</li><li>PHP 生成HTML静态列表分页实例</li><li>乘风ASP多用户计数器Access版 v3.93</li></ul></div><div id="c2" style="display:none"><h1>Services</h1><ul><li>QvodCMS视频点播专家 ASP v1.8</li><li>ZenPhoto PHP图库系统 v1.2.1</li><li>MyPic 七夜图片管理系统PHP版 v2.0</li><li>Angel Upload PHP多文件上传与下载程序</li></ul></div><div id="c3" style="display:none"><h1>Codes</h1><ul><li>VB版网页照相机（抓取网页并保存为BMP）</li><li>将图片地址加入文本框的PHP文件上传程序</li><li>Mini File Host PHP上传程序 v1.5 中文版</li><li>复活小说站（终点小说系统内核）ASP版</li></ul></div><div id="c4" style="display:none"><h1>Windows</h1><ul><li>VB读写PNG并处理为透明背景物操作示例</li><li>经典游戏下载：疯狂对对碰J2ME源码版</li><li>VB支持中文的平滑字体滚动特效</li><li>给VB6编辑器添加鼠标滚轮的功能</li></ul></div><div id="c5" style="display:none"><h1>Offices</h1><ul><li>支持断点续传带进度条的VB下载控件</li><li>《代码大全》中文第一、二版（PDF）</li><li>VB根据数字报语音的程序</li><li>《数据库系统概念》电子版 (PDF)</li></ul></div></div><div id="copy"><p>? 2009 Design by Microsoft Inc</p></div></div></body></html>

上一篇：带阴影的CSS菜单

下一篇：CSS导航条，浅绿色