Divcss实现Tab选项卡效果完美实例教程..docVIP

大家好！我们又见面了！我是酷扑工作室的beyond0624！现在网上流行的tab风格的菜单导航和选项卡可以说是家喻户晓了！特别是各大门户例如新浪、网易、雅虎等网站都可以看到Tab选项卡的踪影！??相信有很多朋友看着别人网站上的炫酷效果，只有赞叹之心，却无亲手制作之力！今天，我抽出时间来，给大家写篇关于滑动选项卡的文章！通过学习，相信大家也能做出自己的滑动效果了^_^??关于tab选项卡的实现，有很多的方式！！闲话不说，今天我就和大家一起探讨一下用css实现tab选项卡的全过程^_^??相信大家都已经对Div+css有所了解，如果不懂，请先看我写的另一篇文章/thread-66964-1-1.html ，然后再过来吧！??具体来讲，顾名思义，DIV+CSS，就是说我们的网页是由div和css共同控制的，作为网页元素的重要角色，tab选项卡也不另外。那么了解了这一点，我们就开始动手做吧^_^? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ? Tab滑动选项卡：DIV部分的实现1.首先新建一张空白网页,代码如下：[code]!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=/1999/xhtmlheadmeta http-equiv=Content-Type c /title无标题文档/title/headbody/body/html[/code]2.说明一下，由于我们要写的代码不多，所以我们关于本实例的所有css样式都不再另建css文件了，这里直接就把css样式写在网页的head与/head之间，以方便对比说明问题。。css代码如下：[code]!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=/1999/xhtmlheadmeta http-equiv=Content-Type c /titletab/titlestyle type=text/css!--/*这里是我们待会要写入的css代码*/--/style/headbody!--这里是待会我们要写入的div代码--/body/html[/code]? ? 3.我们知道，tab选下卡一般分为两部分，一部分是滑动导航，另一部分是滑动导航下面的内容部分，好吧！开始先写div代码，把选项卡的基本框架勾画主出来！即把包含body/body之间的代码写成如下： [Copy to clipboard] [ - ] CODE: body id=news!--无序列导航列表开始--ul id=tabul? ? li class=newsa href=tab1.html新闻/a/li? ? li class=yulea href=tab2.html娱乐/a/li? ? li class=musica href=tab3.html音乐/a/li? ? li class=moviea href=tab4.html影视/a/li? ? li class=downloada href=tab5.html下载/a/li/ul!--无序列内容列表开始--div id=content!--具体内容--??p酷扑工作室DIV+CSS系列教程之TAB滑动选项卡的实现方法/p??p希望大家支持phpcms、支持酷扑工作室/p??p在phpcms2008到来的日子里，我还将继续奉献完美的教程给大家！^_^/p/div/body ??4.大家对照看一下，应该可以看的明白吧！关于为什么用id=news id=tabul 导航链接地址等等的问题，大家可能不太明白为什么这样做，稍后再给大家解释！！具体的预览效果页面如下：@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@? ? 好了，到这里div部分的内容即作为tab选项卡的基本的元素已经完成啦！哎，可就是看上去比较丑陋！美化一下吧！下面的工作就全靠css“大姐”来完成啦o(_∩)o...? ?? ?? ?? ???? ?? ?? ?? ?? ?? ?? ???Tab滑动选项卡：CSS部分的实现? ?关于css的设计，就没有div部分这么省事了！我们知道css代码都是写在单独建立的css文件或着网页的head/head之间的style/style之间的。明白了这一点，为了大家能够看清楚，关于css