After learning several examples of Adam, I wanted to create a navigation bar and accidentally opened the kangsheng chuangxiang website. I thought this navigation bar was good and decided to do it. My practice was as follows:
1. First look at his navigation bar;
2. I like designing images in fireworks, but I don't know much about ps. So I chose to design the images first in this software.
(One designed in fireworks)
3. Now it's time to create an XHTML page. I chose Dreamweaver CS3 to create a transitional XHTML page.
4. the HTML code is as follows:
Code
<Div id = "nav">
<Ul>
<Li> <a id = "home" class = "here" href = "#"> <span> Home </span> </a> </LI>
<Li> <a href = "#"> product </a> </LI>
<Li> <a href = "#"> service </a> </LI>
<Li> <a href = "#"> download </a> </LI>
<Li> <a href = "#"> help </a> </LI>
<Li> <a href = "#"> company </a> </LI>
<Li> <a href = "#"> purchase </a> </LI>
<Li> <a id = "IDC" href = "#"> virtual host </a> </LI>
</Ul>
</Div>
5. The following is the CSS code:
Code
<Style type = "text/CSS">
*{
Margin: 0;
Padding: 0;
}
Body {
Font-family: verdana, Arial, Helvetica, sans-serif, "";
Font-size: 12px;
Margin: 100px;
}
Li {list-style: none ;}
# Nav {
Margin: 0 auto;
List-style: none;
Height: 33px;
Position: relative;
White-space: nowrap;
Width: 800px;
Z-index: 1;
Background: url(navbg.png) Repeat-X;
}
# Nav Li {
Float: left;
Background: url(navbgbtnhot.png) right no-Repeat;
}
# Nav Li {
Font-weight: bold;
Padding: 9px 28px;
Color: # FFF;
Text-Decoration: none;
Display: block;
}
# Nav Li A. Here {
Margin-top: 1px;
Background: url(navbgleft2.png) No-repeat left;
}
# Nav Li A: hover {
Background: url(navbgbtn.png) No-repeat left;
Color: #000000;
}
# Nav Li a # Home, # nav Li a # home. Here {
Color: # FFF;
Background: url(navbgleft2.png) No-repeat left top;
Margin: 0;
}
# Nav Li a # Home: hover, # nav Li a # home. Here: hover {
Color: #000;
Background: url(navbgleft.png) No-repeat left top;
Margin-top: 1px;
}
# Nav Li a # IDC {
Padding: 9px 15px;
}
</Style>
All the images used are cut out in fireworks.
