点击超链接跳转到指定标题，并高亮显示

最新推荐文章于 2024-04-30 18:26:30 发布

漂流の少年

最新推荐文章于 2024-04-30 18:26:30 发布

阅读量1.4k

点赞数 1

分类专栏： HTML+CSS+JavaScript 文章标签： html css js javascript

本文链接：https://blog.csdn.net/YINZHE__/article/details/118077649

版权

HTML+CSS+JavaScript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>设计锚点样式</title>
    <style>
        h1 {
            position: fixed; /*绝对定位，相对于浏览器窗口进行定位*/
            left: 550px;
            top: 24px;
        }
        a { display: block; }
        h2:target { background: hsla(93,96%,80%,1.00);}
    </style>
</head>
<body>
    <h1>
        <a href="#p1">图片1</a>
        <a href="#p2">图片2</a>
        <a href="#p3">图片3</a>
        <a href="#p4">图片4</a>
    </h1>
    <h2 id="p1">图片1</h2>
    <p><img src="images/1.jpg" ></p>
    <h2 id="p2">图片2</h2>
    <p><img src="images/1.jpg" ></p>
    <h2 id="p3">图片3</h2>
    <p><img src="images/3.jpg" ></p>
    <h2 id="p4">图片4</h2>
    <p><img src="images/4.jpg" ></p>
</body>
</html>

效果

E:target是动态选择器，当E元素被URL指向时，样式效果起效

display:block解释

链接 a 元素，在默认情况下是是“行内元素”，因此对a元素设置高度、宽度等属性，都是无效的。而比如div，p，li，img等默认情况下的display属性值就是“block”。所以对于链接a来说只能这样：display:block;强制将它改成块元素

hsla() 函数

使用色相、饱和度、亮度、透明度来定义颜色。

HSLA 即色相、饱和度、亮度、透明度（Hue, Saturation, Lightness, Alpha）

色相（H）是色彩的基本属性，(0 到 360) - 0 (或 360) 为红色, 120 为绿色, 240 为蓝色
饱和度（S）是指色彩的纯度，0% 为灰色， 100% 全色
亮度（L） 取 0-100%，0% 为暗, 50% 为普通, 100% 为白
透明度（A） 0（透完全明） ~ 1（完全不透明）

漂流の少年

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
点击超链接跳转到指定标题，并高亮显示

display:block解释链接 a 元素，在默认情况下是是“行内元素”，因此对a元素设置高度、宽度等属性，都是无效的。而比如div，p，li，img等默认情况下的display属性值就是“block”。所以对于链接a来说只能这样：display:block;强制将它改成块元素...
复制链接

扫一扫