2011-09-25 105 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款式的订购顺序即可正常使用。