The menu list is marked with UL/Li tags, and the menu items corresponding to the current page are marked with ID = "current". The menu items that move the mouse over are marked by the pseudo element: hover. First, arrange each Li element horizontally and remove the previous list character. Then, set the font color and background color of the # current object. Finally, set the font color and background color of the: hover object. That's simple. Everything is OK!
<! 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 = gb2312"/>
<Title> www.itcast.cn </title>
<Style type = "text/CSS">
*{
Font-size: 12px;
Text-align: center;
}
Body {
Background: # f0f0f0;
}
# Nav {
Width: 700px;
Margin: 20px auto;
Background: # f3c3f3;
Padding: 8px 12px;
List-style-type: none;
}
# Nav Li {
Display: inline;
Margin-Right: 8px;
}
# Nav Li {
Text-Decoration: none;
Color: #000;
}
# Nav Li A: hover {
Color: # FFF;
Background-color: # c3f3c3;
}
# Nav Li a # current {
Color: # c00;
Background-color: # CCC;
}
</Style>
</Head>
<Body>
<Ul id = "nav">
<Li> <a href = "http://www.itcast.cn" id = "current"> JAVA training </a> </LI>
<Li> <a href = "http://www.itcast.cn/">. Net training </a> </LI>
<Li> <a href = "http://www.itcast.cn/"> Oracle training </a> </LI>
<Li> <a href = "http://www.itcast.cn/"> EJB training </a> </LI>
<Li> <a href = "http://www.itcast.cn/"> workflow training </a> </LI>
</Ul>
</Body>
</Html>
How to change the navigation menu bar above to the navigation bar image format similar to that of the csdn blog background, you can design three images used as Tab pages in a simple way, they are used as background images in three states of the menu. Since I do not have any images, I can only present them as follows:
# Nav Li A: hover {
Color: # FFF;
Background-image: URL (/img/hover.gif );
}
# Nav Li a # current {
Color: # c00;
Background-image: URL (/img/active.gif );
}
At last, we can merge images in three states, such as hover.gif, active.gif, and normal.gif, into one image. Each state displays different image regions by positioning the coordinates of the image, the navigation bar image of the csdn blog background adopts this method, as shown below:
The code for merging multiple images into one image is as follows:
<! 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 = gb2312"/>
<Title> www.itcast.cn </title>
<Style type = "text/CSS">
*{
Font-size: 12px;
Text-align: center;
}
Body {
Background: # f0f0f0;
}
# Nav {
Width: 700px;
Margin: 20px auto;
Background: # f3c3f3;
Padding: 8px 12px;
List-style-type: none;
}
# Nav Li {
Display: inline;
Margin-Right: 8px;
}
# Nav Li {
Background-image: URL (http://writeblog.csdn.net/resources/images/tabrightF.gif );
Text-Decoration: none;
Color: #000;
Float: left;
Padding: 6px 15px 5px 10px;
Margin-Right: 3px;
}
# Nav Li A: hover {
Color: # FFF;
Background-position: Right-42px;
}
# Nav Li a # current {
Color: # c00;
}
</Style>
</Head>
<Body>
<Ul id = "nav">
<Li> <a href = "http://www.itcast.cn" id = "current"> JAVA training </a> </LI>
<Li> <a href = "http://www.itcast.cn/">. Net training </a> </LI>
<Li> <a href = "http://www.itcast.cn/"> Oracle training </a> </LI>
<Li> <a href = "http://www.itcast.cn/"> EJB training </a> </LI>
<Li> <a href = "http://www.itcast.cn/"> workflow training </a> </LI>
</Ul>
</Body>
</Html>
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
