【CSS】a标签超链接的各种样式及实现方法

最新推荐文章于 2024-09-20 00:25:11 发布

笑苍穹v

最新推荐文章于 2024-09-20 00:25:11 发布

阅读量2.6w

点赞数 4

分类专栏： H5+CSS 文章标签： css a标签

本文链接：https://blog.csdn.net/qq_40818233/article/details/81260314

版权

H5+CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

做前端的应该都知道，<a>标签是我们经常用到的标签，而且<a>标签的功能强大，下面就让我来汇总下<a>标签有哪些功能吧。

一、超链接

<a>标签最简单的应用无外乎就是超链接功能了，用<a>标签嵌套一段文本，一段图像均可以实现超链接功能。下面上图

图片加载失败

图片加载失败左图即为效果图，鼠标点上即跳转到指定链接，鼠标悬浮还有小手指效果

超链接还有四种状态分别用如下CSS样式来实现

<style>
    a:link{		/*默认状态*/
        color: black;
    }
    a:visited{	/*浏览过的*/
        color:darkgrey;
    }
    a:hover{	/*悬浮状态*/
        color:yellow;
    }
    a:active{	/*激活过的*/
        color: red;
    }
</style>

重点注意：编写时要严格按照上图顺序来编写

另外补充a标签的下划线可以用以下代码段来去除

<style>
    a{
        text-decoration:none;
}
</style>

二、锚点链接

下面介绍的是用a标签实现锚点链接的代码段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚点链接</title>
</head>
<body>
<p id="part1">第一章</p>
<div style="height: 300px;background-color: red"></div>
<p id="part2">第二章</p>
<div style="height: 300px;background-color: yellow"></div>
<p id="part3">第三章</p>
<div style="height: 300px;background-color: gold"></div>
<p id="part4">第四章</p>
<div style="height: 300px;background-color: green"></div>
<p id="part5">第五章</p>
<div style="height: 300px;background-color: blue"></div>

<div style="position: fixed;top: 20px;right: 20px"><!--  此处样式是为了让锚点链接悬浮在右上角 -->
    <a href="#part1">第一章</a>
    <a href="#part2">第二章</a>
    <a href="#part3">第三章</a>
    <a href="#part4">第四章</a>
    <a href="#part5">第五章</a>
</div>

</body>
</html>

实现效果即为点击第一章跳转到第一章，点击第二章跳转到第二章以此类推