CSS ????? ?
CSS Navigation Bar
Navigation Bar
????? ?? ???? ???? ?? ?? ?????? ?? ?????.
CSS? ???? ??? HTML ?? ?? ???? ?? ???? ??? ? ????.
Navigation Bar = List of Links
?? HTML ????? ????? ?? ?????.
? ???? ?? HTML ?? ????? ?? ???????.
navbar? ????? ??? ????? <ul> ? <li> ??? ???? ?? ?????.
?
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> <p>注意:我們用 href="#"作為測(cè)試連接.用在一個(gè)真正的web站點(diǎn)的url。</p> </body> </html>
?? ???? ??? ??? ??? ?????.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
- list-style-type:none - ?? ?? ?? ??? ?????. ?? ???? ?? ???? ???? ????. ????? ?? ?? ? ?? ??? 0
?? ?? ??
? ???? ?? ?? ??? ???? <a> ??? ???? ?????.display:block - ?? ??? ?? ??? ???? ?? ?? ??(????? ???)? ??? ? ?? ??? ??? ??? ? ??? ???.
width:60px - ?? ??? ????? ?? ??? ????. ??? ??? 60??? ????? ???.
?? ?? ????
??? ??? ???? ???.
??:
?? ?? ???? - ?? ?? ??
inline ?? float? ?????.
? ?? ?? ?? ???? ??? ??? ???? ??? float ??? ???? ???.??? ?? ??
?? ?? ??? ??? ?? ? ??? ??? ???? ????. ? ??? ?? ??????.
?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p>A background color is added to the links to show the link area.</p>
<p>Notice that the whole link area is clickable, not just the text.</p>
</body>
</html>?? ??:
display:inline; - ?????
??? ?? ?????. ???? ? ?? ?? ??? ?? ??? ???? ? ?? ?????.
?? ?? ??
?? ??? ??? ??? ????. - ?? ??? ??? ??? ??? <li> ??? ??? <a> ??? ??? ?????.
?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
?? ?:
- float:left - ?? ?? ?? ?? ?? ??? ???? ???????.
- display:block - ?? ??? ??? ???? ??? ?? ??? ?? ??(????? ???)?? ??? ??? ?????. width
- width:60px - ?? ??? ????? ?? ?????. ??? 60??? ????? ???
