Cssamazon.com this way of navigation has caused quite a lot of people to follow suit. So how did it do that? People who have experience in web design should not be hard to understand, if you do not know the details, by looking at the source code can know, it is actually by inserting in the table in advance as a label card pictures to make, the effect of the tag card through color control, such as the "YOUR STORE" above This picture is the same color as the bottom column, the background is dark blue, so it looks like a card.
However, the trend of web design now is xhtml+css to complete. So, if you do not use the method of picture plus table, is there any way to make it just by using CSS? Yes, you can do it through the CSS settings of the project list.
This picture, is to use this method to make.
below, we are to learn the CSS label card production.
use list elements to make tag cards
Typically, the list of items is arranged vertically and preceded by a specific bullet, as follows:
Project List A
Project List Two
Project List three
Project list Four
it corresponds to the HTML code that looks like this:
<ul>
<li> Project List one </li>
<li> Project list two </li>
<li> Project List III </li>
<li> Project list four </li>
</ul>
has it ever occurred to you that the list of items can be distributed horizontally instead of vertically? You can't do that in HTML anyway. But CSS provides this approach.
First, we put the list of items into the DIV tag, as follows:
<div id= "Horizonlist" >
<ul>
<li> Project List one </li>
<li> Project list two </li>
<li> Project List III </li>
<li> Project list four </li>
</ul>
</div>
then, we set the following style for the DIV with the ID horizonlist:
#horizonlist {//* set div's box attribute *//
border:1px solid #000;
Margin:2em;
width:80%;
padding:5px;
Font-family:verdana, Sans-serif;
}
#horizonlist ul, #horizonlist li {//* set limits on Horizonlist div within the UL and Li attributes *//
Display:inline;
margin:0;
padding:0;
color: #339;
Font-weight:bold;
}
The result of this style acting on the list of items given is as follows:
Project List A
Project List Two
Project List three
Project list Four
can see that the list of items at this time is placed horizontally and the symbols before the list automatically disappear. The key to this is the effect of setting the value of the attribute display inline. Displays are used to change the display values of the elements, and you can transform the element type line, block, and manifest items, where the value inline is "to delete the lines before and after the element to merge into the other element stream." Here, inline cancels the line break after each list item and becomes a line display.
along this line of thought, if we set box properties for each list item, that does not have a similar label card effect out of it:
Project List A
Project List Two
Project List three
Project list Four
Let's take a look at the code for this example:
<div id= "TabDemo" >
<ul>
<li> Project List one </li>
<li> Project list two </li>
<li class= "selected" > Project List III </li>
<li> Project list four </li>
</ul>
</div>
is different from the above example, the list of items here is more than three class name "selected", which is used to represent the currently selected tab card.
the corresponding CSS properties are 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 symbols *//
display:inline;//* Cancel the 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 to have a certain distance between each label card, you can modify the #tabdemo ul li this setting margin-left attribute value, for example, to 2, you can see similar to the previous given the appearance of the blue label card.
Next we are going to further modify the label card above, to see the effect of fruit first.
Label Card One
Label Card Two
Label Card three
Label Card Four
can see that each tab is no longer close together, there is a continuous horizontal line, when the mouse moved to each label card, there is a floating effect.
together to analyze the code:
<div id= "Container" >
<ul id= "Beautytab" >
<li><a href= "#" class= "Selectedtab" > Label card one </a></li>
<li><a href= "#" > tag card two </a></li>
<li><a href= "#" > tag card three </a></li>
<li><a href= "#" > tag card four </a></li>
</ul>
</div>
This tag card is placed in a block div with ID container. The ID of the list is Beautytab, where the list item tag card sets a class "Selectedtab" that represents the currently selected tab class.
corresponding CSS is set as follows:
#container
{//* Set the box attribute of the div containing the list *//
width:500px;
padding:30px;
border:1px solid #ccc;
background: #fff;
}
#beautytab
{//* Sets the attributes of the UL element of the project list, where background is used to set the horizontal line consistent with each list item, otherwise they will be separated from each other, with a prepared picture to place it at the bottom, horizontal repeat *//
height:20px;
margin:0;
padding-left:10px;
Background:url (' bottom.gif ') Repeat-x bottom;
}
#beautytab Li
{//* Set the properties of each list item, display property set to cancel the branch of the project, List-style-type set the current symbol *//the cancellation list
margin:0;
padding:0;
Display:inline;
List-style-type:none;
}
#beautytab a:link, #beautytab a:visited
{//* The properties of the text of a hyperlink in a tab 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
{//* Sets the properties of the hyperlink in the currently selected tab card *//
border-bottom:1px solid #fff;
background: #fff;
color: #000;
}
#beautytab a:hover
{//* Set hyperlink mouse floating effect *//
BA
