<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>导航栏
</title>
<style>
.nav{
text-align: center;
}
.nav a{
width: 120px;
height: 50px;
display: inline-block;
background-image: url(images/bg1.png);
text-align: center;
color: #fff;
line-height: 50px;
text-decoration: none;
}
.nav a:hover{
background-image: url(images/bg2.png);
}
</style>
</head>
<body>
<div class="nav">
<a href="#">网站导航
</a>
<a href="#">网站导航
</a>
<a href="#">网站导航
</a>
<a href="#">网站导航
</a>
<a href="#">网站导航
</a>
<a href="#">网站导航
</a>
</div>
</body>
</html>
实现效果如下:
注意点：
1.background image :url()，相对路径，文件夹名称最好用英文。
2.选择器的使用；
3.文本居中对齐，text-align
4.行内元素 display:inline-block
转载于:https://www.cnblogs.com/fhtax/p/11220243.html
相关资源：flash导航条制作软件
