20240309web前端_第二周作业_完成游戏导航栏
作业：游戏导航栏
成果展示：
完整代码：
<!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>