<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<style>
div {
width: 600px;
height: 30px;
background-color: rgb(54, 64, 92);
display: flex; /* 开启Flexbox布局 */
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
border-radius: 50px;
box-shadow: 10px 10px 10px gray;
border: 1px solid black; /* 简写方式设置边框 */
padding: 0 20px; /* 两侧内边距，为li元素与div边缘之间留出空间 */
}
li {
font-size: 10px;
list-style-type: none;
display: inline-block; /* 以便设置宽度和高度 */
color: white;
margin: 2px 5px 2px 5px; /* li元素之间的间距 */
border-style:groove;
border-color: rgb(54, 64, 92);
border-radius: 50px;
box-shadow: 2px 2px 2px white;
}
li:hover{
background-color: red;
}
</style>
</head>
<body>
<div>
<li>游戏1</li>
<li>游戏2</li>
<li>游戏3</li>
<li>游戏4</li>
<li>游戏5</li>
<li>游戏6</li>
<li>游戏7</li>
<li>游戏8</li>
<li>游戏9</li>
</div>
</body>
</html>
扫一扫
1945
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
