Author: webflash time: Document Type: original from: Blue ideal
Author: Tang Guohui
Implementation principle animation demonstration: http://www.blueidea.com/articleimg/2007/03/4563/cssNav.swf
Self-tutorialGetting started with CSS box mode (getting started with DIV layout)Since its publication, it has been well received and supported by all netizens. At the request of all netizens and to thank all netizens for their support, I will release a continuing tutorial, to deepen your understanding of the CSS box mode. This tutorial is intended for readers or DIV layout beginners. If you are a master, don't waste your time.
I will explain how to create a vertical CSS navigation bar instance this time. During the process, I will extend the "box" concept mentioned in the previous tutorial. If you have not read my previous tutorial, or you still don't understand the concept of "box". Please read the previous tutorials through the following two links, and then read back the tutorials, sorry for any inconvenience.
1. thoroughly understand the CSS box mode (DIV layout Quick Start)
2. thoroughly understand the CSS box mode (DIV layout Quick Start)
It is also easy to use CSS for navigation bar. In my previous tutorials, there was actually a simple horizontal navigation bar. At that time, only the style code was provided and not explained much, this is a relatively complex navigation bar. In order to deepen your understanding of the CSS box mode, select a navigation bar with multiple nested boxes.
First, let's look at the implementation principle animation demonstration:
Run code box
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "/> <br/> <title> thoroughly understand the CSS box mode (details of navigation bar instances) </title> <br/> <style type = "text/css"> <br/> <! -- <Br/> * {<br/> margin: 0px; <br/> padding: 0px; <br/>}< br/> # nav {<br/> background: url (http://www.hsptc.com/cssImg/bj.jpg) repeat-y; <br/> width: 200px; <br/> overflow: hidden; <br/>}< br/> # nav li {<br/> background: url (http://www.hsptc.com/cssImg/mylan.gif) no-repeat left center; <br/> height: 35px; <br/> width: pixel PX; <br/> padding-top: 15px; <br/>}< br/> # nav a {<br/> background: url (http://www.hsptc.com/cssImg/lanbj2.gif) no-repeat left center; <br/> text-decoration: none; <br/> height: 20px; <br/> width: 155px; <br/> display: block; <br/> float: right; <br/> padding: 0px 0px 0px 5px; <br/> font-weight: bold; <br/> font-size: 9pt; <br/> line-height: 20px; <br/> color: #630; <br/> border-left: 10px solid # f90; <br/>}< br/> # nav a: hover {<br/> background-image: url (http://www.hsptc.com/cssImg/lanbj3.gif); <br/> color: # FFFFFF; <br/>}< br/> --> <br/> </style> <br/> </pead> <br/> <body> <br/> <ul id = "nav"> <br/> <li> <br/> <a href = "#"> completely understand CSS box mode 1 </a> <br/> </li> <br/> <a href = "#"> completely understand CSS box mode 2 </a> <br/> </li> <br/> <li> <br/> <a href = "#"> fully understand CSS box mode 3 </a> <br/> </li> <br/> <li> <br/> <a href = "#"> fully understand CSS box mode 4 </a> <br/> </li> <br/> <li> <br/> <a href = "#"> fully understand the CSS box mode 5 </a> <br/> </li> <br/> </ul> <br/> </body> <br/> </ptml>
[Ctrl + A select all tips: you can modify some code and then press run]
Now let's look at the result chart:
The link in this navigation bar uses the switching effect of the background image. Move the mouse over the link and the background image and text color will change. The entire navigation bar uses the following four picture materials:
That is, two background images in different States are linked. The "monthly check" image on the left of each navigation bar is displayed, and the background image with a 1 pixel height on the outer side of the big box is displayed.
After reading the animation demonstration and result diagram, I also learned about the materials used. Now, please join me with curiosity to complete this navigation bar, after finishing this navigation bar, you will find that the original DIV layout is so simple. Hope you have more confidence in DIV layout!
First, we need to analyze how many boxes are used in this navigation bar. Before analysis, we still need to form an idea: Minimize and optimize XHTML code so that they basically have semantics. The minimal box implementation in this navigation bar is: the outermost side is a large box (ul), which is equal to the background image with a 1 pixel height and contains five small boxes (li) each navigation bar is contained, and the box is similar to the image "". The navigation bar contains a slightly smaller box (), the box contains a yellow box (the Left Border of a is barely understood as a box, because it is not as thin as a general border and looks like a box on a webpage) and a text link box (content of ).
Webpage Structure Code:
1
1. Now it is officially started. initialize the border and fill of each tag before doing so. The style is used here:
1 *{}{2. Assemble the largest box with a width of X. The height is autoscaling. The background image is bj.jpg and the background is repeated vertically. Use the <ul id = "nav"> method to reference the style and use the style:
1 # nav {}{3. assemble the box li of each navigation bar. The box is very similar to the "" image, and the "" image is placed on the left of the box in the form of a background, push the box content block to the right position with 15 PX filling (you can also consider specifying the boundary attribute for Sub-Level ), and align the box to the left (because the width of the box is smaller than the width of the outside box, if the box is equal, you do not need to consider alignment). Here we use the float attribute of the style, if you do not write a style, take its default value. The style code is as follows:
1 # nav li {}{4. assemble the link Box a. The style: display: block is used here. The link is displayed in bulk mode and the background image is arranged for the link. For the sake of security, the background is set to be unique, vertical center (if the Browser fails to interpret the error, and your background is not solid, the duplicate background caused by the box being too large will affect the appearance of the webpage), remove the underline in the link text style, the entire box is right aligned with the following style:
1 # nav {}{5. assemble a yellow box (the Left Border of a is unscientific if another box is used independently, because this method is the easiest) and add the following style to, the style code is as follows:
# Nav {
Border-left: 10px solid # f90;
}
6. Finally, when you move the mouse over the link, specify a style for the link style change:
# Nav a: hover {
Background-image: url(lanbj3.gif );
Color: # FFFFFF;
}
At this point, the style code is compiled. The structure code of the content section is provided above. If you combine them into a webpage, you can complete the creation of this navigation bar. Thanks again for the guidance and Optimization in this column.
Package and download the source file 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
