2013-07-11 32 views
-3

我正在为未来的服装公司创建一个网站。我没有太多的编码经验,所以请耐心等待,如果它有点草率。我只是想要一整条黑线穿过页面,并使水平菜单变黑,并删除下划线。我该怎么做呢?如何使此菜单变黑并删除下划线?

<img border="0" src="http://www.miacreative.com/ESW/Images/WHITE-BOX-MID.png" alt="Vealed" width="280" height="81"> <li><a href="#"> 
    <li><a href="#">Men</a></li> 
<img border="0" src="http://www.miacreative.com/ESW/Images/WHITE-BOX-MID.png" alt="Vealed" width="30" height="81"> 
     <li><a href="#">Women</a></li> 
<img border="0" src="http://www.miacreative.com/ESW/Images/WHITE-BOX-MID.png" alt="Vealed" width="30" height="81"> 
    <li><a href="#">Photography/Art</a></l 
+1

下划线在哪里?请不要发布只有几行相关的大块代码,您应该始终创建一个减少您的问题。在提出问题之前,您必须展示尽职调查。它看起来并不像你试图自己解决问题 –

+0

如果这是一个图像,你不能只用CSS来改变它。 CSS是用于HTML样式的。 – PHPglue

回答

0

为定位标记添加样式并将hr标记的宽度更改为100%。

<!doctype html> 
<html> 
<head> 

<STYLE> 
<!-- 
a:hover{color:#000000;} 
--> 
</STYLE> 

<p>&nbsp;</p> 
<img border="0" src="http://img812.imageshack.us/img812/2628/rf3h.png" alt="Vealed" width="280" height="81"> 

<!-- This hr tag needed a 100% width, not 60% --> 
<HR COLOR="black" WIDTH="100%"> 
<p>&nbsp;</p> 

<!--Added a style here and referenced it in the class atribute of the anchor tags in the global nav. --> 
<style> 

    .navLink { 
    color: #000000;  
    text-decoration: none !important;} 

ul 
{ 
list-style-type:none; 
font-size: xx-large; 
font-family: helvetica neue; 
font-weight: lighter; 

margin:0; 
padding:0; 
} 
li 
{ 
display:inline; 
} 

</style> 


</head> 
<body> 


<ul id="nav" > 

<img border="0" src="http://www.miacreative.com/ESW/Images/WHITE-BOX-MID.png" alt="Vealed" width="280" height="81"> <li><a href="#"> 
    <li> 
     <!-- see the class attribute here --> 
     <a href="#" class="navLink">Men</a> 
     </li> 
<img border="0" src="http://www.miacreative.com/ESW/Images/WHITE-BOX-MID.png" alt="Vealed" width="30" height="81"> 
     <li><a href="#" class="navLink">Women</a></li> 
<img border="0" src="http://www.miacreative.com/ESW/Images/WHITE-BOX-MID.png" alt="Vealed" width="30" height="81"> 
    <li><a href="#" class="navLink">Photography/Art</a></l 



<p>&nbsp;</p> 

<p>&nbsp;</p> 
<p><p align="center"><img src='http://img547.imageshauuck.us/img547/3900/ehd.png' border='0'/></a><br> 



    </ul> 













</body> 
</html> 
+1

您应该解释您的更改,并尝试仅发布已更改且相关的代码段。解释为什么变更是必要的甚至更好。 – ajp15243

+0

我认为这几乎可行,不保证投票。如果专注于修复,则无需粘贴整个代码,不断添加噪音(无关信息),您的答案将更受欢迎。以下是一些提示:使用'!important'对于那些不了解CSS特性的人来说 –

+0

是的非常感谢,我一直在寻找解决方案。 – John

0

你需要简单的CSS的方式来改变链接看起来

添加以下的CSS代码

a, a:active, a:hover, a:visited { 
    color: black; 
    text-decoration: none; 
} 
-1

难道这就是你要找的人?

<!doctype html> 
<html> 
<head> 
<style> 
body{ 
margin: 0px; 
padding: 0px; 
} 
img{ 
border: 0px; 
} 
#logo { 
margin: 20px 0px 0px 20px; 
} 
#nav { 
text-align: center; 
list-style-type:none; 
font-size: 36px; 
font-family: helvetica neue; 
font-weight: lighter; 
margin: auto; 
padding:0; 
background: #000; 
} 
#nav li { 
margin: 0px 20px; 
display: inline; 
} 
#nav li a { 

padding: 10px; 
text-decoration: none; 
color: #fff; 
} 
#nav li:hover{ 
background: #555; 
} 
</style> 

</head> 
<body> 
<div id="logo"> 
<img src="http://img812.imageshack.us/img812/2628/rf3h.png" alt="Vealed Logo"> 
<hr align="left" color="yellow" style="height: 4px;" width="90%"> 
</div> 
<ul id="nav"> 
<li><a href="#">Men</a></li> 
<li><a href="#">Women</a></li> 
<li><a href="#">Photography/Art</a></li> 
</ul> 
</body> 
</html>