tab选项卡菜单

2013-04-27 22:44:17 带背景标题tab菜单，纯DIV+CSS，可随文字增多而背景增宽效果固定静态TAB菜单。

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

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

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

1、对应HTML完整代码

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>固定栏目导航菜单 在线样式 yfnd.net</title> 
<style> 
ul,li{ list-style:none} 
 
 
.main-tab{position:relative;height:31px; 
background:url('images/T1Lr3tXbJXXXaqSQPX-4-31.png') repeat-x;} 
.main-tab li{position:relative;float:left;height:31px; 
line-height:31px;vertical-align:middle;font-size:14px; 
padding-left:15px;margin-right:5px; 
background:url('images/T1m3kbXbBkXXcZFXr4-200-123.png') no-repeat; 
cursor:pointer;} 
.main-tab li.selected{font-weight:bold; 
background:url('images/T1m3kbXbBkXXcZFXr4-200-123.png') no-repeat 0 -37px;} 
.main-tab li a{float:left;height:31px;padding-right:15px; 
text-decoration:none;color:#333; 
background:url('images/T1m3kbXbBkXXcZFXr4-200-123.png') no-repeat right 0;} 
.main-tab li.selected a 
{background:url('images/T1m3kbXbBkXXcZFXr4-200-123.png') no-repeat right -37px;} 
.main-tab li .pk_icon{height:20px;width:14px;display:block; 
position:absolute;top:-2px;right:4px 
;background:url('images/T1kkEiXcXfXXbg9E..-14-20.gif') no-repeat;} 
/* css注释：这里为了便于给大家在文章中展示所以进行换行，大家使用时候可以删除换行 */ 
 
</style> 
</head> 
 
<body> 
<ul class="main-tab clearfix"> 
    <li class="selected"> 
        <a href="//www.yfnd.net/">我的HTML8</a> 
    </li> 
    <li> 
        <a href="//www.yfnd.net/">CSS切图</a><em class="pk_icon"></em> 
    </li> 
    <li > 
        <a href="//www.yfnd.net/">CSS教程</a> 
    </li> 
</ul>    
</body> 
</html>

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

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

3、在线演示

查看案例

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

立即下载（7.750KB）

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

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