<!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