做一个简单的五彩导航栏：
效果图：
功能：
鼠标放上面可以变换另外一种颜色，可以点击跳转到链接；
思路：
1.五个a 标签实现，把a标签转换为行内块模式
2.使用a:hover 伪类选择器
3.对盒子进行原始背景定义
4.使用line-height < height 实现文字垂直居中在图片中央（视觉上）
代码如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>a {display: inline-block;height: 58px;width: 120px;color: rgb(255, 255, 255);font-style: 14px;text-decoration: none;/* 行高要比盒子高度小一些，这样文字会靠上一点点，肉眼效果就在图片的中间 */line-height: 48px;text-align: center;}/* 路径要设置对，相对路径/ 绝对路径\ */.demo1 {background-image: url(images/bg1.png);a}.demo1:hover {background-image: url(images/bg7.png);}.demo2 {background-image: url(images/bg2.png);}.demo2:hover {background-image: url(images/bg6.png);}.demo3 {background-image: url(images/bg3.png);}.demo3:hover {background-image: url(images/bg5.png);}.demo4 {background-image: url(images/bg4.png);}.demo4:hover {background-image: url(images/bg1.png);}.demo5 {background-image: url(images/bg5.png);}.demo5:hover {background-image: url(images/bg3.png);}</style>
</head><body><a href="" class="demo1">五彩导航</a><a href="" class="demo2">五彩导航</a><a href="" class="demo3">五彩导航</a><a href="" class="demo4">五彩导航</a><a href="" class="demo5">五彩导航</a></body></html>欢迎指正 谢谢
