音乐盒播放器图标html+css前端

题目一：音乐盒（效果图）

结构分析：

“音乐盒”可以看做一个大盒子，用<div>标签进行定义。大盒子的上面为文本内容，可以在<div>标签中嵌套<h2>和<p>标签来实现；大盒子下面为图像，通过在<div>标签中嵌套<img/>标签来实现。

样式分析：

1. 通过最外层的大盒子对音乐盒进行整体控制，需要对其设置宽度、高度、边框和文本居中等样式。
2. 设置文本模块中“毕业季|再见青春”的样式，主要控制器文本大小、字体、高、行高、边框。
3. 设置文本模块中“36557人收听”的样式，主要控制其文本大小、颜色、高和行高。

题目二：播放器图标(效果图＋代码)

样式分析：

首先为最外层的大盒子添加宽高、渐变背景、圆角样式，然后为嵌套的第二个盒子添加阴影、渐变背景样式，最后制作播放背景、白色圆形背景和三角图标。效果图如下：

题目一

css代码：

*{
            padding: 0;
            margin: 0;
        }
        .all{
            width: 210px;
            height: 265px;
            border: 1px solid #e1e1e1;
            margin: 50px auto;
            text-align: center;
        }
        .header{
            font-size: 18px;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }
        h2{
            height: 40px;
            line-height: 40px
        }
        .text p{
            font-size: 14px;
            color: #ccc;
            height: 24px;
            line-height: 24px;
            border-top: #e1e1e1 1px dashed;
        }

body：

    <div class="all">
        <div class="text">
        <h2 class="header">毕业季|再见青春</h2>
        <p>20210411431704人收听</p>
        </div>
        <div class="image">
            <img src="images/music.jpg" alt="毕业季，再见青春">
        </div>
    </div>

题目二

css代码：

        *{
            margin: 0 auto;
        }
        .bigbg{
            width: 500px;
            height: 400px;
            background: linear-gradient(180deg,#62426c,#d4b5d4,#91576f 85%);
            padding-top: 105px;
            box-sizing: border-box;
            margin: 50px auto;
        }
        .bg{
            width: 300px;
            height: 300px;
            background: linear-gradient(160deg,#945294 20%,#492649 50%);
            border-radius: 20px;
            box-shadow: 10px 10px 30px #2f0f2f;
            padding-top: 55px;
            box-sizing: border-box;
        }
        .box{
            width: 240px;
            height: 195px;
            background: linear-gradient(160deg,#fab097 20%,#a85a67 50%);
            border-radius: 20px;
            border: 26px solid #241826;
            padding-top: 20px;
            box-sizing: border-box;
        }
        .box_1{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: #fff;
            padding: 20px 0 0 10px;
            box-sizing: border-box;
        }
        .play{
            width: 0;
            height: 0;
            border: 30px solid #fff;
            border-left: 30px solid #281a29;
            border-right: none;
        }

body：

<div class="bigbg">
    <div class="big">
        <div class="box">
            <div class="box_1">
                <div class="play">

                </div>
            </div>
        </div>
    </div>
</div>