CSS学习09之超链接伪类

回顾

文字图片水平对齐

img,span{
            border: red solid 2px;
            /*水平对齐*/
            vertical-align: middle;
}

超链接伪类

超链接伪类（我们常用的就这两个）：
hover 鼠标悬停
active 鼠标选择（按压）

简单应用

相信大家淘宝都在用，一些商品的格式那叫司空见惯。这一次我们模拟一个书籍这个商品的简单出售界面。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接伪类</title>
    <style>
        a{
            text-decoration: none;
            color: blue;
        }
        img{
            width: 180px;
            height: 200px;
        }
        a:hover{
            font-size: 40px;
            color: deeppink;
        }
        a:active{
            color: purple;
        }
        #price{
            text-shadow: deeppink -3px 3px 1px;
        }
    </style>
</head>
<body>

<a href="#">
    <img src="images/三国演义.jpeg" alt="三国演义">
</a>
<p><a href="#">三国演义</a></p>
<p><a href="">作者：罗贯中</a></p>
价格：<d id="price">￥66</d>

</body>
</html>

效果

简单界面：
在这里插入图片描述
鼠标悬浮：此处鼠标放在三国演义上面悬浮，由于截图看不到鼠标光标，所以不明显

鼠标按压：此处按压的是作者：罗贯中，由于截图看不见鼠标光标，所以不明显

小结

超链接伪类：

hover 鼠标悬停 active
鼠标选择（按压）

价格阴影的实现：
text-shadow ：颜色水平偏移垂直偏移阴影半径

作者有话说

博客创作不易，希望看到这里的读者动动你的小手点个赞，如果喜欢的小伙伴可以一键三连，作者大大在这里给大家谢谢了。

0 条评论