1. Common and practical horizontal navigation bar
Create a new html file:
Code:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
#globallink{
🎜> clear:both; /*Do not display list images, default Solid Circles and other*/
padding: 0px; margin: 0px;Display: Inline;/*The default value of the Inner United Object. Use this value to delete rows from the object*/
}
#globallink li{
float:left; /*This is the key statement, li does not wrap to achieve horizontal orientation Arrangement*/
text-align:center; /* Text-aligned center*/
width:100px; x*/
}
#globallink li a{
display:block; px 11px 6px; /*Padding top, right, bottom, left*/
margin:0px; /*Border is 0px*/
}
#globallink li a:link , #globallink li a:visited{
color:#FFF; /*The font color is set to white, which can be abbreviated in CSS. For example: #f98 and ff9988 are the same*/
font -size:17px; /*The font size is 17px*/
text-decoration:none; /*Do not display underline*/
background-color:#3366CC; /*Set navigation The background color of the bar is blue*/
}
#globallink li a:hover{
background-color:#ff9933; /*改变背景颜色*/
text-decoration:underline; /*加上下划线*/
font-size:20px; /*鼠标悬停时字体放大为20px*/
}
This is the most common navigation bar production process, which implements hovering and releasing before mouse access Departure effect.
The following is the display effect of opening a web page:
The following is the effect of IE mouseover:
Interested friends can try it out by changing background-color:#ff9933; to background-image:XXXXX; and add your favorite pictures to create your own personalized navigation.
2. Vertical red three-dimensional navigation
#navigation {
width:115px;
font-size:13px;
}
#navigation ul {
list- style-type:none; {
}
#Navigation li a {
Display: block; /* Block display*/
5px text-decoration: Thick red border 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{ Change background color*/
color:#ffff00; >
< div id="navigation">
Bowen
//news.cnblogs.com/">news
a href="http://wz.cnblogs.com/">Net Excerpt
.cnblogs.com/csn0721/">My blog
>
FF browsing effect:
IE mouse click effect