Home > Developer > Web Develop
<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
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
