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

Question

所以我只是想创建一个小网站.(不要担心这不会是标题)现在"主页""新闻""画廊"和"关于我们"不是指向另一页的实际按钮.当我做

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

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

Answer 1

您可以内联设置样式,但最好的方法是通过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".这将使所有链接变为橙色,除非您已定义另一个类并将其明确应用于链接标记.

祝好运!

Answer 2

使用CSS而不是内联样式将更好地工作:

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

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

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

这可以帮助改善用户体验(UX),但是如果链接在标题中,则自然显然它们是链接.(UX设计比这当然更复杂,因为你必须考虑没有"悬停"的触摸屏用户.:))