<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<TITLE>CSS Navigation </title>
<style>
#vertical
{
width:140px; Set the width of the div container
Margin-left:auto; Combine to center a DIV in a page
Margin-right:auto;
}
#horizontal
{
width:900px;
Margin-left:auto;
Margin-right:auto;
}
#horizontal Li
{
Float:left;
}
Ul
{
List-style:none; Remove Dots
margin:0;
padding:0;
}
a:link,a:visited
{
Display:block; displaying a link as a block element makes the entire link area clickable (not just text), but also allows us to specify the width.
Font-weight:bold;
Color: #FFF;
Background-color: #CCC;
width:130px;
padding:5px;
Text-align:center;
Text-decoration:none; Hyperlink text is not underlined
Text-transform:uppercase;
}
A:hover,a:active
{
Background-color: #CE1804;
}
</style>
<body>
<div id= "Vertical" >
<ul>
<li><a href= "#" >HOME</a></li>
<li><a href= "#" >CONTEAT</a></li>
<li><a href= "#" >NEWS</a></li>
<li><a href= "#" >ABOUT</a></li>
</ul>
</div>
<div id= "Horizontal" >
<ul>
<li><a href= "#" >HOME</a></li>
<li><a href= "#" >CONTEAT</a></li>
<li><a href= "#" >NEWS</a></li>
<li><a href= "#" >ABOUT</a></li>
</ul>
</div>
</body>
***
div width By default is the browser's 100% is how wide the browser is, he has how wide!
Div High Default is you set the character size plus line height!
Do not enter content only display div background color case div The smallest height is 10px you can't let it be 0px high
***
CSS Navigation bar