css学习制作一个导航栏dome

功能

实现当鼠标悬浮时，样式为切换背景图片。
行内元素，没有宽高，转换为inline-block.
如图：

知识点

/* 因为a是行内元素，没有宽高，所以要转换为inline-block */
display: inline-block;
/* 去掉下划线 */
text-decoration: none;
/* 当行内元素的高度设置的和父元素一样高，就垂直居中了 */
line-height: 50px;

代码

<!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>
</head>
<style>
    .nav {
        text-align: center
    }
    .nav a {
         120px;
        height: 50px;
        /* 因为a是行内元素，没有宽高，所以要转换为inline-block */
        display: inline-block;
        background-image: url(img/bg.png);
        text-align: center;
        /* 去掉下划线 */
        text-decoration: none;
        /* 当行内元素的高度设置的和父元素一样高，就垂直居中了 */
        line-height: 50px;
        color:#fff;
    }
    .nav a:hover{
        background-image: url(img/bgc.png)
    }
</style>
<body>
    <div class="nav">
        <a href="#">网站导航</a>
        <a href="#">网站导航</a>
        <a href="#">网站导航</a>
        <a href="#">网站导航</a>
        <a href="#">网站导航</a>
    </div>
</body>
</html>