html在线编辑器

<!DOCTYPE html>
<html>
<head>
    <style>
        a.one:link {
            color: #ff0000;
        }

        a.one:visited {
            color: #0000ff;
        }

        a.one:hover {
            color: #ffcc00;
        }

        a.two:link {
            color: #ff0000;
        }

        a.two:visited {
            color: #0000ff;
        }

        a.two:hover {
            font-size: 150%;
        }

        a.three:link {
            color: #ff0000;
        }

        a.three:visited {
            color: #0000ff;
        }

        a.three:hover {
            background: #66ff66;
        }

        a.four:link {
            color: #ff0000;
        }

        a.four:visited {
            color: #0000ff;
        }

        a.four:hover {
            font-family: monospace;
        }

        a.five:link {
            color: #ff0000;
            text-decoration: none;
        }

        a.five:visited {
            color: #0000ff;
            text-decoration: none;
        }

        a.five:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>

    <p>鼠标悬停在链接上并观看更改的布局效果:</p>

    <p><b><a class="one" href="/" target="_blank">这个链接改变颜色</a></b></p>
    <p><b><a class="two" href="/" target="_blank">这个链接改变字体大小</a></b></p>
    <p><b><a class="three" href="/" target="_blank">这个链接改变背景颜色</a></b></p>
    <p><b><a class="four" href="/" target="_blank">这个链接改变字体</a></b></p>
    <p><b><a class="five" href="/" target="_blank">这个链接有下划线</a></b></p>

</body>
</html>
评论区

()