伪类效果

最新推荐文章于 2023-05-17 13:37:53 发布

皮小葵

最新推荐文章于 2023-05-17 13:37:53 发布

阅读量142

点赞数

本文链接：https://blog.csdn.net/lulu17862078553/article/details/83992460

版权

1.下例为iPhone手机的伪类效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>伪类效果</title>
<style>
   a{background:url(images/iphone01.jpg);//先把文字伪变成一张图片
   width: 264px;height: 488px;//设置宽高（但是只能在块级标签中操作）
   display: block;//行内标签变成块级标签
   text-indent:-9999px;//要想不让文字显示在视线内，只看到图片，即隐藏掉（首行缩进属性）
   margin:0 auto;}//居中

   a:hover{background:url(images/iphone02.jpg);}

</style>
</head>

<body>
<a href="http://www.adobeedu.com">iphone手机</a>

</body>
</html>