欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

带背景标题CSS tab菜单,纯DIV+CSS,可随文字增多而背景增宽效果固定静态选项卡TAB菜单。

导航tab菜单截图
css标题菜单导航CSS模块

可用于栏目标题切换布局,也可以作为静态选项卡效果布局模块。

1、对应HTML完整代码

  1. <!DOCTYPE html> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>固定栏目导航菜单 在线样式 www.divcss5.com</title> 
  6. <style> 
  7. ul,li{ list-style:none} 
  8.  
  9.  
  10. .main-tab{position:relative;height:31px; 
  11. background:url('images/T1Lr3tXbJXXXaqSQPX-4-31.png') repeat-x;} 
  12. .main-tab li{position:relative;float:left;height:31px; 
  13. line-height:31px;vertical-align:middle;font-size:14px; 
  14. padding-left:15px;margin-right:5px; 
  15. background:url('images/T1m3kbXbBkXXcZFXr4-200-123.png') no-repeat; 
  16. cursor:pointer;} 
  17. .main-tab li.selected{font-weight:bold; 
  18. background:url('images/T1m3kbXbBkXXcZFXr4-200-123.png') no-repeat 0 -37px;} 
  19. .main-tab li a{float:left;height:31px;padding-right:15px; 
  20. text-decoration:none;color:#333; 
  21. background:url('images/T1m3kbXbBkXXcZFXr4-200-123.png') no-repeat right 0;} 
  22. .main-tab li.selected a 
  23. {background:url('images/T1m3kbXbBkXXcZFXr4-200-123.png') no-repeat right -37px;} 
  24. .main-tab li .pk_icon{height:20px;width:14px;display:block; 
  25. position:absolute;top:-2px;right:4px 
  26. ;background:url('images/T1kkEiXcXfXXbg9E..-14-20.gif') no-repeat;} 
  27. /* css注释:这里为了便于给大家在文章中展示所以进行换行,大家使用时候可以删除换行 */ 
  28.  
  29. </style> 
  30. </head> 
  31.  
  32. <body> 
  33. <ul class="main-tab clearfix"> 
  34.     <li class="selected"> 
  35.         <a href="http://www.divcss5.com/">我的DIVCSS5</a> 
  36.     </li> 
  37.     <li> 
  38.         <a href="http://www.css5.com.cn/">CSS切图</a><em class="pk_icon"></em> 
  39.     </li> 
  40.     <li > 
  41.         <a href="http://www.divcss5.com/">CSS教程</a> 
  42.     </li> 
  43. </ul>    
  44. </body> 
  45. </html> 

2、包含图片素材有3张
DIVCSS5为大家整理到下载压缩包里

选项卡效果菜单用到图片素材截图
选项卡效果菜单用到图片素材截图

3、在线演示

查看案例

4、打包下载(DIV+CSS html源文件+图片素材)

5、使用说明:
如果要将选项卡背景图片显示为当前效果,只需要对“li标签”加入class="selected"即可。

此效果用到了CSS背景定位、css positioncss浮动css heightcss width等样式属性。

相关CSS特效
1、css tab滑动选项卡
2、经典div css tab选项卡特效
3、css tab导航滑动菜单特效
4、css下拉导航菜单

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/template/m488.shtml