-6

我想创建这样的 html 导航链接:

在此处输入图像描述

但我不知道隐藏html下划线以及如何更改默认html颜色。你能告诉我如何做到这一点的基本例子吗?

4

4 回答 4

3

我很有趣你已经有一个导航栏。

  1. 要禁用带下划线的文本,请使用 css "text-decoration: none;"。
  2. 要设置“a”的颜色,请使用“color: rgb(256,256,256);” 或者你使用“颜色:#000000;”。

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

于 2012-09-22T19:13:08.233 回答
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

于 2012-09-22T19:18:18.830 回答
3
a{color: green; text-decoration: none;}
于 2012-09-22T19:04:13.687 回答
2

要隐藏下划线并添加颜色,您的答案是 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/

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

于 2012-09-22T19:19:46.320 回答