1. common practical horizontal navigation bar
Create an HTML file:
Code:
<! 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> common horizontal navigation creation methods </title>
</Head>
<Style type = "text/CSS">
# Globallink {
Margin: 0px; padding: 0px;/* the boundary and fill fields are both 0 */
Clear: Both;/* clear floating */
}
# Globallink ul {
List-style: none;/* The list image is not displayed. The default value is solid circle */
Padding: 0px; margin: 0px;
Display: inline;/* default value of the inline object. Use this value to delete rows from objects */
}
# Globallink Li {
Float: Left;/* This is the key statement. Li achieves horizontal arrangement without line breaks */
Text-align: center;/* align text in center */
Width: 100px;/* the width of each connection block is 100px */
}
# Globallink Li {
Display: block;/* Of course, the block-level elements are displayed, making the link a button */
Padding: 9px 6px 11px 6px;/* fill in top, right, bottom, left */
Margin: 0px;/* the boundary is 0px */
}
# Globallink Li A: Link, # globallink Li A: visited {
Color: # FFF;/* set the font color to white. In CSS, the abbreviation can be: # f98 is the same as ff9988 */
Font-size: 17px;/* the font size is 17px */
Text-Decoration: none;/* do not show the underline */
Background-color: # 3366cc;/* set the background color of the navigation bar to blue */
}
# Globallink Li A: hover {/* set the style table attribute when an object is hovering over it */
Background-color: # ff9933;/* change the background color */
Text-Decoration: underline;/* underline */
Font-size: 20px;/* When hovering over the mouse, the font is enlarged to 20px */
}
</Style>
<Body>
<Div id = "globallink">
<Ul>
<Li> <a href = "#"> homepage </a> </LI>
<Li> <a href = "#"> online campus </a> </LI>
<Li> <a href = "#"> Management Training </a> </LI>
<Li> <a href = "#"> online classroom </a> </LI>
<Li> <a href = "#"> I want to register </a> </LI>
<Li> <a href = "#"> cultural salon </a> </LI>
<Li> <a href = "#"> college Forum </a> </LI>
<Li> <a href = "#"> about us </a> </LI>
</Ul>
</Div>
</Body>
</Html>
This is the most common process of creating a navigation bar. It allows you to hover your mouse over the navigation bar and release the navigation bar.
The following figure shows the effect of opening a webpage:
The effect of IE hover is as follows:
If you are interested, you can change Background-color: # ff9933; to background-image: XXXXX; to try it and put it into your favorite image to make your own personalized navigation.
2. vertical red Three-dimensional navigation
<! 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> vertical red stereo navigation </title>
</Head>
<Style type = "text/CSS">
# Navigation {
Width: 115px;
Font-size: 13px;
}
# Navigation ul {
List-style-type: none;/* do not display the project symbol */
Margin: 0px;
Padding: 0px;
}
# Navigation Li {
Border-bottom: 1px solid # ed9f9f;/* Add underline */
}
# Navigation Li {
Display: block;/* block display */
Padding: 5px 5px 5px 0.5em;
Text-Decoration: none;
Border-left: 12px solid #711515;/* rough red edge on the left */
Border-Right: 1px solid #711515;/* shadow on the right */
Background-image: URL (img/17.jpg );
}
# Navigation Li A: Link, # navigation Li A: visited {
Background-color: # c11136;
Color: # ffffff;
}
# Navigation Li A: hover {/* When the mouse passes */
Background-color: #990020;/* change the background color */
Color: # FFFF00;/* change the text color */
}
</Style>
<Body>
<Div id = "navigation">
<Ul>
<Li> <a href = "http://www.cnblogs.com/"> blog home </a> </LI>
<Li> <a href = "http://space.cnblogs.com/"> community </a> </LI>
<Li> <a href = "http://space.cnblogs.com/"> flash </a> </LI>
<Li> <a href = "http://space.cnblogs.com/Q"> Bo Wen </a> </LI>
<Li> <a href = "http://news.cnblogs.com/"> News </a> </LI>
<Li> <a href = "http://space.cnblogs.com/myfriends"> friends </a> </LI>
<Li> <a href = "http://wz.cnblogs.com/"> network Abstract </a> </LI>
<Li> <a href = "http://www.cnblogs.com/csn0721/"> my blog </a> </LI>
</Ul>
</Div>
</Body>
</Html>
FF browsing effect:
IE Mouse clicks
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
