如何运用盒子模型相关属性制作简单音乐盒

怎么将以下三个图片做成这个样子的音乐盒
成图，运用盒子模型相关属性控制页面中的各个元素，分步制作成音乐盒。

img

图一

img

图二

img

图三

img

如果只是布局 效果 那很简单就是 两个 div 一个图片得事。

<!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 {
            width: 100%;
            display: flex;
            justify-content: center;
        }

        .item {
            /* width: 100%; */
        }

        .item>.imgBox {
            width: 100%;
            height: 100%;
            width: 325px;
            height: 195px;
            border: 1px solid red;
            margin: 0 12px;
            padding: 12px;
        }

        .item>.imgBox>img {
            width: 100%;
            height: 100%;
        }

        a {
            text-decoration: none;
        }

        .text {
            padding: 0 12px;
            margin: 12px 0;
            display: flex;
            justify-content: space-between;
        }

        .text img {
            width: 20px;
            height: 20px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="item">
            <div class="imgBox">
                <img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/600335657866181.jpg?x-oss-process=image/auto-orient,1/resize,w_320,m_lfit"
                    alt="">
            </div>
            <div class="text">
                <a href="#">传智之歌 - 学工部</a>
                <img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/697306657866147.jpg?x-oss-process=image/auto-orient,1/resize,w_320,m_lfit"
                    alt="">
            </div>
        </div>


        <div class="item">
            <div class="imgBox">
                <img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/600335657866181.jpg?x-oss-process=image/auto-orient,1/resize,w_320,m_lfit"
                    alt="">
            </div>
            <div class="text">
                <a href="#">传智之歌 - 学工部</a>
                <img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/697306657866147.jpg?x-oss-process=image/auto-orient,1/resize,w_320,m_lfit"
                    alt="">
            </div>
        </div>
    </div>
</body>

</html>

img