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>

这是我网站导航栏第一页的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;
}

这是包含导航的整个标题的CSS。

如果有人能够告诉我我错过了什么或做错了会阻止活动页面突出显示任何帮助，我们将不胜感激：）

Answer 1

我看到一个错误的文字，因此您可以尝试更改它，如下所示：之前：

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

后：

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

Answer 2

更新您的css以反映正确的类名。

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

Answer 3

对于活动页面，在样式表中添加一些css，如

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

Answer 4

你可以做到这一点

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

}

如何使用html和css突出显示网站上的活动页面

4 个答案: