2017-04-05 63 views
0

我對代碼非常陌生(上個月開始),我一直試圖突出顯示指向我網站上活動頁面的鏈接。我已經使用了幾種不同的方法,並且找不到錯誤。任何幫助,將不勝感激。如何使用html和css在網站上突出顯示活動頁面

<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> 

這是我的網站

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; 
} 

的導航欄第一頁的HTML這是它包含了導航整個頭部的CSS。

如果有人將能告訴我什麼,我是丟失或做錯了,導致無法在活動頁面的突出任何幫助,將不勝感激:)

回答

0

的活動頁面在樣式表中添加一些CSS樣

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

更新你的CSS以反映正確的類名。

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

我看到一個錯誤的文本,所以你可以嘗試如下更改: 前:

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

後:

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

你可以這樣做只是

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

}

相關問題