如何创建导航链接

Question

我想创建这样的HTML导航链接：

但我不知道隐藏HTML下划线和如何更改默认的HTML颜色。你能告诉我一些基本的例子吗？

Answer 1

a{color: green; text-decoration: none;} 

Answer 2

我很好笑，你已经有一个导航栏。

1. 要禁用带下划线的文本，请使用css“text-decoration：none;”。

2. 要设置“a”的颜色，请使用“color：rgb（256,256,256）;”或者使用“颜色：＃000000”。

   a{ text-decoration: none; color: rgb(256,256,256); }

Answer 3

HTML：

<ul> 
    <li>GeForce > <a href="#">Link 1</a></li> 
    <li>GeForce > <a href="#">Link 2</a></li> 
    <li>GeForce > <a href="#">Link 3</a></li> 
</ul> 

CSS：

body { 
    background: #000; 
} 
ul { 
    list-style-type: none; 
    padding: 40px; 
} 
li { 
    color: #fff; 
    font-family: Arial; 
    font-size: 14px; 
} 
li > a { 
    color: #76b900; 
    text-decoration: none; 
} 
li > a:hover { 
    text-decoration: underline; 
} 

现场演示：jsFiddle

Answer 4

要隐藏下划线并添加颜色，您的答案是CSS。

下面是一个例子：

HTML：

<ul class="navigation-list"> <!--the name 'navigation-list' is arbitrary--> 
<li><a href="#">Home</a></li> 
<li><a href="#">Products</a></li> 
<li><a href="#">About</a></li> 
<li><a href="#">Contact</a></li> 
</ul>​ 

CSS：

ul.navigation-list { 
    background-color: rgb(30,30,30); 
    height:35px; 
} 


ul.navigation-list li{ 
    float:left;} 

ul.navigation-list li a{ 
    padding:4px 8px; 
    text-decoration:none; /**this removes the underline part **/ 
    color:rgb(250,250,250); 
    font-family:Verdana; 

} 

ul.navigation-list li a:hover{ 
    text-decoration:underline; /**this adds the underline part **/ 
    background-color:rgb(80,80,80); 
} 

的jsfiddle这里：http://jsfiddle.net/u9A5K/2/

如果您有任何问题，请不要犹豫，问:)