活動導航鏈接

我一直在努力去應對敏感的佈局。活動導航鏈接

導航欄上的活動鏈接似乎不工作，我看不到我做錯了什麼。

我希望導航欄突出顯示當前活動頁面。在這種情況下，活動頁面是主頁。目前它正在顯示灰色背景，但是，我希望它是橙色的。

如果有人可以看看代碼，那將是非常感謝。

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

來源

2013-12-10 user3043645

什麼鏈接不工作？它怎麼不起作用？它應該做什麼？我認爲你需要將代碼修剪到相關部分。 –

感謝您的回覆。我已經修剪它了。我希望導航欄突出顯示當前活動頁面。在這種情況下，活動頁面是主頁。目前它正在顯示灰色背景，但是，我希望它是橙色的。 – user3043645

'.active {background：＃CF5C3F; }'或'.active a {background：＃CF5C3F; }' – mdesdev

這似乎是一塊CSS的，你嘗試目標「活動」菜單按鈕：用mainHeader類

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

您定位的元素，但你的<header>元素有一個叫做main-header類。

在你的CSS中，用.main-header代替.mainHeader的所有發生，並且所有的東西都應該可以工作。

來源

2013-12-10 22:56:48

非常感謝你的幫助。編輯完成後它完美運行。它有時感覺就像試圖在大海撈針中找到針。不過，我相信一旦我更好地掌握了CSS，我將能夠發現這些錯誤。 – user3043645

那麼，有時候，如果別人重新審視它，它就會有所幫助。但是您可以嘗試通過遵循隨後的編碼風格來減少這些錯誤 - 例如，始終使用下劃線。 –

-2

添加一個類你nav，讓我們說「導航」

然後在CSS中添加，

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

讓我知道你是如何得到的。

來源

2013-12-10 22:44:40 DommT

他不需要向'nav'元素添加類，'：current'僞類不存在。 – mdesdev

活動導航鏈接

回答

相關問題