HTML5+CSS3集训（6）

超越～and me

已于 2024-06-27 07:31:01 修改

阅读量305

点赞数 5

分类专栏： html基础文章标签： html5 css3 前端

于 2024-06-26 22:38:47 首次发布

本文链接：https://blog.csdn.net/2301_78986604/article/details/139999121

版权

html基础专栏收录该内容

56 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p120</title>
    <style>
    body{
        background-color:#ccc;
    }
    div{
        border:1px solid black;
        width:300px;
        height:300px;
        background-color:#fff;
        margin:0px auto;
        margin-top:200px;
        border-radius:50%;
    }
    p{
        text-align:center;
    }
    a{
        display:block;
        margin-top:100px;
        text-decoration:none;
    }
    </style>
</head>
<body>
    <div>
        <a href="">
            <p>大鱼海棠</p>
            <p>很好的一部电影</p>
        </a>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p120</title>
    <style>
    body{
        background-color:#555;
    }
    div{
        border:1px solid black;
        width:300px;
        height:300px;
        background-color:#fff;
        margin:0px auto;
        margin-top:200px;
        border-radius:50%;
        background:url("大鱼海棠.jpg");
        background-size: 290px 325px;
    }
    p{
        text-align:center;
        line-height:25px;
    }
    a{
        display:block;
        width:100%;
        height:300px;
        text-decoration:none;
        visibility:hidden;
        background-color:rgba(0,0,0,0.5);
        color:#fff;
    }
    :hover a{
        visibility:visible;
    }
    </style>
</head>
<body>
    <div>
        <a href="#">
            <p>大鱼海棠</p>
            <p>很好的一部电影</p>
        </a>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p120</title>
    <style>
    body{
        background-color:#555;
    }
    div{
        width:200px;
        height:200px;
        margin:50px auto;
        background:url("大鱼海棠.jpg") no-repeat center;
        border-radius:50%;
    }
    a{
        visibility:hidden;
        display:block;
        width:100%;
        height:120px;
        padding-top:80px;
        background-color:rgba(0,0,0,0.5);
        color:#fff;
        font-size:14px;
        border-radius:50%;
    }
    a p{
        text-align:center;
        line-height:25px;
    }
    div:hover a{
        visibility:visible;
    }
    </style>
</head>
<body>
    <div>
        <a href="#">
            <p>大鱼海棠</p>
            <p>很好的一部电影</p>
        </a>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p120</title>
    <style>
    body{
        background-color:#555;
    }
    div{
        width:200px;
        height:200px;
        margin:50px auto;
        background:url("大鱼海棠.jpg") no-repeat ;
        background-size:200px 200px;
        border-radius:50%;
    }
    a{
        visibility:hidden;
        display:block;
        width:100%;
        height:120px;
        padding-top:80px;
        background-color:rgba(0,0,0,0.5);
        color:#fff;
        font-size:14px;
        border-radius:50%;
    }
    a p{
        text-align:center;
        line-height:25px;
    }
    div:hover a{
        visibility:visible;
    }
    </style>
</head>
<body>
    <div>
        <a href="#">
            <p>大鱼海棠</p>
            <p>很好的一部电影</p>
        </a>
    </div>
</body>
</html>