<!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= "#" > Navigation </ A > < A href = "#" > Navigation </ A > < A href = "#" > Navigation </ A > < A href = "#" > Navigation < / A > < A href = "#" > navigation </ A > < A href = "#" > navigation </ A > </div> </body> </html>
Achieve results is as follows:
important point:
1.background image: url (), a relative path, the folder name is best to use English.
2. The use of the selector;
3. centers the text, text-align
4. inline element display: inline-block