实现如下图所示的导航栏
要求：
1.鼠标光标移动在游戏位置时会有背景变化
2.添加阴影
代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业</title>
<link rel="stylesheet" href="../../css/作业.css">
<style>
span:hover{
background-color:rgb(86, 3, 3);
}
span{
box-shadow: 2px 2px 2px rgb(120, 116, 116);
}
</style>
</head>
<body>
<div>
<span>游戏1</span>
<span>游戏2</span>
<span>游戏3</span>
<span>游戏4</span>
<span>游戏5</span>
<span>游戏6</span>
<span>游戏7</span>
<span>游戏8</span>
<span>游戏9</span>
</div>
</body>
</html>引入css文件如下图所示：
div{
/* 字体颜色 */
color: aliceblue;
/* 字体位置 */
text-align: center;
/* 边框的阴影 */
box-shadow: 5px 5px 5px rgb(120, 116, 116);
/* 边框弧度 */
border-radius: 25px;
border-width: 2px;
width: 600px;
height: 25px;
background-color: midnightblue;
}运行结果如下：
光标移动到文字时背景变化：
212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
