Create a tab using CSS

Shouldn't amazon websites be unfamiliar? Are you still impressed with the tab navigation bar (for example) on the top of the page?

Amazon.com's navigation method has caused many people to follow suit. So how is it done? People who have experience in web design should understand it easily. If they do not know the details, they can understand it by looking at the source code, it is actually produced by inserting a pre-created image in the table as a label card. The effect of the label card is controlled by color, for example, the color of the "your store" image is the same as that of the sub-section below. The background is dark blue, so you can see it as a card.

However, the current trend of web page design is the completion of XHTML + CSS. So, if you don't need to add images and tables, is there a way to just use CSS to make them? Some of them can be done through CSS settings in the project list.

This figure is created using this method.

Next, we will learn how to create CSS labels.

Use List elements to create a tag card

In general, the project list is arranged vertically with a specific project symbol in front, as shown below:

• Project List 1
• Project List 2
• Project List 3
• Project List 4

The corresponding HTML code looks like this:

<Ul>
<Li> Project List 1 </LI>
<Li> Project List 2 </LI>
<Li> Project List 3 </LI>
<Li> project list 4 </LI>
</Ul>
　

Have you ever thought that the project list can be horizontally arranged without vertical arrangement? This is not possible in HTML anyway. CSS provides this method.

First, we put the project list into the DIV tag, as shown below:

<Div id = "horizonlist">

<Ul>
<Li> Project List 1 </LI>
<Li> Project List 2 </LI>
<Li> Project List 3 </LI>
<Li> project list 4 </LI>
</Ul>

</Div>

Then, we set the following style for the DIV whose ID is horizonlist:

# Horizonlist {// * set the box attribute of the DIV * // border: 1px solid #000; margin: 2em; width: 80%; padding: 5px; font-family: verdana, sans-serif;} # horizonlist ul, # horizonlist Li {// * sets the UL and Li attributes in the DIV of horizonlist * // display: inline; margin: 0; padding: 0; color: #339; font-weight: bold ;}

The effect of this style on the project list is as follows:

• Project List 1
• Project List 2
• Project List 3
• Project List 4

As you can see, the project list is placed horizontally, and the symbols before the list disappear automatically. In this case, the key lies in the role of setting value inline of attribute display. Display is used to change the display value of an element. It can change the element type online, block, and list items. The value of inline is "The Branch character before and after the element is deleted, merge it into other element streams ". Inline removes the line feed after each list item and displays it as a line.

Following this idea, if we set the box attribute for each list project, isn't there any effect similar to the label card:

• Project List 1
• Project List 2
• Project List 3
• Project List 4

Let's take a look at the code of this example:

<Div id = "tabdemo">
<Ul>
<Li> Project List 1 </LI>
<Li> Project List 2 </LI>
<Li class = "selected"> Project List 3 </LI>
<Li> project list 4 </LI>
</Ul>
</Div>

Different from the preceding example, the project list contains the class name "selected", which indicates the selected label card.

The CSS attributes are set as follows:

# Tabdemo ul Li {
Margin-left: 0;
Margin-bottom: 0;
Padding: 2px 15px 5px;
Border: 1px solid #000;
List-style: none; // * do not display the list symbol *//
Display: inline; // * cancel a branch between projects *//
Background-color: # FFC;
}

# Tabdemo ul Li. Selected {// * set the effect of the selected list *//
Border-bottom: 1px solid # FFF;
Background-color: # FFF;
List-style: none;
Display: inline;
}

If you want a certain distance between each label card, you can modify the value of # tabdemo ul Li's margin-left attribute in this setting. For example, change it to 2, you can see the blue tab card that was shown earlier.

Next, let's further modify the label card above. First, let's look at the effect.

• Tag Card 1
• Label Card 2
• Label 3
• Tag Card 4

As you can see, each tag card is no longer closely linked, and there is a continuous horizontal line under it. When you move the mouse to each tag card, the effect of floating appears.

Analyze the Code together:

<Div id = "Container">

<Ul id = "beautytab">
<Li> <a href = "#" class = "selectedtab"> tag Card 1 </a> </LI>
<Li> <a href = "#"> tab card 2 </a> </LI>
<Li> <a href = "#"> label 3 </a> </LI>
<Li> <a href = "#"> tab card 4 </a> </LI>
</Ul>

</Div>

This label is stored in the block Div with the ID of container. The list ID is beautytab. In the list project tab, a class "selectedtab" is set to indicate the Selected tab class.

The corresponding CSS settings are as follows:

# Container
{// * Set the box attribute of the DIV containing the list *//
Width: 500px;
Padding: 30px;
Border: 1px solid # CCC;
Background: # FFF;
}

# Beautytab
{// * Set the attributes of the UL element in the project list. The background is used to set the horizontal lines that are consistent with the list items. Otherwise, the background is separated from each other and a prepared image is used, place it at the bottom and repeat horizontally *//
Height: 20px;
Margin: 0;
Padding-left: 10px;
Background: url('bottom.gif ') Repeat-x bottom;
}

# Beautytab Li
{// * Set the properties of each list item, set the display property to cancel the branch between projects, and set the symbol before canceling the list item *//
Margin: 0;
Padding: 0;
Display: inline;
List-style-type: none;
}

# Beautytab A: Link, # beautytab A: visited
{// * Set the character attribute of the hyperlink in the label card *//
Float: left;
Background: # f3f3f3;
Font-size: 12px;
Line-Height: 14px;
Font-weight: bold;
Padding: 2px 10px 2px 10px;
Margin-Right: 4px;
Border: 1px solid # CCC;
Text-Decoration: none;
Color: #666;
}

# Beautytab A: link. selectedtab, # beautytab A: visited. selectedtab
{// * Set the Super Link attribute of the Selected tab card *//
Border-bottom: 1px solid # FFF;
Background: # FFF;
Color: #000;
}

# Beautytab A: hover
{// * Set the floating effect of the hyperlink mouse *//
Background: # FFF;
}
　

If you have a pretty picture on your hand, you can create a similar elegant label.

As for how to make it, interested people can do it on their own.