CSS tutorial: special introduction to Sliding Doors

Sliding Doors)

We decided to separate the sliding door as a separate technology.

It is a new technology introduced by CSS to create beautiful and practical interfaces. It is easy to use. We only need to use two separate background images.

Sliding Doors are generally used for website Tab navigation. The Tab effect is automatically scaled according to the length of the Tab content.

The rounded rectangle mentioned above is only one of its implementation methods. The real sliding door can be completed with only two sets of labels:

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 {
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;
}