「这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战 如下效果显示的导航栏
代码如下：
<head>
<meta charset="UTF-8">
<title>背景综合案例</title>
<style>
.nav a {
display: inline-block;
text-decoration: none;
background-color: hotpink;
width: 120px;
height: 58px;
color: #ffffff;
line-height: 48px;
text-align: center;
}
.nav .bj1 {
background: url(image/bg1.png) no-repeat;
}
.nav .bj1:hover {
background: url(image/bg11.png) no-repeat;
}
.nav .bj2 {
background: url(image/bg2.png) no-repeat;
}
.nav .bj2:hover {
background: url(image/bg22.png) no-repeat;
}
.nav .bj3 {
background: url(image/bg3.png) no-repeat;
}
.nav .bj3:hover {
background: url(image/bg11.png) no-repeat;
}
.nav .bj4 {
background: url(image/bg4.png) no-repeat;
}
.nav .bj4:hover {
background: url(image/bg22.png) no-repeat;
}
.nav .bj5 {
background: url(image/bg5.png) no-repeat;
}
.nav .bj5:hover {
background: url(image/bg11.png) no-repeat;
}
</style>
</head>
<body>
<div class="nav">
<a href="#" class="bj1">五彩导航</a>
<a href="#" class="bj2">五彩导航</a>
<a href="#" class="bj3">五彩导航</a>
<a href="#" class="bj4">五彩导航</a>
<a href="#" class="bj5">五彩导航</a>
</div>
</body>
</html>
块元素
1）独占一行
2）行高、行宽、外边距可以给定
3）默认宽度是父级标签的宽度
4）是一个容器及盒子，可以放行内或者块级元素
行内元素
1）一行显示多个元素
2）行高、行宽、外边距不可以给定
3）默认宽度高度与其本身内容有关
4）行内元素只能容纳文本或其他行内元素
块级元素与行内元素的转换
display: inline-block;表示行内块元素
display: block;表示行内元素转换为块元素
display: inline;表示块元素转换为行内元素
背景元素
背景图片：background: url(image/bg1.png);
背景颜色: background-color: hotpink;
背景平铺：
background-repeat: no repeat;
background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
背景位置：
background-position：center center;
background-position：center top;
background-position：left center;/background-position：center left;不分左右
background-position：20px 50px; x坐标与y坐标按左右展示
background-position：center 50px; x坐标与y坐标按左右展示
背景为固定：
background-attachment: scroll(滚动)、fixed(固定)
背景半透明：
background：rgba(0,0,0,0.5)
hover表示鼠标放在那里哪里就改变冒号后不能有空格
.nav .bj1:hover { background: url(image/bg11.png);
