<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>做个导航栏</title>
<style>
.nav a{
width: 120px;
height: 50px;
background-color: #FFD700;
text-decoration: none;
display:inline-block;
text-align: center;
/* 垂直居中需要用到行高
行高=上距离+文本高度+下距离 */
line-height: 50px;
background-image: url(image/bank6_06.png);
background-repeat:no-repeat;
background-position:center;
/* 默认值，不改变背景图片的高度和宽度 */
/* background-size:auto; */
/* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */
/* background-size:100px 50px; */
/* 0％~100％之间的任何值，将背景图片宽高按百分比显示，当设置一个值的时候同也将其作为图片宽度来等比缩放 */
/* background-size:10%; */
/* 将背景图片等比缩放填满整个容器 */
background-size:cover;
/* 将背景图片等比缩放至某一边紧贴容器边缘 */
/* background-size:contain; */
/* background-size:120px 50px; */
}
a:hover{
/* 鼠标移上去修改背景图片 */
color:sandybrown;
/* background-image: url(image/bank6_061.png); */
/* 鼠标移上去增加一个背景半透明/后面的0.1是透明度 */
background: rgba(0,0,0,0.1);
}
.nav{
text-align: center;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">体育</a>
<a href="#">娱乐</a>
<a href="#">汽车</a>
</div>
</body>
</html>
