6

所以我只是想创建一个小网站。（别担心这不会是标题）现在“主页”“新闻”“画廊”和“关于我们”不是直接指向另一个页面的实际按钮。当我做

<a href="Mainpage.htm"> Home </a>

按钮变为紫色并带有下划线。（我知道这是链接的显示方式）但是有没有一种方法可以让这些按钮像图片中一样保持橙色，而不会变成蓝色和带下划线。谢谢 http://imgur.com/Czsk4

4

5 回答 5

9

您可以内联设置样式，但最好的方法是通过 css 类。

内联：

<a href="Mainpage.htm" style="color: #fb3f00; text-decoration: none;">Home</a>

通过一个类来做到这一点：

<a href="Mainpage.htm" class="nav-link">Home</a>

a.nav-link:link
{
   color: #fb3f00;
   text-decoration: none;
}
a.nav-link:visited
{
   color: #fb3f00;
   text-decoration: none;
}
a.nav-link:hover
{
   color: #fb3f00;
   text-decoration: none;
}
a.nav-link:active
{
   color: #fb3f00;
   text-decoration: none;
}

要通过一个类来完成，您需要将 css 代码放在一个单独的 css 文件中并将其链接，或者您可以将其放在文档的头部。最佳做法是将其放在外部 css 文件中，以便在整个过程中使用。

如果您希望橙色出现在整个链接中，只需删除类的“.nav-link”部分并从链接标签中删除 class="nav-link"。这将使所有链接变为橙色，除非您定义了另一个类并将其显式应用于链接标记。

祝你好运！

于 2012-04-13T15:11:56.023 回答
5

使用 CSS 而不是内联样式会更好：

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

您还可以变得更漂亮，并在悬停时显示下划线：

a:hover, a:focus {
    text-decoration:underline;
}

这可以帮助改善用户体验 (UX)，但如果链接位于标题中，则很明显它们是链接。（当然，UX 设计比这更复杂，因为您必须考虑诸如没有“悬停”的触摸屏用户之类的事情。:)）

于 2012-04-13T15:07:40.140 回答
3

所有链接都带有不同的状态，因此如果您希望它们仅使用一种颜色，您可以一起修改所有状态，如下所示：

a:link, a:visited, a:hover, a:active { color: orange }
于 2012-04-13T15:08:45.767 回答
2

你可以通过使用 CSS 来做到这一点。在头部末尾的代码中设置它

    <style TYPE="text/css">

   a:link, a:visited, a:hover, a:active { color: #ff8080;
       text-decoration: none;
     }

    </style>

并改变你的颜色#ff8080

于 2012-04-13T15:10:51.553 回答
0

我有完美的解决方案给你！

我直接从我的代码中复制和粘贴。让它与你相关。这绝对适用于您想要实现的目标。

<style type="text/css" media="screen">
a:link { color:#ffffff; text-decoration: none; }
a:visited { color:#33348e; text-decoration: none; }
a:hover { color:#91ac48; text-decoration: none; }
a:active { color:#7476b4; text-decoration: underline; }
</style> <a href="/shop">Order Now</a>
于 2018-02-07T12:17:26.113 回答