更改链接样式

Published on:

更改突出链接的样式

我想要一个这样的效果

要大 要突出

右键 检查 就出现这个东东

ok 我们就去scss里面搞 a 就行了

我开开心心的就上传了

然后有一段时间 我的网站就变成了 这样

还有这样

WTF!!!!

这神马毛线鬼呀!!!

坑爹呢这是!!!

我只想改这张的啊!!

前端不决问w3c,找到了一个伪类的概念:

a:link {color: #FF0000}        /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}   /* 选定的链接 */

我还用这个埋了一个彩蛋

a:link {color: #D52E28;
  font-size:300%;
  font-weight:900;
}
a:visited {
   color:#071BC7;
   font-size:300%;

 }
 a:hover {
   color: #FFEB3B;
   font-size:300%;
   font-weight:900;}
   a:active {color: #071BC7}

不对不对,我不是来埋彩蛋的,我是来解决问题的!

去群里问了一下:


两位大神回答了一下,不过我还是没有懂,span是什么东东?前面的 .哪去了,我应该如何写?方方方方 方很方

内外不决问Google吧
又查到了这个东西:

a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后

所以呢,我的顺序也是没问题的。

1.不对链接进行操作时:a:link{text-decoration:none;}//不显示下划线a:link{text-decoration:underline;}//显示下划线
2.访问链接后:a:visited{text-decoration:none;}//不显示下划线a:visited{text-decoration:underline;}//显示下划线
3.鼠标悬停在链接上时:a:hover{text-decoration:none;}//不显示下划线a:hover{text-decoration:underline;}//显示下划线
4.鼠标点击链接时a:active{text-decoration:none;}//不显示下划线a:active{text-decoration:underline;}//显示下划线

不过我觉得下划线挺好的,有够特别。要不大家都一样,怎么看的出来我是链接?

不对不对不对,我也不是查这个的,链接!链接!链接!重要的事说三遍!

旁白:上面的也都是链接呀。

我:你哪儿凉快儿哪儿呆着去儿!
在怼走了旁边之后,终于找到了这个:

a.footer{                          /*超链接颜色:爱马仕橙色,无下划线*/
     color: #FF6600;

     text-decoration: none;
 }
a.footer:hover {                 /*鼠标指向超链接颜色:黑色,无下划线*/
   color:black;
    text-decoration: none;
 }

$HTML
<footer class="container-fluid bg-footer-grey" >
  <p class="text-center">
    联系我们 | 招商合作 | 错误反馈 | 加入我们
    <br>
    Copyright ©2017 iFuture Design by
    <a class="footer" href="http://michelle-blog.logdown.com">Michelle</a>
    and 
    <a class="footer" href="http://hukui-blog.logdown.com">Hukui</a>
  </p>
</footer>

yeah 这个好 又有css又有html的东西

然后就改成了这样:

其他的都变回来了

但是,我要的效果也没了

我又仔细的看了一遍群里的图,大概明白是什么意思了,答案只有一个:

yeah 开心

如果你有更好的方式 请留言告知 欢迎挑错
参考:
0.http://www.w3school.com.cn/cssref/pr_target.asp
1.http://www.w3school.com.cn/css/css_pseudo_classes.asp
2.http://xyy601-blog.logdown.com/posts/1368861-the-basics-removing-link-underline
3.http://xyy601-blog.logdown.com/posts/1401207-today-tips-made-with-link-to-do-with-icon-links

Comments

comments powered by Disqus