CSS学习09之超链接伪类

最新推荐文章于 2023-12-18 19:42:34 发布

小黑神zxs

最新推荐文章于 2023-12-18 19:42:34 发布

阅读量1.7k

点赞数 2

分类专栏： CSS3详解文章标签： css3 html 前端 css伪类超链接伪类

本文链接：https://blog.csdn.net/ZXS1002/article/details/122901536

版权

CSS3详解专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文通过实例展示了如何使用CSS实现文字图片水平对齐，并探讨了超链接的hover和active伪类在网页设计中的应用。示例中创建了一个简单的书籍商品展示界面，演示了当鼠标悬停和按压超链接时的样式变化，以及text-shadow属性用于创建价格阴影效果的方法。

摘要由CSDN通过智能技术生成

回顾

文字图片水平对齐

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>