Question

我一直试图掌握响应式布局。

导航栏上的活动链接似乎没有工作，我看不出我做错了什么。

我希望导航栏突出显示当前活动页面。在这种情况下，活动页面是主页。然而，目前它显示的是灰色背景，我希望它是橙色的。

如果有人可以查看代码，我将不胜感激。

HTML ：

<!DOCTYPE html>
<html>
    <head>
        <title>Responsive Layout</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <meta charset ="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

<body class="body">
    <header class="main-header">
        <img src="Images/logo.gif" alt="Logo">
        <nav><ul>
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
        </ul></nav>
    </header>


</body>

</html>

CSS ：

body{
    background-image: url('Image/bg.png');
    color: #000305;
    font-size: 87.5%;
    font-family: Arial;
    line-height: 1.5;
    text-align: left; 
        margin: 0;
    padding: 0;
    }

a {
    outline: 0;
    }

a img {
    border: 0px; 
    text-decoration: none;
}

a:link, a:visited{
    color: #CF5C3F;
    padding: 0 1px;
    text-decoration: none;

}

a:hover, a:active{
    background-color: #CF5C3F;
    color: #fff;
    text-decoration: none;
}

.body{
    margin: 0 auto; 
    width: 70%;
    clear: both; 
}

.main-header img{
    width: 30%;
    height: auto; 
    margin: 2% 0;
}

.main-header nav{
    background: #666;
    font-size: 1.143em;
    height: 40px;
    line-height: 30px;
    margin: 0 auto 30px auto;
    text-align: center;
    border-radius: 5px; 
}

.main-header nav ul{
    list-style: none; 
    margin: 0 auto;
}

.main-header nav ul li{
    float: left; 
    display: inline; 
}

.main-header nav a:link, .main-header nav a:visited{
    color: #fff;
    display: inline-block;
    height: 30px;
    padding: 5px 23px;
    text-decoration: none;
}

.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
    background: #CF5C3F;
    color: #fff;
    text-shadow: none !important;
}
.main-header nav li a {
    border-radius: 5px;
}

.main-header img {
    width: 30%;
    height: auto;
    margin: 3% 0;
}

Answer 1

这似乎是你尝试定位'活动'菜单按钮的CSS：

.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
    background: #CF5C3F;
    color: #fff;
    text-shadow: none !important;
}

您定位的是具有mainHeader类的元素，但您的<header>元素有一个名为main-header的类。

在您的CSS中，将.mainHeader的所有出现替换为.main-header，一切都应该有效。

Answer 2

在您的nav中添加一个课程，让我们说“导航”

然后在css add中，

.nav ul li a:current {
   //code here
}

让我知道你是怎么过的。

Active Nav Link

2 个答案: