htmlとcssでウェブサイトのアクティブページを強調表示する方法

Question

私は非常に新しい（先月開始した）私は自分のウェブサイト上のアクティブなページへのリンクを強調しようとしてきました。私はいくつかの異なる方法を使いましたが、何が間違っているかを知ることはできません。どんな助けもありがとう。

<nav> 
    <ul> 
    <li><a href="index.html" class="active-page">Home</a> 
    <li><a href="page1.html"> History</a></li> 
    <li><a href="page2.html"> Ownership</a></li> 
    <li><a href="page3.html"> Purchase</a></li> 
    </ul> 
</nav> 

これはこれは、ナビゲーションが含まれています全体のヘッダのCSSで私のウェブサイトのナビゲーションバーの最初のページのHTML

Header{ 
    Background-color:#0D2831; 
    Color: #35d6c6; 
    padding-top:20px; 
    padding-bottom:30px; 
    Min-Height:90px; 
    border-bottom :#5292A7; 
    font-family:font-family:'Open Sans', sans-serif; 
    Text-transform:Uppercase; 
    min-height:180px; 
} 

Header a{ 
    text-decoration:None; 
    Text-transform:None; 
    font-size:20px; 
    color:#35d6c6; 
} 

Header ul{ 
    margin:0; 
    padding:0; 
} 

Header li{ 
    display:inline; 
    padding: 0 20px 0 20px; 
} 

Header #logo{ 
    float:left; 
} 

Header #logo h1{ 
    margin:0; 
} 

header nav{ 
    float: right; 
    padding-bottom:30px; 
} 

Header .hilight, a{ 
    color: #FFFFFF; 
} 

Header a:hover{ 
    color:#FFFFFF; 
    font-weight:bold; 
} 

header nav .activepage{ 
    Background-color:white; 
} 

です。

誰もが、私はどちらか見つからないか、間違っていることが理解されるであろう任意の助けを強調するからアクティブなページを防止している:)

Answer 1

は以下のように、あなたのスタイルシートにいくつかのCSSを追加します

.active-page{ 
    background-color:red; 
    border-bottom:1px solid white; 
} 

Answer 2

更新をあなたのCSSを正しいクラス名を反映するためにやっているものを私に伝えることができるだろう場合。あなたは以下のようにそれを変更しようとすることができますので、

header nav .active-page { 
    background-color:white; 
} 

Answer 3

私は1つの間違ったテキストを参照してください。 前：

header nav .activepage{ 
    Background-color:white; 
} 

後：アクティブなページのための

header nav .active-page{ 
    Background-color:white; 
} 

Answer 4

あなたはそれを単に

nav .active-page { 
Background-color:white; 

}

を行うことができます