导航栏=链接列表
导航条基本上都是一个无序的链接列表。
垂直导航栏
- 去掉列表ul默认style
- 去掉列表的默认边距和填充设置，设置为0
- 去掉链接a的默认下划线
- 将链接以block块显示，让整体变为可点击链接区域（不只是文本），并且制定块元素一个60像素的宽度
代码示例
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a:link,a:visited
{
display:block;
font-weight:bold;
color:white;
background-color:blue;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:red;
}
</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>
水平导航栏
- 去掉列表ul默认style
- 去掉列表的默认边距和填充设置，设置为0
- 去掉链接a的默认下划线
使用内联方式
- 将列表项 li 以block块显示，以达到删除换行符之前和之后每个列表项，显示为一行
代码示例
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
/* To fix the links will go outside the ul element issue */
padding-top:6px;
padding-bottom:6px;
}
li
{
display:inline;
}
a:link,a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
</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>
使用浮动方式
目的：所有元素宽度相等
- 将列表项 li 设置 float:left ，达到浮动款元素彼此 相邻的效果
- 将链接 a 以block块显示,
- 改变块元素的宽度（60px)
代码示例
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
/* To fix the li elements from going outside of the list issue */
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:white;
background-color:blue;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:red;
}
</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>
