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

Tab滑动选项卡：DIV部分的实现
1.首先新建一张空白网页,代码如下：
[code]<!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” c />
<title>无标题文档</title>
</head>
<body>
</body>
</html>[/code]2.说明一下，由于我们要写的代码不多，所以我们关于本实例的所有css样式都不再另建css文件了，这里直接就把css样式写在网页的<head>与</head>之间，以方便对比说明问题。。css代码如下：
[code]<!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” c />
<title>tab</title>
<style type=”text/css”>
<!–
/*这里是我们待会要写入的css代码*/
–>
</style>
</head>
<body>
<!–这里是待会我们要写入的div代码–>
</body>
</html>[/code]
3.我们知道，tab选下卡一般分为两部分，一部分是滑动导航，另一部分是滑动导航下面的内容部分，好吧！开始先写div代码，把选项卡的基本框架勾画主出来！即把包含<body></body>之间的代码写成如下：

<body id=”news”>
<!–无序列导航列表开始–>
<ul id=”tabul”>
<li class=”news”><a href=”tab1.html”>新闻</a></li>
<li class=”yule”><a href=”tab2.html”>娱乐</a></li>
<li class=”music”><a href=”tab3.html”>音乐</a></li>
<li class=”movie”><a href=”tab4.html”>影视</a></li>
<li class=”download”><a 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代码，我们就分成八步来讲解吧！！
   1.设置全局属性和基本框架样式：
[code]<style type=”text/css”>
<!–
body{/*css目的：设置全局属性*/
margin:100px 300px 200px 300px; /*定义tab选项卡的位置*/
}
#content{/*css目的：设置内容板块的基本样式*/
       border-left:1px solid #0033FF;/*添加左边框*/
border-right:1px solid #0033ff;/*添加右边框*/
border-bottom:1px solid #0033ff;/*添加下边框*/
padding:15px;/*内容距离边界空隙*/
font-size:17px;/*字号*/
}
–>
</style>[/code]到这里，大家可以自己预览一下效果如下：
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@第一步
  有关具体各条代码的注释，我已经注明出来了，如果还有不明白，自己可以搜索相关的文章看一看，也可看我写的另一篇文章，开笔时已经给了地址！！
  2.对滑动导航的位置、文字属性，导航横排进行css定义。继续加入代码如下：

<style type=”text/css”>
<!–
body{/*css目的：设置全局属性*/
margin:100px 300px 200px 300px; /*定义tab选项卡的位置*/
}
#content{/*css目的：设置内容板块的基本样式*/
border-left:1px solid #0033FF;/*添加左边框*/
border-right:1px solid #0033ff;/*添加右边框*/
border-bottom:1px solid #0033ff;/*添加下边框*/
padding:15px;/*内容距离边界空隙*/
font-size:17px;/*字号*/
}
ul#tabul{/*css目的：设置无序列表的基本样式*/
list-style:none;/*去除无序列表前面的点*/
margin:0px;
padding-left:0px;/*列表元素距离左边的空隙*/
padding-bottom:28px;/*列表元素距下边界的空隙*/
font:bold 17px Arial, Helvetica, sans-serif;/*定义字体*/
border-bottom:1px solid #0033ff;/*定义列表下边为框蓝色实线1像素*/
}
ul#tabul li{/*css目的：设置列表横排及基本的样式定义*/
float:left;/*设置列表向左浮动*/
height:27px;
margin:0px 4px 0px 0px;
border:1px solid #0033ff;
background:#00CCCC;
}
–>
</style>

复制代码
   友情提醒，希望大家制作模板时养成注释和经常预览效果的好习惯！这样有利于查找错误，更有利于设计能力的提高！！好了，再预览一下^_^
   @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@第二步
  不错！好像有那么一点意思了！呵呵，就是位置还需要搞一下，别急！这不是关键问题！下面我们来边调整边美化一下导航吧！

   3.设置链接的link、visited、hover属性：

<style type=”text/css”>
<!–
body{/*css目的：设置全局属性*/
margin:100px 300px 200px 300px; /*定义tab选项卡的位置*/
}
#content{/*css目的：设置内容板块的基本样式*/
border-left:1px solid #0033FF;/*添加左边框*/
border-right:1px solid #0033ff;/*添加右边框*/
border-bottom:1px solid #0033ff;/*添加下边框*/
padding:15px;/*内容距离边界空隙*/
font-size:17px;/*字号*/
}
ul#tabul{/*css目的：设置无序列表的基本样式*/
list-style:none;/*去除无序列表前面的点*/
margin:0px;
padding-left:0px;/*列表元素距离左边的空隙*/
padding-bottom:28px;/*列表元素距下边界的空隙*/
font:bold 17px Arial, Helvetica, sans-serif;/*定义字体*/
border-bottom:1px solid #0033ff;/*定义列表下边为框蓝色实线1像素*/
}
ul#tabul li{/*css目的：设置列表横排及基本的样式定义*/
float:left;/*设置列表向左浮动*/
height:27px;
margin:0px 4px 0px 0px;
border:1px solid #0033ff;
background:#00CCCC;
}
ul#tabul a:link,ul#tabul a:visited{/*设置链接以及访问过的样式*/
display:block;/*设置列表元素块状显示*/
color:#0000CC;
text-decoration:none;/*去掉下划线*/
padding:5px 10px 3px 10px;
}
ul#tabul a:hover{/*设置鼠标经过时的特殊样式*/
background-color:#990000;/*背景颜色*/
color:#FF0000;/*字体颜色*/
}
–>
</style>

复制代码大家看，上面新加入的代码很简单！无非是给链接定义样式。我就不多说了！不懂的朋友可以给我发站内信！（或到【phpcms互助团队QQ群】提问！）
预览如下：
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@第三步
好了，大家看，第二步的问题解决了吧！貌似好不错哦~~~ 西西
4.定义默认激活选项卡的样式。在<style></style>之间继续加入代码如下：

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.定义激活菜单的超链接效果