純DIV+CSS固定tab導(dǎo)航靜態(tài)標(biāo)題選項(xiàng)卡菜單模塊

1、純div+css固定tab導(dǎo)航靜態(tài)標(biāo)題選項(xiàng)卡菜單模塊帶背景標(biāo)題css tab菜單，純div+css，可隨文字增多而背景增寬效果固定靜態(tài)選項(xiàng)卡tab菜單。css標(biāo)題菜單導(dǎo)航css模塊可用于欄目標(biāo)題切換布局，也可以作為靜態(tài)選項(xiàng)卡效果布局模塊。1、對應(yīng)html完整代碼 固定欄目導(dǎo)航菜單 在線樣式 ul,li list-style:none .main-tabposition:relative;height:31px; background:url('images/t1lr3txbjxxxaqsqpx-4-31.png') repeat-x; .main-tab liposition:

2、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.selectedfont-weight:bold; background:url('images/t1m3kbxbbkxxczfxr4-

3、200-123.png') no-repeat 0 -37px; .main-tab li afloat: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-

4、repeat right -37px; .main-tab li .pk_iconheight:20px;width:14px;display:block; position:absolute;top:-2px;right:4px ;background:url('images/t1kkeixcxfxxbg9e.-14-20.gif') no-repeat; /* css注釋：這里為了便于給大家在文章中展示所以舉行換行，大家用法時候可以刪除換行 */ 我的divcss5 css切圖 css教程 2、包含素材有3張divcss5為大家收拾到下載壓縮包里選項(xiàng)卡效果菜單用到素材截圖3、在線演示查看案例4、打包下載（div+css html源文件+素材）立刻下載 （7.750kb）5、用法解釋：假如要將選項(xiàng)卡背景顯示為當(dāng)前效果，只需要對li標(biāo)簽加入class="selected"即可。此效果用到了css背景定位、css position、css浮動、css height、css width等樣式屬性。相關(guān)css特效：1