欢迎访问 夜阑小雨 我的学习碎片档案,这里记录了我的学习内容和工作中经验,希望给您带去帮助。

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

Web前端 夜阑小雨 1307℃ 0评论

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>之间的代码写成如下:

  1. <body id=”news”>
  2. <!–无序列导航列表开始–>
  3. <ul id=”tabul”>
  4. <li class=”news”><a href=”tab1.html”>新闻</a></li>
  5. <li class=”yule”><a href=”tab2.html”>娱乐</a></li>
  6. <li class=”music”><a href=”tab3.html”>音乐</a></li>
  7. <li class=”movie”><a href=”tab4.html”>影视</a></li>
  8. <li class=”download”><a href=”tab5.html”>下载</a></li>
  9. </ul>
  10. <!–无序列内容列表开始–>
  11. <div id=”content”><!–具体内容–>
  12.    <p>酷扑工作室DIV+CSS系列教程之TAB滑动选项卡的实现方法</p>
  13.    <p>希望大家支持phpcms、支持酷扑工作室</p>
  14.    <p>在phpcms2008到来的日子里,我还将继续奉献完美的教程给大家!^_^</p>
  15. </div>
  16. </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定义。继续加入代码如下:

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

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

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

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

  1. body#news li.news,body#yule li.yule,
  2. body#music li.music,body#movie li.movie,
  3. body#download li.download{/*重定义列表菜单*/
  4. border-bottom:1px solid #ffffff;/*给块状菜单重新定义白色的下边框,起
  5. 到覆盖原先定义的蓝色下边框*/
  6. color:#000000;
  7. background-color:#ffffff;
  8. }

复制代码到这里,可能有点朋友有点晕!先不说,看看这段代码实现了什么功能吧:
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@第四步
貌似同第三步差不多,但是”新闻“的背景颜色变成白色了,再看看代码,大家应该明白一点了吧!
注:选项卡有五个导航链接,每个链接都会调用不同的页面!因此,我们需要做5个不同的激活页面,正如本页默认激活【新闻】栏目一样,这是后话,提出来只是让大家清楚,我们写这一步代码的原因 ^_^
  5.定义激活菜单的超链接效果

  1. /*以下css代码为激活时菜单的超链接效果
  2. *************************************************************************
  3. ****************/
  4. body#news li.news a:link,body#news li.news a:visited,
  5. body#yule li.yule a:link,body#yule li.yule,a:visited,
  6. body#music li.music a:link,body#music li.music a:visited,
  7. body#movie li.movie a:link,body#movie li.movie a:visited,
  8. body#download li.download a:link,body#download li.download a:visited{
  9. color:#000000;
  10. }
  11. body#news li.news a:hover,
  12. body#yule li.yule a:hover,
  13. body#music li.music a:hover,
  14. body#movie li.movie a:hover,
  15. body#download li.download a:hover{
  16. color:#0000cc;
  17. text-decoration:underline;
  18. }

复制代码好了,至此,作为默认的激活【新闻】菜单已经制作完成了!预览效果大致同第四步一样,为什么呢?因为这段代码在完成5个激活页面后效果才会看出来!

转载请注明:夜阑小雨 » Div+css实现Tab选项卡效果完美实例教程

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址