作业：游戏导航栏
成果展示：
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导航栏</title>
<style>
div{
display: inline-block;
}
#aa{
/* 边框 */
border-width: 1px;
border-style: solid;
border-radius: 20px;
width: 1200px;
height: 54px;
background-color: rgb(35, 26, 54);
/* 字体 */
color: white;
font-size:30px;
text-align: center;
font-weight: bolder;
line-height: 1.8;
text-shadow: 10px 10px 10px gray;
}
#bb{
background-color: brown;
}
</style>
</head>
<body>
<div id="aa">
<div>游戏1</div>
<span> </span>
<div id="bb">游戏2</div>
<span> </span>
<div>游戏3</div>
<div>游戏4</div>
<span> </span>
<div>游戏5</div>
<span> </span>
<div>游戏6</div>
<span> </span>
<div>游戏7</div>
<span> </span>
<div>游戏8</div>
<span> </span>
<div>游戏9</div>
</div>
</body>
</html>解析：
<style>标签用于定义文档样式信息，即css（层叠式样式表），允许开发者在html文件中嵌入样式信息，以控制html元素的外观和布局。
主体框架使用块级元素 div 包裹，并且使用元素属性转换将块级元素转换成行内样式并保留。
div{
display: inline-block;
}边框：
为了更好的区分并且调整每个块级 div 的属性，我们将外 div 的 id 定义为 "aa" ，然后在<style>标签中使用 #aa 定义外层框架的属性。
<div id="aa">
</div>
#aa{
}
定义边框属性，样式设置为 solid 实线，使用 border-radius 调整边框的弧度， width 属性调整边框的粗细。
/* 边框 */
border-width: 1px;
border-style: solid;
border-radius: 20px;定义边框大小，为美观将 width 属性设置为 1200px ， height 属性设置为 54px ，根据题意背景颜色通过 background-color 设置。
width: 1200px;
height: 54px;
background-color: rgb(35, 26, 54);字体：
在 #aa 中字体颜色 color 设置白色 white ，通过 font-size 设置字体大小，使用 text-align 使字体居中， font-weight:bolder 加粗字体， line-height 不断调整行距，达到题目要求，使用 text-shadow 添加字体阴影并调整
/* 字体 */
color: white;
font-size:30px;
text-align: center;
font-weight: bolder;
line-height: 1.8;
text-shadow: 10px 10px 10px gray;设置游戏2的属性：
将其 div 的 id 设置为 "bb"
<div id="bb">游戏2</div>在<style>标签中，通过 #bb 游戏2的样式信息，背景颜色调整
#bb{
background-color: brown;
} 在主体标签中，为美观，在每个被嵌套的 div 之间使用   添加空格
<body>
<div id="aa">
<div>游戏1</div>
<span> </span>
<div id="bb">游戏2</div>
<span> </span>
<div>游戏3</div>
<div>游戏4</div>
<span> </span>
<div>游戏5</div>
<span> </span>
<div>游戏6</div>
<span> </span>
<div>游戏7</div>
<span> </span>
<div>游戏8</div>
<span> </span>
<div>游戏9</div>
</div>
</body>
