Scalable tab page Effects

As written in the project, share the following with you:

 

Introduction to extensible tab labels

Let's not talk about it. first look at the effect:

You can also click here (http://fe.baidu.com /~ Zhaoxianlie/TAB/space-tab.html) view

The width of each tab can be adaptive or specified in CSS!

HTML snippets

<Div class = "mod-space-tab"> <Div class = "tab-left-corner tab-on"> <Div class = "tab-right-corner"> <div class = "tab-center"> profile </div> <Div class = "tab-left-corner"> <Div class =" tab-right-corner "> <Div class =" tab-center "> spatial data </div> <Div class =" tab-left- corner "> <Div class =" tab-right-corner "> <Div class =" tab-center "> blacklist </div>/ div> <Div class = "clear"> </div>

CSS Fragment

/*************************************** ************ **************************************** *********/. Mod-space-tab {font-size: 12px; Height: 25px; border-bottom: 2px solid # bed730; padding-left: 10px ;}. mod-space-tab. tab-left-corner ,. mod-space-tab. tab-right-corner ,. mod-space-tab. tab-center {Background: URL (http://img.baidu.com/hi/img/ihome/space-tab-bg.gif) No-repeat 0 0 ;} /******************************* normal status ****** ********************************/. mod-space-tab. tab-left-corner {background-position: Left-53px; margin-Right: 5px; padding-left: 4px; line-Height: 25px; cursor: pointer; float: left; _ Position: relative; _ top: 3px ;}. mod-space-tab. tab-left-corner. tab-right-corner {background-position: Right-margin PX; padding-Right: 4px ;}. mod-space-tab. tab-left-corner. tab-right-corner. tab-center {background-position: Center-80px; Background-repeat: Repeat-X; Height: 25px; text-align: center; overflow: hidden ;} ****** ********************************/. mod-space-tab. tab-on {background-position: Left top; border-bottom: 2px solid # FFF ;}. mod-space-tab. tab-on. tab-right-corner {background-position: Right-27px ;}. mod-space-tab. tab-on. tab-right-corner. tab-center {Background: # FFF; border-top: 1px solid # bed730; font-weight: bold ;}. clear {clear: Both ;} /******************************* change the width of each tab here ** * *** when the width is not set, self-Adaptive ********************/. mod-space-tab. tab-left-corner. tab-right-corner. tab-center {width: 66px;/* Actual width = width + 8 */}

Compatibility

Internet Explorer 6/7/8, Firefox, chrome, and sogou

Feedback

Click here to make a brick!

Online Editing Document Structure  Document Information

Power by space-Fe 2010