* {
font-size:12px;
Text-align:center;
}
#nav {
width:520px;
border-bottom:1px solid #06f;
margin:20px Auto 0 auto;
}
#nav Li {
Display:inline;
List-style-type:none;
}
#nav Li A:link, #nav Li a:visited {
Float:left;
margin-right:5px;
padding:5px 10px 5px 8px;
Text-decoration:none;
Color: #000;
Background: #ffe67d;
border-left:5px solid #fc0;
}
#nav Li A:hover {
Color: #060;
border-left:5px solid #f60;
}
First we made the overall layout declaration, declaring the text size and centering alignment. What needs to be explained is that, in FF, we set margin:0 Auto. To achieve the center of the container, but in IE, this is not enough, you also need to declare the Text-align:center in the parent container. We must remember this, otherwise it is easy to make mistakes.
Declare the UL unordered list width is 520ox, the bottom frame one pixel realization, the color is #06f. We set the NAV this UL, the distance from the top 20px, the distance from the bottom to zero, about the distance of auto. This enables the NAV to be centered horizontally and vertically from the browser window 20px.
Declares that an Li list item is inline (in-line) and the list preset is marked as none.
We need to understand #nav Li A:link, #nav Li a:visited definition, to set the style of the link.
Float to the left, and the right margin is 5px. This is to set the link element to rank from left to right, and the right part between the elements is 5px apart.
Set padding, top 5px, right 10px, down 5px, left 8px. This setting allows our linked text to be in the right place.
Suppresses the underline of linked text and sets the color of the linked text to #000. The background color of the link element is #ffe67d.
The left border is a five-pixel solid line with a #fc0 color. This phrase forms our little vertical bar.
We form a mouse-activated style by following #nav Li A:hover.
The color of the linked text changes to #060. The left border is a five-pixel solid line with a #f60 color.
So we will move the small vertical bar menu is finished. Look at the final effect:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/><title>www.webjx.com</title><style type=" Text/css ">* {font-size:12px; Text-align:center;} #nav {width:520px;border-bottom:1px solid #06f; margin:20px auto 0 auto;} #nav li {display:inline;list-style-type:none;} #nav Li A:link, #nav li a:visited {float:left;margin-right:5px;padding:5px 10px 5px 8px;text-decoration:none;color: #000 Background: #ffe67d; border-left:5px solid #fc0;} #nav li a:hover {color: #060; border-left:5px solid #f60;} </style></pead><body><ul id= "NAV" > <li><a href= "http://www.webjx.com/" > website Construction Course </a></li> <li><a href= "http://www.webjx.com/" > Web page Manufacturing example </a></li> <li><a href= "http://www.webjx.com/" > Animation tutorial </a></li> <li><a href= "http://www.webjx.com/" > Web effects instance </a></li> <li><a href= "http ://www.webjx.com/"> Web Programming Technology </a></li></ul></body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
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
