Step 1: No style
I. Results
Ii. HTML
[Html]
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> list and navigation bar </title>
</Head>
<Body>
<Ul>
<Li> <a href = "#"> home </a> </li>
<Li> <a href = "#"> about us </a> </li>
<Li> <a href = "#"> products </a> </li>
<Li> <a href = "#"> services </a> </li>
<Li> <a href = "#"> contact </a> </li>
</Ul>
</Body>
</Html>
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> list and navigation bar </title>
</Head>
<Body>
<Ul>
<Li> <a href = "#"> home </a> </li>
<Li> <a href = "#"> about us </a> </li>
<Li> <a href = "#"> products </a> </li>
<Li> <a href = "#"> services </a> </li>
<Li> <a href = "#"> contact </a> </li>
</Ul>
</Body>
</Html>
Step 2: Basic Style
I. Results
Ii. HTML
[Html]
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> list and navigation bar </title>
<Link href = "css/navigation.css" rel = "stylesheet" type = "text/css"/>
</Head>
<Body>
<Ul>
<Li> <a href = "#"> home </a> </li>
<Li> <a href = "#"> about us </a> </li>
<Li> <a href = "#"> products </a> </li>
<Li> <a href = "#"> services </a> </li>
<Li> <a href = "#"> contact </a> </li>
</Ul>
</Body>
</Html>
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> list and navigation bar </title>
<Link href = "css/navigation.css" rel = "stylesheet" type = "text/css"/>
</Head>
<Body>
<Ul>
<Li> <a href = "#"> home </a> </li>
<Li> <a href = "#"> about us </a> </li>
<Li> <a href = "#"> products </a> </li>
<Li> <a href = "#"> services </a> </li>
<Li> <a href = "#"> contact </a> </li>
</Ul>
</Body>
</Html>
Iii. CSS
[Css]
*{
Margin: 0;
Padding: 0;
}
Body {
Font: 11px Verdana, Geneva, sans-serif;
Background: #666;
}
Ul {
List-style: none;
}
*{
Margin: 0;
Padding: 0;
}
Body {
Font: 11px Verdana, Geneva, sans-serif;
Background: #666;
}
Ul {
List-style: none;
}
Step 3: horizontal navigation bar
I. Results
Ii. HTML
[Html]
<Ul id = "nav">
<Li> <a href = "#"> home </a> </li>
<Li> <a href = "#"> about us </a> </li>
<Li> <a href = "#"> products </a> </li>
<Li> <a href = "#"> services </a> </li>
<Li> <a href = "#"> contact </a> </li>
</Ul>
<Ul id = "nav">
<Li> <a href = "#"> home </a> </li>
<Li> <a href = "#"> about us </a> </li>
<Li> <a href = "#"> products </a> </li>
<Li> <a href = "#"> services </a> </li>
<Li> <a href = "#"> contact </a> </li>
</Ul>
Iii. CSS
# Nav
{
Margin-top: 50px;
Overflow: hidden;
Height: 1%;
Background: url (../images/nav-bg.png) repeat-x;
Text-transform: capitalize;
}
# Nav li
{
Float: left;
Background: url (../images/line.gif) no-repeat center right;
Padding-right: 1px;
}
# Nav li
{
Display: block;
Height: 30px;
Line-height: 30px;
Padding: 0 20px;
Color: black;
Text-decoration: none;
}
# Nav li a: hover
{
Background: url (../images/nav-bg.png) repeat-x left bottom;
Color: white;
}
[Description]
Margin-top: 50px;
The distance between the navigation bar and the top of the page is 50px;
Overflow: hidden;
The content will be trimmed and the rest will be invisible.
Height: 1%;
The height is 1% of the parent element. If the parent element does not set a height value, it does not take effect. The actual height is determined by the internal element. Here, it is used with overflow: hidden; to eliminate some bugs in earlier IE versions.
Background: url (../images/line.gif) no-repeat center right;
Center the right side of the vertical line separator Image
Padding-right: 1px;
Fill 1px inside the right side, which is the position left for the vertical line to separate the image
Background: url (../images/nav-bg.png) repeat-x left bottom;
Left bottom is equivalent to 0-30px
[Technical points]
The size of the navigation bar in the list is determined by the layer-3 label. The top layer label is a, the height is 30px, the width is 20px + the text width is 20px, and the second layer is li, width = the width of a + 1px, the height of 30px is determined by a; the outermost layer is <ul id = "nav"> the width of 100%, and the height of 30px is determined by li.
[Picture]
Line.gif
Nav-bg.png