2011-09-25 73 views
-2

無論我嘗試做什麼,我都無法修改鏈接的顏色(希望創建顏色翻轉效果)。它們總是保持與下劃線效果相同的默認藍色。我知道我做錯了很小的事,但是誰能告訴我?不修改鏈接屬性的CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
<style type="text/css"> 
body, 
html { 
    margin:0; 
    padding:0; 
    color:#101010; 
    font-family: helvetica; 


} 

p { 
    margin:10px 0 0 20px; 
    font-size: 13px; 
    line-height: 1.3em; 
    padding-bottom: 10px; 

} 


#wrapper { 
    width:960px; 
    margin:0 auto; 
    padding: 0px; 
    background:#fff; 
} 
#header { 
    padding:5px 10px; 
    background:#fff; 
    height:518px; 


} 

#nav { 
    padding:5px 10px; 
    background:#fff; 
    width: 960px; 
    height: 35px; 
    position: absolute; 
    top: 370px; 
    font-size: 18px; 
    color: #000; 
} 
#nav ul { 
    margin:0; 
    padding:0; 
    list-style:none; 
    position: absolute; 
    bottom: 5px; 
} 
#nav li { 
    display:inline; 
    margin:0; 
    padding:0; 
    width:160px; 
    float:left; 


#nav li:hover { 
    background-color: #faffd8; 
    border-color: #004f7b; 


} 

#nav a { 

    color: #000; 
    text-decoration: none; 
} 


#nav a:link { 
    color: #333333; 
    text-indent: -9999px; 
    text-decoration: none; 


} 

#nav a:hover { 
    color: #000000; 
    text-decoration: none; 



} 

#nav a:visited{ 
    color: #999999; 
    text-decoration: none; 


} 

#nav a:active { 
    color: #000000; 
    text-decoration: none; 

} 

#topcontent p 
{ 
    color: #444444; 

} 


} 
#leftcontent { 
    float:left; 
    width:480px; 
    height: 1%; 
    background:#fff; 
} 
h2 { 
    margin:10px 0 0 20px; 
    color: #24389b; 
    font-size: 19px; 
    padding-bottom: 8px; 
} 
#rightcontent { 
    float:right; 
    width:480px; 
    background:#fff; 
    height: 1%; 
} 
#footer { 
    clear:both; 
    padding:5px 10px; 
    background:#fff; 
} 
#footer p { 
    margin:0; 
} 
* html #footer { 
    height:1px; 
} 
</style> 
</head> 
<body> 
<div id="wrapper"> 
<div id="header"><img src="pold.png" alt="Pold Logo" /></div> 
<div id="nav"> 
    <ul> 
     <li><a href="Research">Research</a></li> 
     <li><a href="Research">Publications</a></li> 
     <li><a href="Research">Software</a></li> 
     <li><a href="Research">People</a></li> 
     <li><a href="Research">Volunteer</a></li> 
     <li><a href="Research">Resources</a></li> 
    </ul> 
</div> 
<div id="topcontent"> 
    <p>The interests of our lab are generally centered around....</p> 
</div> 
<div id="leftcontent"> 
    <h2>Funded Projects</h2> 
     <p><a href="url">The Cognitive Atlas</a><br />(funded by NIMH)<br />The Cognitive Atlas project aims to develop an ontology for cognitive processes through social collaborative knowledge building.</p> 

</div> 
<div id="rightcontent"> 
    <h2>Center Grants</h2> 
    <p><a href="url">Consortium for Neuropsychiatric Phenomics</a><br />(funded by NIH)<br />This Roadmap Interdisciplinary Research Consortium is leveraging the new discipline of phonemics to understand neuropsychiatric disorders at multiple levels, from genes to neural systems to </p> 

</div> 
<div id="footer"> 
</div> 
</div> 
</body> 
</html> 

新編輯09/27:

所有。我很抱歉發佈兩次 - 我是全新的,並沒有想到繼續在這個線程。正如我的帖子所示(請參閱Sparky672的鏈接),我的列和導航出現問題,看起來我是如何需要的。請參閱此鏈接進行演示http://rich2233.host22.com/pold.html ..我想你可以從瀏覽器中獲取代碼。感謝您的幫助

+0

你錯過了一些我通過編輯你的問題來解決它們的大括號。你的代碼中的另一個問題是,應該按照特殊順序爲'A'創建css,我在下面的答案中提供它。乾杯。 –

+2

@Javad_Amiry,你不應該編輯OP的代碼,以消除報告問題的可能原因。這使得問題和所有答案(除了你的)都不相關。我把它翻了回來。 – Sparky

回答

7
**#nav li { 
    display:inline; 
    margin:0; 
    padding:0; 
    width:160px; 
    float:left;** 


#nav li:hover { 
    background-color: #faffd8; 
    border-color: #004f7b; 


} 

#nav a { 

    color: #000; 
    text-decoration: none; 
} 


#nav a:link { 
    color: #333333; 
    text-indent: -9999px; 
    text-decoration: none; 


} 

#nav a:hover { 
    color: #000000; 
    text-decoration: none; 



} 

#nav a:visited{ 
    color: #999999; 
    text-decoration: none; 


} 

#nav a:active { 
    color: #000000; 
    text-decoration: none; 

} 

**#topcontent p 
{ 
    color: #444444; 

} 


}** 

**檢查出演CSS樣式有沒有結束的第一個CSS樣式也多收了最後一個

1

因爲您的CSS只指定#nav<div>中包含的鏈接的顏色。頁面上的所有其他鏈接將爲默認顏色/樣式。

編輯:

不知道到底你在談論雖然哪個環節。如果您正在討論您的導航鏈接,請參閱其他人的回答,指出您的CSS中存在錯誤的支架}

如果您正在討論頁面上的其他鏈接,請參閱上面我的原始答案。這些鏈接沒有CSS。

2

你錯過了在此塊花括號:

#nav li { 
    display:inline; 
    margin:0; 
    padding:0; 
    width:160px; 
    float:left; 
0

我想它與你沒有正確引用你的ul的事實有關,可能是錯誤的。無論如何看看this

<style> 
ul#navlist li{ 
list-style:none; 
} 
ul#navlist li a:link {text-decoration: none} 
ul#navlist li a:visited {text-decoration: none} 
ul#navlist li a:active {text-decoration: none} 
ul#navlist li a:hover 
{ 
color: #cccccc; 
background-color: #003366; 
border: 1px #ffffff inset; 
} 




</style> 

<div id="navcontainer"> 

<ul id="navlist"> 
<li><a href="#">Item one</a></li> 
</ul> 

</div> 

我從我的參考和你的例子混合和混合,我認爲這是你在找什麼。哦,如果你不知道這一點,你的括號是搞砸了。

0

您錯過了我通過編輯您的問題修復了它們的一些大括號}。您的代碼中的另一個問題是,應該按以下順序爲A創建css:

a {} 
a:link {} 
a:visited {} 
a:hover {} 
a:focus {} 
a:active {} 

生效。只需更改A款式的訂購順序即可正常使用。