a:hover实例

最新推荐文章于 2023-03-06 10:41:53 发布

非为000

最新推荐文章于 2023-03-06 10:41:53 发布

阅读量2k

点赞数

分类专栏： CSS_note 文章标签： css

CSS_note 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这里写图片描述

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>CSS完成神奇创意的相框</title>
        <style type="text/css">
            * {
                text-align: center;
                border: 0;
                list-style: none;
            }

            body {
                font-size: 12px;
                font-family: Tahoma, Geneva, sans-serif;
                background: #000;
            }

            .photo {
                width: 404px;
                margin: 0 auto;
                border-left: solid 8px red;
                border-right: solid 8px red;
                background: #fff;
            }

            .photo h1 {
                font-size: 14px;
                color: #666;
                line-height: 40px;
            }

            .photo ul {
                margin: 0;
                padding: 0;
            }

            .photo li {
                position: relative;
                width: 400px;
                height: 300px;
                overflow: hidden;
            }


            .photo li a:hover span {
                display: block;
                text-align: center;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                font-size: 40px;
                line-height: 300px;
                color: #f00;
                background: #000;
                filter: alpha(opacity=70);
                -moz-opacity: 0.;
                opacity: 0.7;
            }

            .magic1,
            .magic2,
            .magic3 {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }

            .magic1 {
                background: url(01.png) no-repeat;
            }

            .magic2 {
                background: url(02.png) no-repeat;
            }


            a:hover {
                text-decoration: none;
            }
        </style>
    </head>

    <body>
        <div class="photo">
            <h1>Magic Photo Frame 神奇创意相框</h1>
            <ul>
                <li>
                    <a href="#"><img src="wall8.jpg" width="400" height="300" /><span>This is Magic!</span><em class="magic1">&nbsp;</em></a>
                </li>
                <li>
                    <a href="#"><img src="wall8.jpg" width="400" height="300" /><span>This is Magic!</span><em class="magic2">&nbsp;</em></a>
                </li>
            </ul>
        </div>
    </body>
</html>

非为000

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
a:hover实例

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS完成神奇创意的相框</title> <style ty
复制链接

扫一扫

专栏目录