AJAX - TabContainer CSS

最新推荐文章于 2025-07-04 01:03:33 发布

tonny_toto

最新推荐文章于 2025-07-04 01:03:33 发布

阅读量908

点赞数

CC 4.0 BY-SA版权

文章标签： ajax url header css

本文链接：https://blog.youkuaiyun.com/tonny_toto/article/details/2690681

本文介绍了一种使用AJAX实现的TabContainer样式配置方法，详细展示了不同状态下的按钮样式设置，包括默认状态、鼠标悬停状态及选中状态的背景图片、边框、内边距等属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

* AJAX - TabContainer */
.ajax_tab_my .ajax__tab_header /*整體按鈕底*/{
font-family:verdana,tahoma,helvetica; /*設定文字*/
font-size:11px; /*文字大小*/
background:url("tab-line.gif") repeat-x bottom; /*背景圖片，水平重複，靠下對齊*/}

.ajax_tab_my .ajax__tab_body /*資料區*/{
font-family:verdana,tahoma,helvetica;/*設定文字*/
font-size:10pt;/*文字大小*/
border:1px solid #999999;/*邊框*/
border-top:0;/*邊框上頭寬度為0 → 就等於沒有上邊框囉*/
padding:8px; /*文字與邊框間隔*/
background-color:#ffffff;/*背景顏色*/}

.ajax_tab_my .ajax__tab_outer /*預設-右邊*/{
background:url("tab-right.gif") no-repeat right; /*背景圖片，不重複，靠右邊對齊*/
padding-right:4px; /*右邊距離→為此圖片的寬度，才能顯示圖片喔*/
height:21px; /*圖片高度*/}

.ajax_tab_my .ajax__tab_inner /*預設-左邊*/{
padding-left:3px;/*左邊距離→為此圖片的寬度*/
background:url("tab-left.gif") no-repeat;/*背景圖片，不重複*/}

.ajax_tab_my .ajax__tab_tab /*預設-中間*/{
background:url("tab.gif") repeat-x; /*背景圖片，水平重複*/
height:13px;/*圖片高度*/
padding:4px; /*文字與圖片邊間隔*/
margin:0;/*邊界為0*/}

.ajax_tab_my .ajax__tab_hover .ajax__tab_outer /*滑鼠經過-右*/{background:url("tab-hover-right.gif") no-repeat right; /*背景圖片，不重複，靠右對齊*/}

.ajax_tab_my .ajax__tab_hover .ajax__tab_inner /*滑鼠經過-左*/{background:url("tab-hover-left.gif") no-repeat; /*背景圖片，不重複*/}

.ajax_tab_my .ajax__tab_hover .ajax__tab_tab /*滑鼠經過-中*/{background:url("tab-hover.gif") repeat-x; /*背景圖片，水平重複*/}

.ajax_tab_my .ajax__tab_active .ajax__tab_outer/*使用中-右*/{background:url("tab-active-right.gif") no-repeat right;/*背景圖片，不重複，靠右對齊*/}

.ajax_tab_my .ajax__tab_active .ajax__tab_inner /*使用中-左*/{background:url("tab-active-left.gif") no-repeat;/*背景圖片，不重複*/}

.ajax_tab_my .ajax__tab_active .ajax__tab_tab /*使用中-中*/{background:url("tab-active.gif") repeat-x;/*背景圖片，水平重複*/}