首页
精品网站
艺术设计
网络学院
信息中心
求职招聘
网站综合
服装网站
编程开发
设计论坛
投稿
我要上榜
设计资源站
Dreamweaver
Flash
Photoshop
其它周边
web标准
asp
php
.net
CSS
WAP网站攻略
专题
深圳网站建设
广州网站设计
域名注册
上海网站建设
虚拟主机
广州网站建设
广州网页设计
签名设计
虚拟主机
域名注册
品牌形象设计
设计联盟
当前位置：
网络学院首页
>>
设计教程
>>
web标准
>> css实现网易滑动门TAB导航菜单
css实现网易滑动门TAB导航菜单
网站色彩搭配讲解
跟我探索网站排名的捷径
网页banner设计欣赏
网站装饰图标设计欣赏
设计赛事集合
网页JS特效大全
来源：
中国设计秀
作者：
佚名
点击：
2607
加入收藏
关键字：
网易导航菜单
css
WEB标准
源码如下：
<!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>滑动门</title> <style media="screen" type="text/css"> <!-- *{font-size:12px;} html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;} UL{list-style-type:none; margin:0px;} .ttl{height:18px;} .ctt{ height:auto; padding:6px; clear:both; border: 1px solid #CCCCCC; } .w936{ width:936px; clear:both; height: 120px; margin-top: 20px; margin-right: 0; margin-bottom: 2px; margin-left: 0; } .normaltab { color:#1F3A87; } .hovertab { color:#FF0000; background-color: #99CC00; } .dis{display:block;} .undis{display:none;} .tabs { width:100%; background:#BBD9EE; font-size:93%; line-height:normal; } .tabs ul { margin:0; padding:10px 10px 0 50px; list-style:none; } .tabs li { display:inline; margin:0; padding:0; cursor: pointer; } .tabs a { float:left; background:url("http://www.cnwebshow.com/ad/1.gif") no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } .tabs a span { float:left; display:block; background:url("http://www.cnwebshow.com/ad/2.gif") no-repeat right top; padding:5px 15px 4px 6px; color:#666; } .tabs a span {float:none;} .tabs a:hover span { color:#FF9834; } .tabs a:hover { background-position:0% -42px; } .tabs a:hover span { background-position:100% -42px; } --> </style> <script type="text/javascript" language="javascript"> <!-- function g(o){return document.getElementById(o);} function HoverLi(n) { for(var i=1;i<=24;i++){g('tb_'+i);g('tbc_0'+i).className='undis';} g('tbc_0'+n).className='dis';g('tb_'+n); } //--> </script> </head> <body> <div class="w936"> <div id="tb_" class="tb_ tabs"> <ul> <li id="tb_1" onmouseover="HoverLi(1);"><a href="#"><span>栏目导航</span></a></li> <li id="tb_2" onmouseover="HoverLi(2);"><a href="#"><span>栏目导航</span></a></li> <li id="tb_3" onmouseover="HoverLi(3);"><a href="#"><span>栏目导航</span></a></li> <li id="tb_4" onmouseover="HoverLi(4);"><a href="#"><span>栏目导航</span></a></li> <li id="tb_5" onmouseover="HoverLi(5);"><a href="#"><span>栏目导航</span></a></li> <li id="tb_6" onmouseover="HoverLi(6);"><a href="#"><span>栏目导航</span></a></li> <li id="tb_7" onmouseover="HoverLi(7);"><a href="#"><span>栏目导航</span></a></li> <li id="tb_8" onmouseover="HoverLi(8);"><a href="#"><span>栏目导航</span></a></li> </ul> </div> <div class="ctt"> <div class="dis" id="tbc_01">内容1</div> <div class="undis" id="tbc_02">内容2</div> <div class="undis" id="tbc_03">内容3</div> <div class="undis" id="tbc_04">内容4</div> <div class="undis" id="tbc_05">内容5</div> <div class="undis" id="tbc_06">内容6</div> <div class="undis" id="tbc_07">内容7</div> <div class="undis" id="tbc_08">内容8</div> </div> </div> <div class="w936"> <div id="tb_" class="tb_ tabs"> <ul> <li id="tb_9" onmouseover="HoverLi(9);"><a href="#"><span>栏目导航</span></a></li> <li id="tb_10" onmouseover="HoverLi(10);"><a href="#"><span>栏目导航</span></a></li> <li id="tb_11" onmouseover="HoverLi(11);"><a href="#"><span>栏目导航</span></a></li> <li id="tb_12" onmouseover="HoverLi(12);"><a href="#"><span>栏目导航</span></a></li> <li id="tb_13" onmouseover="HoverLi(13);"><a href="#"><span>栏目导航</span></a></li> <li id="tb_14" onmouseover="HoverLi(14);"><a href="#"><span>栏目导航</span></a></li> <li id="tb_15" conmouseover="HoverLi(15);"><a href="#"><span>栏目导航</span></a></li> <li id="tb_16" onmouseover="HoverLi(16);"><a href="#"><span>栏目导航</span></a></li> </ul> </div> <div class="ctt"> <div class="dis" id="tbc_09">内容9</div> <div class="undis" id="tbc_010">内容10</div> <div class="undis" id="tbc_011">内容11</div> <div class="undis" id="tbc_012">内容12</div> <div class="undis" id="tbc_013">内容13</div> <div class="undis" id="tbc_014">内容14</div> <div class="undis" id="tbc_015">内容15</div> <div class="undis" id="tbc_016">内容16</div> </div> </div> <div class="w936"> <div id="tb_" class="tb_ tabs"> <ul> <li id="tb_17" onmouseover="HoverLi(17);"><a href="#"><span>栏目导航</span></a></li> <li id="tb_18" onmouseover="HoverLi(18);"><a href="#"><span>栏目导航</span></a></li> <li id="tb_19" onmouseover="HoverLi(19);"><a href="#"><span>栏目导航</span></a></li> <li id="tb_20" onmouseover="HoverLi(20);"><a href="#"><span>栏目导航</span></a></li> <li id="tb_21" onmouseover="HoverLi(21);"><a href="#"><span>栏目导航</span></a></li> <li id="tb_22" onmouseover="HoverLi(22);"><a href="#"><span>栏目导航</span></a></li> <li id="tb_23" conmouseover="HoverLi(23);"><a href="#"><span>栏目导航</span></a></li> <li id="tb_24" onmouseover="HoverLi(24);"><a href="#"><span>栏目导航</span></a></li> </ul> </div> <div class="ctt"> <div class="dis" id="tbc_017">内容17</div> <div class="undis" id="tbc_018">内容18</div> <div class="undis" id="tbc_019">内容19</div> <div class="undis" id="tbc_020">内容20</div> <div class="undis" id="tbc_021">内容21</div> <div class="undis" id="tbc_022">内容22</div> <div class="undis" id="tbc_023">内容23</div> <div class="undis" id="tbc_024">内容24</div> </div> </div> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
0
顶一下
2008-01-15 12:20:17 出处：
中国设计秀cnwebshow.com
本文引用地址：
http://www.cnwebshow.com/edu/html/article_4312.html
热点文章/相关文章
·
web标准中浮动Float 概念...
·
WEB标准中元素水平居中方...
·
解决英文字体和中文字体...
·
详解Css3中的属性选择符
·
web标准中不要滥用li
·
IE6隐藏样式表 让IE6去死
·
css中的table-layout:fixed
·
三种浏览器IE FireFox O...
·
IETester各种IE浏览器版...
·
web标准中用途相似的标签
防止表格div层被撑开的多种方法
web标准中浮动Float 概念详解
IE6隐藏样式表 让IE6去死
三种浏览器IE FireFox Opera支持Alpha透明的方法
用Gnome HIG原则指导你的设计
css中的table-layout:fixed
web标准中不要滥用li
css3背景定位运用实例
IETester各种IE浏览器版本共存
详解Css3中的属性选择符
web标准中用途相似的标签
最新文章
·
web标准中浮动Float 概念详解
·
IE6隐藏样式表 让IE6去死
·
三种浏览器IE FireFox Opera支...
·
用Gnome HIG原则指导你的设计
·
WEB标准中元素水平居中方案总结
·
css中的table-layout:fixed
·
web标准中不要滥用li
·
IETester各种IE浏览器版本共存
·
详解Css3中的属性选择符
·
web标准中用途相似的标签
艺术设计秀最新图片
国外涂鸦风格插画...
一组绝对精美标志...
AMNEWTON21平面广...
国外BYO2平面广告...
国外获奖包装设计...
优秀房地产楼书设...
推荐文章
·
web标准中浮动Float 概念详解
·
WEB标准中元素水平居中方案总结
·
详解Css3中的属性选择符
·
xhtml+css制作不规则导航
·
div设计中的文字垂直居中的方法
·
IE双倍边距BUG的现象及解决办法
·
使文本保持在同一行中显示
·
设计中常用标签的使用位置
·
让IE6和IE7在WindowsXP下共存
·
IE双倍边距BUG的现象及解决办法
素材下载
矢量
潮流素材
背景素材
模板
网站地图
|
关于我们
|
联系我们
|
网站建设
|
广告服务
|
版权声明
|
免责声明
|
网站公告
|
友情链接
|
留言
|
旧版入口
Copyright © 2005-2008
中国设计秀_网页设计秀_艺术设计秀_网页设计教程_网站建设作品_平面设计欣赏_包装设计欣赏_品牌网站建设
All Right Reserved.
做最专业的设计服务网站,秀出自我，秀出精彩！
中国设计秀，秀---无处不在！！
交流群：9107036 3848215 8850631
粤ICP备05067046号
八度数据
提供带宽
![优秀房地产楼书设计欣赏[时代庄园]](/uploadfile/art/uploadfile/200807/20080703113157494.gif)
