一级标题

text-aligntext-align是水平对齐方式
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box {
            position: relative;
            display: block;
            width: 350px;
            height: 247px;
            background-color: #6cf;
            margin: 200px;

            /* 溢出隐藏 */
            overflow: hidden;
        }

        .box .title {
            position: absolute;
            left: 0;
            bottom: -60px;
            /* background-color: rgba(0, 170, 0, 0.63); */
            padding-left: 20px;
            padding-right: 50px;
            color: #fff;

            /* 提高层级 z-index */
            z-index: 1;

            /* 添加过渡 */
            transition: .6s;
        }

        .box .title h5 {
            font-weight: normal;
        }

        .box .title p {
            margin: 30px 0;
        }

        /* 创建背景渐变的遮罩层 */
        .box::after {
            position: absolute;
            left: 0;
            top: 0;
            content: "";
            width: 100%;
            height: 100%;
            background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));

            /* 初始透明度调为0 */
            opacity: 0;

            transition: .6s;
        }

        /* 右上角的关闭按钮 */
        .box .close {
            position: absolute;
            right: 10px;
            top: 10px;
            font-size: 40px;
            line-height: 14px;
            height: 25px;
            /* background-color: #0a0; */
            color: #000;
            transition: .6s;
        }


        .box img {
            transition: .6s;
        }

        /* 1. 鼠标悬停大盒子box 让图片进行缩放1.1倍  */
        .box:hover img {
            transform: scale(1.1);
        }

        /* 2. 鼠标悬停大盒子box 让title盒子 bottom的值再调整一下 让整体结构往上移动 */
        .box:hover .title {
            bottom: 0;
        }

        /* 3. 鼠标悬停大盒子box  .box::after 显示出来 */
        .box:hover::after {
            opacity: 1;
        }

        /* 4. 鼠标悬停大盒子box  .close 旋转 */
        .box:hover .close {
            transform: rotate(360deg);
        }
    </style>
</head>

<body>
    <a href="#" class="box">
        <img src="./images/pic2.png" alt="">
        <div class="title">
            <h5>产品</h5>
            <h4>
                OceanStor Pacific海量存储斩获2021 Interop金奖
            </h4>
            <p>
                了解更多
            </p>
        </div>
        <div class="close">×</div>
    </a>
</body>

</html>
你好
移动web第一天

一级标题

二级标题

三级标题
