Tab滑动选项卡

wslv1971 2012-03-20

展开全文

Tab滑动选项卡：完美实现篇
一、通过以上这么多的描述，我们写的代码都在一个页面里。完整的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tab</title>
<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;/*字体颜色*/
}
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;
}
/*以下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;
}
-->
</style>
</head>
<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>
</html>

复制代码

当然，单单这一个页面无法实现滑动的效果，好了！我们来一起制作其他4个页面吧！其他的页面不用从新再来，只要简单修改几个代码就可以了：
   方法：1.复制tab1.html为四份，分别命名为tab2.html、tab3.html、tab4.html、tab5.html.到这里，大家应该明白我们一开始给五个导航菜单定义的链接地址的原因了吧！
       2.css部分都是一样的，要修改的代码只有div部分的<body id="news">和内容区的具体内容了，换到phpcms中，内容就是由调用标签代替了！呵呵
   下面是tab2.html页面body部分的代码，观察一下与tab1.html相应部分代码的一同吧，会有所收获的嘞：