CSS Web Design example: Business Travel net homepage Tab switching

Article Introduction: CSS Web Design example: Travel Network tab to switch the first page.

Last month's project ... There are many ways to switch tabs, and here's a piece of code that I personally like to use:

<ul class= "Tabmenu" >
<li class= "Menu_flt" > Ticket </li>
< li> hotels </li>
< li> tourist vacation </li>
</ul>

For web standardization, this structure is very clear, when the picture does not show the same can know the text content, but also conducive to SEO. The background picture is divided into two pieces: on and off, combined together, as shown in the figure:

The entire module of the bottom fillet also merged into the picture, this section of code does not include, please ignore ~ ~ ~

1. Give <ul> add the above background, the default is off state, and each <li> plus the corresponding on style. Through JS to determine which menu highlighting, omitting <a> tags;
2. Li's height is set to zero, so that the text in HTML will not show, and then Padding-top, the height of the back. Individuals do not recommend Text-indent:xxxxem, and <a> will see that the focus box has exceeded the screen.

Attached style:

. tabmenu {width:396px; height:37px background: #c6d9f6 URL ("un_tabmenu.gif") no-repeat 0 0;}
. tabmenu li {float:left; display:inline; width:132px; height:0; overflow:hidden; padding-top:37px; cursor:pointer; }
. tabmenu Li.menu_flt {background:url ("un_tabmenu.gif") No-repeat 0-37px;}
. tabmenu Li.menu_hotel {background:url ("un_tabmenu.gif") no-repeat-132px-37px;}
. tabmenu li.menu_pkg {background:url ("un_tabmenu.gif") no-repeat-264px-37px;}