html+css——做一个简单的音乐卡片

小项目由html和css实现，也可以选择加js

---

项目设计

效果图

展示下小项目的效果图：

 效果一  html+css

 效果二  html+css+js

  两个效果图，不同的展示效果。但是实现的功能都是一样的。看完效果图你有自己的思路了嘛？可以自己先动手试试，完成之后欢迎私信我或者在评论区说出你的新奇想法哦！

---

设计

html部分

  首先还是使用一个div标签将卡片整体包裹在一起，方便后续对于卡片样式和位置的设定。同时可以添加一个出场动画之类的，此处我添加了一个中心弹出的动画，所以id命名为：scale-up-ccenter。对于此动画设置，可以根据个人爱好和所学进度而定。

<!-- 用于设计卡片整体 和后续卡片部分样式的设置  -->
<div class="scale-up-center"></div>

  对于效果一图的分析，卡片内部含有大致三部分内容；照片、文字和音频播放插件。逐一分析，照片我们可以使用<img>标签添加，也可以通过背景图片添加。这二者可以任选其一，但我们选择后者，因为后者是不占用内容空间。

  （1）使用一个类名为img的标签用于设置背景图片。

  <!-- 用于插入背景图  -->
  <div class="img"></div>

  （2）对于文字部分，使用标题标签和段落标签。同时可以选择用div标签包裹起来，方便对文字部分整体内容的设置。

    <!-- 用于对文字部分的样式设计 -->
    <div class="text">
        <h4>反方向的钟</h4>
        <h5>周杰伦</h5>
        <p>穿梭时间画面的钟</p>
        <p>从反方向开始移动</p>
        <p>回到当初爱你的时空</p>
        <p>停格内容不忠</p>
    </div>
   

（3）对于第三部分音频播放插件，我们首先需要准备好一个你喜欢的源文件片段和标签<audio>来设置。

    <!-- 音频插件以及对于是否可见(controls)属性值的设置 -->
    <audio id="audio" src="./反方向的钟.mp3" controls></audio>

  对于各部分的设置完成后我们结合并查看一下效果；

    <div class="scale-up-center">
    <div class="img"></div>
    <div class="text">
        <h4>反方向的钟</h4>
        <h5>周杰伦</h5>
        <p>穿梭时间画面的钟</p>
        <p>从反方向开始移动</p>
        <p>回到当初爱你的时