目标效果：
要点：鼠标悬浮时显示蓝色背景图片
今日思考：1.结构：div中放入4个<a>标签
2.插入背景图片（插入图片并不能撑起a，需要给宽和高，即图片的宽高）
但<a>定义了宽、高后仍无效果 ？
原因：<a>是行内元素，需要转换为行内块元素（display： inline-block）
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .nav { /* 6个链接水平居中 对行内元素和行内块元素都有效果 */ text-align: center; } .nav a { width: 120px; height: 50px; display: inline-block; background: url(images/bg.png) no-repeat center top; text-decoration: none; color: blanchedalmond; line-height: 50px; } .nav a:hover { background: url(images/bgc.png); } </style> </head> <body> <div class="nav"> <a href="#">网站首页</a> <a href="#">网站首页</a> <a href="#">网站首页</a> <a href="#">网站首页</a> </div> </body> </html>
