CSS Advanced tips: Sliding door technology

Previous CSS Tutorial article: CSS Advanced skills: Picture replacement Web Teaching Network

Sliding Doors (sliding Doors)

or decided to separate the sliding door into a separate technique.

It is a new technology introduced by CSS to create a beautiful and practical interface, it is simple to use, we only need to use two separate background images, we can achieve.

Web Teaching Network

Sliding doors are generally used as web tab navigation, according to the tab in the length of the content of the automatic Scaling tab effect.

The rounded rectangle described above is just one way of implementing it. The real sliding door only needs 2 sets of tags to complete: Web Teaching Network

The HTML code is as follows: 

<ul>
     <li> <a href="http://www.webjx.com" title=""> Web Teaching Network </a> </ li>
</ ul>

The CSS code is roughly as follows:

#header li {
   float: left;
   background: url ("left_both.gif") no-repeat left top;
   margin: 0;
   padding: 0 0 0 9px;
   border-bottom: 1px solid # 765;
   }
#header a {
   float: left;
   display: block;
   background: url ("right_both.gif") no-repeat right top;
   padding: 5px 15px 4px 6px;
   text-decoration: none;
   font-weight: bold;
   color: # 765;
   }
Ranch

It is completely semantic, and there are no extra tags. It is perfect, and you can use a: hover to further make the flip effect. Recommended!