滑动门菜单效果：Tab/选项卡/横向/竖向代码大全

发布时间：2018-09-07 10:10 所属栏目：30 来源：站长网

导读：烈火网(LieHuo.Net)教程滑动门菜单效果：Tab/选项卡/横向/竖向代码大全，一款经典简洁的CSS滑动门代码，来自经典论坛，很多网站都见到过这种，代码并不多，非常实用。响应鼠标滑过而不是点击鼠标才切换，适你的需要了，滑动门的灵魂所在。 !DOCTYPE html

　　烈火网(LieHuo.Net)教程滑动门菜单效果：Tab/选项卡/横向/竖向代码大全，一款经典简洁的CSS滑动门代码，来自经典论坛，很多网站都见到过这种，代码并不多，非常实用。响应鼠标滑过而不是点击鼠标才切换，适你的需要了，滑动门的灵魂所在。

<!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" lang="zh-CN" xml:lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title>选项卡大全 - liehuo.net</title> <style type="text/css"> </style> </head> <body> <div id="tab01"> <h3>首页</h3> <div class="jj"><p>嘿嘿，无视div原始class值。</p></div> <h3 class="pr">工具</h3> <div><p>继续无视h3原始class值。</p></div> <h3>论坛</h3> <div><p>h3没有值也可以～</p></div> <h3 class="box">交易</h3> <div><p>div没有值一样可以～</p></div> </div> <div id="tab02"> <h4>首页</h4> <ol class="pr"><li>嘿嘿，无视容器原始class值。</li></ol> <h4 class="box">工具</h4> <ol><li>继续无视h3原始class值。</li></ol> <h4>论坛</h4> <ol><li>h3没有值也可以～</li></ol> <h4 class="bb">交易</h4> <ol><li>div没有值一样可以～</li></ol> </div> <div id="tab03"> <h3>首页</h3> <div class="tab"><p>嘿嘿，无视h3原始class值。</p></div> <h3>论坛</h3> <div class="tab wushi"><p>继续无视div原始class值。</p></div> <h3>工具</h3> <div class="tab"><p>h3没有值也可以～</p></div> <h3 class="box">交易</h3> <div class="tab tab123"><p>class值相似一样也可以～</p><div><p>指定class后，即时再多一个div也行。</p></div></div> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' _fcksavedurl='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：ASP站长网）