상단 제목 표시줄 표시

1, 상단 제목 표시줄의 초기 상태를 디자인합니다.

<div id="nav">
<div id="inner-nav">
    <a href="#">我的海贼</a>
    <a href="#">路飞简介</a>
    <a href="#">索隆简介</a>
    <a href="#">娜美简介</a>
    <a href="#">其他人物简介</a>
</div>
</div>

디스플레이:

2, 색상 스타일 추가

body{
    margin: 0;
    margin-bottom: 80px;
    background-color:lightblue;
}
#nav{
        width: 100%;
        background-color: skyblue;
        height: 80px;
        left: 0;
        top: 0;
        position: fixed;
        z-index: 2;
        /*text-align: center;*/
    }
    #inner-nav{
        width: 1000px;
        margin: 0 auto;
        text-decoration: none;
        text-align: right;
        height: 80px;
        line-height: 80px;
    }
    #inner-nav a{
        margin: 0 20px;
        text-decoration: none;
        color: blue;
        font-size: 24px;
        display: inline-block;
        height: 80px;
    }
    #inner-nav a:hover{
    background-color: white;
}

디스플레이: