Should the Amazon website be unfamiliar? Is there any impression on the navigation bar (Tab) method (as shown below) above it on its page.
This method of mazon.com has caused considerable multiplayer effect. So, how did it do? People with web design experience should not understand that if you don't know the details, you can know by checking the source code. It is actually made by inserting the prior fabrication of the label card, label card. The effect is controlled by color, such as the "Your Store" in the above figure, the color is consistent with the bottom subfamue, the background is dark blue, which looks to a card.
However, now the trend of web design is XHTML CSS to complete. So, if you don't need to add a form, is there a way to use CSS to make it? Yes, you can do it through the CSS settings of the project list.
This picture is to use this method to make it.
Here, we have learned the CSS label card production.
Make tag card with list elements
Usually, the arrangement of the project list is vertical and has a specific project symbol in the front, as follows:
Project List One Project List II Project List Three Project List Four
It is this like that the HTML code it corresponds to it:
It has been thought that the list of items can also be arranged without vertical, but the level distribution? In HTML, no matter how you can't do this. However, CSS provides this method.
First, let's put the project list into the DIV tag, as follows:
then, we set the following style for this ID of HorizonList as follows:
#horizonlist {// * Set the Box property of the DIV * //
Border: 1px solid # 000;
Margin: 2EM;
Width: 80%;
Padding: 5px;
Font-Family: Verdana, Sans-Serif;
}
#horizonlist ul, #horizonlist li {// * Set the properties of UL and Li within the DIV of HorizonList * //
DISPLAY: INLINE
Margin: 0;
Padding: 0;
Color: # 339;
Font-weight: bold;
}
This style acts as the result of the list of items is as follows:
Project List One Project List II Project List Three Project List Four
It can be seen that the item list at this time is placed horizontally, and the symbol before the list disappears. The reason why the key is the role of the attribute Display's set value inline. Display is used to change the display value of the element, and the element type line, block, and manifest items can be transformed each other, where the value of the value is "The branch of the deletion of the element is deleted, making it incorporated into other element streams". Here, inline cancels the wrap after each list item and it is displayed. Walking in this idea, if we set the box attribute to each list project, don't you have a label card?
Project List One Project List II Project List Three Project List Four
Let's take a look at this example of the code:
Different from the above example, the item list here "selected" is used to represent the currently selected tag card.
The corresponding CSS property is set as follows:
# TabDemo UL Li {margin-left: 0; Margin-Bottom: 0; Padding: 2px 15px 5px; border: 1px solid # 000; list-style: none; // * does not display list symbol * // Display: Inline; // * Cancel the branch between the item * // 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 to have a certain distance between each tag card, you can modify the margin-left attribute value in #tabdemo ul li. For example, change to 2, you can see the blue shown in the same time. The color label card is like.
Next we come to further modify the above label card, first look at the effect.
Label card a label card two tag card three tag card four
It can be seen that there is no longer close to each label card, and a continuous horizontal line appears. When the mouse moves to each tag card, there is a floating effect.
To analyze the code together:
This label card is placed in the block DIV of the Container. The ID of the list is beautytab, where the list item label is set, and a class "SelectedTAB" is set, indicating the currently selected tag class class.
The corresponding CSS setting is as follows: # Container {// * Set the Box property of the DIV containing the list * // width: 500px; padding: 30px; border: 1px solid #ccc; background: #fff;} #BeautyTAB {// * Set the properties of the project list UL element, where the background is used to set the horizontal lines under each list item, otherwise they will be separated from each other, with a pre-prepared picture, let it place At the bottom, level repeat * // Height: 20px; margin: 0; padding-left: 10px; Background: URL ('bottom.gif') Repeat-x bottom;} # beautyTab Li {// * Set a list item Attribute, Display property Set the branch between the project, List-style-type setting cancel list item before the symbol * // margin: 0; padding: 0; display: inline; list-style-type: none;} #BeautyTab A: Link, #beautytab A: Visited {// * Setting the properties of the tag card in the hyperlink text; Background: # f3f3f3; font-size: 12px; line-height: 14px; font -Weight: 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 currently selected label card in the hyperlink attribute * // border-bottom: 1px solid #fff; Background: #fff; color: # 000;} # beautytab A: Hover {// * Set hyperlink mouse floating effect * // background: #fff;}
If there is a beautiful modified picture on your hand, we can further produce a beautiful and elegant label card similar to the following figure.
As for how to make, people who are interested can do it.
