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>&nbsp;</span>
        <div id="bb">游戏2</div>
        <span>&nbsp;</span>
        <div>游戏3</div>
        <div>游戏4</div>
        <span>&nbsp;</span>
        <div>游戏5</div>
        <span>&nbsp;</span>
        <div>游戏6</div>
        <span>&nbsp;</span>
        <div>游戏7</div>
        <span>&nbsp;</span>
        <div>游戏8</div>
        <span>&nbsp;</span>
        <div>游戏9</div>
    </div>
</body>
</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 之间使用 &nbsp 添加空格

<body>
    <div id="aa">
        <div>游戏1</div>
        <span>&nbsp;</span>
        <div id="bb">游戏2</div>
        <span>&nbsp;</span>
        <div>游戏3</div>
        <div>游戏4</div>
        <span>&nbsp;</span>
        <div>游戏5</div>
        <span>&nbsp;</span>
        <div>游戏6</div>
        <span>&nbsp;</span>
        <div>游戏7</div>
        <span>&nbsp;</span>
        <div>游戏8</div>
        <span>&nbsp;</span>
        <div>游戏9</div>
    </div>
</body>

Bug.ink