Question

所以我只是想创建一个小网站。（别担心，这不会发生成为标题）现在，“Home”“News”“Gallery”和“About us”并不是指向另一个页面的实际按钮。当我做的时候

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

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

Answer 1

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

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

您还可以获得更好的动画并在悬停时显示下划线：

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

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

Answer 2

您可以设置内联样式，但最好的方法是通过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文件中，以便可以在整个过程中使用。

如果您希望橙色遍布每个链接，只需删除＆＃34; .nav-link＆＃34;部分类并删除class =＆＃34; nav-link＆＃34;来自链接标记。这将使所有链接变为橙色，除非您已定义另一个类并将其明确应用于链接标记。

祝你好运！

Answer 3

所有链接都有不同的状态，因此如果您希望它们只保留一种颜色，您可以像这样修改所有状态：

a:link, a:visited, a:hover, a:active { color: orange }

Answer 4

您可以使用CSS来实现。在头部

末尾的代码中设置它

    <style TYPE="text/css">

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

    </style>

并更改颜色中的＃ff8080

Answer 5

我有完美的解决方案！

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

<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>

如何使这些按钮不显示为蓝色链接

5 个答案: