Author: Tang
Realization Principle Animation Demonstration:http://www.alixixi.com/UploadPic/2007-7/200777204837702.swf
Since my tutorial, "thoroughly understand the CSS box pattern (Quick start of div layout)" published, has been won the praise and support of netizens, today, in response to the requirements of users, but also in order to thank the support of netizens, I will launch a sequel tutorial to deepen the understanding of the CSS box model users. This tutorial is for readers or div-typesetting beginners, if you are a master, then don't waste your time.
This time I will explain the production of a vertical CSS navigation bar instance, in the course of the tutorial will be used in the previous release of the "box" concept, if you have not read the previous tutorial, or you do not understand what is the "box" concept, please first through the following two links to read my previous published tutorials, After watching this tutorial, please forgive me if you have any inconvenience.
Using CSS as a navigation bar is an easy thing to do, in my previous published tutorial in fact there is a simple horizontal navigation bar production, at that time only gave the style code did not make too many explanations, this time to do a relatively complex navigation bar, in order to deepen the understanding of CSS Box mode, Select a navigation bar with a multi-tiered div nesting implementation.
First look at the implementation of the principle of animation demo:
Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/><title> thoroughly understand the CSS box mode (detailed navigation bar example) </title><style type=" Text/css "><!--* {margin : 0px; padding:0px; }.nav {background:url (/uploadpic/2007-7/200777204838915.jpg) repeat-y; width:200px; overflow:hidden;}. lanlist {background:url (/uploadpic/2007-7/200777204846635.gif) no-repeat left center; height:50px; width:190px;}. lanboxin {float:right; height:20px width:170px; margin:15px 0px 0px 0px}. Lanboxin a {background:url (/uploadpic/2007-7/200777204846975.gif) no-repeat left center; text-decoration:none; height : 20px; width:155px; Display:block; Float:right; padding:0px 0px 0px 5px; Font-weight:bold; font-size:9pt; line-height:20px; Color: #663300; Lanboxin a:hover {background-image:url (/uploadpIc/2007-7/200777204846927.gif); Color: #FFFFFF; Lanboxin span {float:left; height:20px width:10px; Background-color: #ff9900;} --></style></pead><body><div class= "nav" ><div class= "lanList" > <div class= " Lanboxin "> <span></span><a href=" # "> Thoroughly understand CSS box pattern 1</a> </div></div><div class= "Lanlist" > <div class= "lanboxin" > <span></span><a href= "#" > Thoroughly understand the CSS box pattern 2</a> </div></div><div class= "Lanlist" > <div class= "lanboxin" > <span></span><a href= "#" > Thoroughly understand CSS box patterns 3</a> </div></div><div class= "lanlist" > <div class= "lanboxin" > <span></span><a href= "#" > Thoroughly understand CSS box pattern 4</a> </div></div><div class= " Lanlist "> <div class=" lanboxin "> <span></span><a href=" # "> Thoroughly understand the CSS box pattern 5</a> </ Div></div></div></body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
Now look at the result chart:
The link in this navigation bar uses the background picture to switch the effect, the mouse moves to the link the navigation bar background picture and the text color will follow the change, the entire navigation uses the following 4 picture material:
That is to link the two background pictures of different states, each navigation to the left of the "tick-month" graphics, the outermost large box 1 pixel high background picture.
See the animation demo and the results of the picture, also understand the use of those materials, now please take a curiosity with me to complete the navigation bar, as the end of this navigation bar you will find the original Div typesetting so simple. May you have more confidence to learn div typesetting!
Let's analyze how many boxes the navigation bar uses: The Outermost one big box (NAV), this box and 1 pixel high background picture and so on width, inside has five small box (lanlist) respectively to contain each navigation bar, this box and "The hook Month" the graph and so on high, Navigation bar The box contains a slightly smaller box (lanboxin) with a yellow cosmetic box (span) and a text-linked box (a).
Web page Structure code:
<div class= "NAV" >
<div class= "Lanlist" >
<div class= "Lanboxin" >
<span></span><a href= "#" > Thoroughly understand the CSS box pattern 1</a>
</div>
</div>
<div class= "Lanlist" >
<div class= "Lanboxin" >
<span></span><a href= "#" > Thoroughly understand the CSS box pattern 2</a>
</div>
</div>
<div class= "Lanlist" >
<div class= "Lanboxin" >
<span></span><a href= "#" > Thoroughly understand the CSS box pattern 3</a>
</div>
</div>
<div class= "Lanlist" >
<div class= "Lanboxin" >
<span></span><a href= "#" > Thoroughly understand the CSS box pattern 4</a>
</div>
</div>
<div class= "Lanlist" >
<div class= "Lanboxin" >
<span></span><a href= "#" > Thoroughly understand the CSS box pattern 5</a>
</div>
</div>
</div>
1. Now officially start doing, before doing initialize the boundaries and padding of each sign, here with the style:
* {
margin:0px;
padding:0px;
}
2. Assemble the outermost large box nav, wide 200px, high for automatic auto or simply do not, background picture for bj.jpg, background portrait Repeat, use style:
. Nav {
Background:url (bj.jpg) repeat-y;
width:200px;
Overflow:hidden;
}
3. Assemble each navigation box lanlist, this box and the "tick-month" graphics and so high, and put the "tick-month" figure in the background form on the left side of the box, and let the box on the left side (because this box is smaller than the outside of the big box, if the equality can not consider the alignment), Here we use the property of style float, I do not write the style of the default value, the style code is as follows:
. lanlist {
Background:url (lan.gif) No-repeat left center;
height:50px;
width:190px;
}
4. Assemble a smaller inner box lanboxin than each navigation bar, the box aligns it to the right and forms a 15px boundary with its parent box lanlist the content boundary to make the content block appear centered (you can also use the bottom boundary to achieve the goal), and the style code is as follows:
. lanboxin {
Float:right;
height:20px;
width:170px;
margin:15px 0px 0px 0px;
}
5. Assemble the yellow decorated block box span, this box is lanboxin with the parent box, and left-aligned in the Lanboxin box, the style code is as follows:
. lanboxin span {
Float:left;
height:20px;
width:10px;
Background-color: #ff9900;
}
6. Assemble the link box A, where the style: display:block; Let the link render in a blocky way, and arrange a background picture for the link, set the background to be safe for security purposes, and center vertically (if the browser is wrong and your background is not solid), Then the box too large background repeat will affect the appearance of the page, link text style to remove the underline, the style is as follows:
. lanboxin a {
Background:url (lanbj2.gif) No-repeat left center;
Text-decoration:none;
height:20px;
width:155px;
Display:block;
Float:right;
padding:0px 0px 0px 5px;
Font-weight:bold;
font-size:9pt;
line-height:20px;
Color: #663300;
}
7. Finally, when the mouse is moved to the link, the link style is changed to specify a style:
. lanboxin A:hover {
Background-image:url (lanbj3.gif);
Color: #FFFFFF;
}
This completes the style code writing, the following gives the content of the structure of the code, of course, we are not the first to write the style code to write the structure of the code, generally from outside to, while writing style side of the structure of the Organization, I just to explain the convenience of the first of all to give the style code.
Like this list navigation bar uses the unordered table (ul/li) to achieve the more scientific, the structure code is as follows:
<ul class= "NAV" >
<li class= "Lanlist" >
<div class= "Lanboxin" >
<span></span><a href= "#" > Thoroughly understand the CSS box pattern 1</a>
</div>
</li>
<li class= "Lanlist" >
<div class= "Lanboxin" >
<span></span><a href= "#" > Thoroughly understand the CSS box pattern 2</a>
</div>
</li>
<li class= "Lanlist" >
<div class= "Lanboxin" >
<span></span><a href= "#" > Thoroughly understand the CSS box pattern 3</a>
</div>
</li>
<li class= "Lanlist" >
<div class= "Lanboxin" >
<span></span><a href= "#" > Thoroughly understand the CSS box pattern 4</a>
</div>
</li>
<li class= "Lanlist" >
<div class= "Lanboxin" >
<span></span><a href= "#" > Thoroughly understand the CSS box pattern 5</a>
</div>
</li>
</ul>
Source file package Download xhtml.rar
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
