Div css实现Tab选项卡效果完美实例教程

大家好！我们又见面了！我是酷扑工作室的beyond0624！现在网上流行的tab风格的菜单导航和选项卡可以说是家喻户晓了！特别是各大门户例如新浪、网易、雅虎等网站都可以看到Tab选项卡的踪影！

相信有很多朋友看着别人网站上的炫酷效果，只有赞叹之心，却无亲手制作之力！今天，我抽

出时间来，给大家写篇关于滑动选项卡的文章！通过学习，相信大家也能做出自己的滑动效果了^_^

关于tab选项卡的实现，有很多的方式！！闲话不说，今天我就和大家一起探讨一下用css实现tab选项卡的全过程^_^

相信大家都已经对Div+css有所了解，如果不懂，请先看我写的另一篇文章http://bbs.phpcms.cn/thread-66964-1-1.html ，然后再过来吧！

具体来讲，顾名思义，DIV+CSS，就是说我们的网页是由div和css共同控制的，作为网页元素的重要角色，tab选项卡也不另外。那么了解了这一点，我们就开始动手做吧^_^

Tab

滑动选项卡：DIV部分的实现

1.首先新建一张空白网页,代码如下：

[code]

无标题文档

[/code]2.说明一下，由于我们要写的代码不多，所以我们关于本实例的所有

css样式都不再另建css文件了，这里直接就把css样式写在网页的与之间，以方便对比说明问题。。css代码如下：

[code]

tab 之间的。明白了这一点，为了大家能够看清楚，关于css代码，我们就分成八步来讲解吧！！

1.设置全局属性和基本框架样式： [code][/code]到这里，大家可以自己预览一下效果如下：

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@第一步

有关具体各条代码的注释，我已经注明出来了，如果还有不明白，自己可以搜索相关的文章看

一看，也可看我写的另一篇文章，开笔时已经给了地址！！

2.对滑动导航的位置、文字属性，导航横排进行css定义。继续加入代码如下：

[Copy to clipboard] [ - ]

CODE:

大家看，上面新加入的代码很简单！无非是给链接定义样式。我就不多说了！不懂的朋友可以给我发站内信！（或到【phpcms互助团队QQ群】提问！）

预览如下：

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@第三步 好了，大家看，第二步的问题解决了吧！貌似好不错哦~~~ 西西

4.定义默认激活选项卡的样式。在之间继续加入代码如下：

[Copy to clipboard] [ - ]

CODE:

body#news li.news,body#yule li.yule, body#music li.music,body#movie li.movie, body#download li.download{/*重定义列表菜单*/

border-bottom:1px solid #ffffff;/*给块状菜单重新定义白色的下边框，起 到覆盖原先定义的蓝色下边框*/ color:#000000;

background-color:#ffffff; }

到这里，可能有点朋友有点晕！先不说，看看这段代码实现了什么功能吧：

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@第四步

貌似同第三步差不多，但是”新闻“的背景颜色变成白色了，再看看代码，大家应该明白一点了吧！

注：选项卡有五个导航链接，每个链接都会调用不同的页面！因此，我们需要做5个不同的激活页面，正如本页默认激活【新闻】栏目一样，这是后话，提出来只是让大家清楚，我们写这一步代码的原因 ^_^ 5.定义激活菜单的超链接效果

[Copy to clipboard] [ - ]

CODE:

/*以下css代码为激活时菜单的超链接效果

************************************************************************* ****************/

body#news li.news a:link,body#news li.news a:visited, body#yule li.yule a:link,body#yule li.yule,a:visited, body#music li.music a:link,body#music li.music a:visited, body#movie li.movie a:link,body#movie li.movie a:visited,

body#download li.download a:link,body#download li.download a:visited{

color:#000000; }

body#news li.news a:hover, body#yule li.yule a:hover, body#music li.music a:hover, body#movie li.movie a:hover, body#download li.download a:hover{ color:#0000cc; text-decoration:underline; }

好了，至此，作为默认的激活【新闻】菜单已经制作完成了！预览效果大致同第四步一样，为什么呢？因为这段代码在完成5个激活页面后效果才会看出来！呵呵，工作还没玩呢！大家继续往^_^

下

看

吧

Tab滑动选项卡：完美实现篇

一、通过以上这么多的描述，我们写的代码都在一个页面里。完整的代码如下：

[Copy to clipboard] [ - ]

CODE: