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>回到当初爱你的时空<
  • 6
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
好的,以下是一个简单音乐宣传网页的HTMLCSS代码示例: ```HTML <!DOCTYPE html> <html> <head> <title>音乐宣传</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <h1>音乐宣传</h1> </header> <main> <section> <h2>最新单曲 - 《XXX》</h2> <div class="song"> <div class="song-cover"> <img src="xxx.jpg" alt="XXX"> </div> <div class="song-info"> <p>作曲:XXX</p> <p>演唱:XXX</p> <p>时长:XXX</p> </div> </div> <audio controls> <source src="xxx.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> </section> <section> <h2>关于歌手 - XXX</h2> <p>XXX是一位具有实力的歌手,他曾获得XXX大奖等多个音乐奖项。</p> <p>他的音乐风格多样,从流行到摇滚,都有他的作品。</p> <p>他的最新专辑《XXX》已经发布,欢迎大家前来收听。</p> </section> <section> <h2>相关新闻</h2> <ul> <li><a href="#">XXX荣获最佳歌手大奖</a></li> <li><a href="#">XXX新专辑《XXX》上线</a></li> <li><a href="#">XXX与YYY合作推出新单曲《XXX》</a></li> </ul> </section> </main> <footer> <p>©2021 音乐宣传</p> </footer> </body> </html> ``` ```CSS body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 20px; } main { padding: 20px; } section { margin-bottom: 40px; } h1, h2 { margin: 0; } .song { display: flex; align-items: center; margin-bottom: 20px; } .song-cover img { width: 150px; height: 150px; object-fit: cover; margin-right: 20px; } audio { display: block; margin-top: 20px; } ul { list-style: none; padding: 0; margin: 0; } li { margin-bottom: 10px; } a { color: #333; text-decoration: none; } a:hover { text-decoration: underline; } ``` 你可以根据需要进行适当修改和美化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

valiant小东

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值