<header>

    <div class="container">

        <a href="index.html"><img src="C:/Users/Administrator/Desktop/images/logo.png"></a>

        <nav>

             <a class="Home active" href="index.html">Home</a>

             <a class="Course" href="#">Course</a>

             <a class="Actual" href="#">Actual</a>

             <a class="Plan" href="#">Plan</a>

             <a class="FAQ" href="#">FAQ</a>

             <a class="Notes" href="#">Notes</a>

        </nav>

    </div>

</header>

下面是设置的css

header > .container > a {

display: block;

float: left;

margin: 5px 25px;

}

header > .container > nav {

float: right;}

}

}

header > .container > nav > a {

font-size: 24px;

line-height:73px;

display: block;

float: left;

width: 110px;

height: 73px;

text-align: center;

color: #fff;

}<!--主要就是header下的container的nav下a标签的设置是无效的，在页面内不显示效果-->

header > .container > nav > a.Home { background: #433b90; }

header > .container > nav > a.Course { background: #017fcb; }

header > .container > nav > a.Actual { background: #78b917; }

header > .container > nav > a.Plan { background: #feb800; }

header > .container > nav > a.FAQ { background: #f27c01; }

header > .container > nav > a.Notes { background: #d40112; }

header > .container > nav > a:hover,

header > .container > nav > a.atcive {

padding-bottom: 7px;

}