【H5 音乐播放实例】第六节 其他

简介: 【H5 音乐播放实例】第六节 其他

##1.3音乐简介

5.png

6.png

7.png

效果:

image.png

##1.4评论框和评论按钮

代码写在歌曲简介DIV的下面:


<!-- 用户评论 -->
<div style="width: 100%; min-height: 220px; z-index: 0;margin-top: 28px;" class="commentBox" contenteditable="true">
  <textarea id="commentInputBox"></textarea>
</div>

css:

9.png

效果:

10.png

发表评论的按钮

12.png13.png


效果:

14.png

##1.5 评论区域

15.png

css:

.comments {border: 1px dotted #666;margin-top:38px;}
.comments .comment {
  border: 1px dotted #666;
  height: 200px;
}
.comments .comment .c_left {
  width: 25%;
  border: 1px dotted #666;
  height: 100%;
  float: left;
  position: relative;
}
.comments .comment .c_right {
  width: 74%;
  height: 100%;
  float: left;
}
.comments .comment .c_right .c_contentBox {
  height: 160px;
}
.comments .comment .c_right .c_contentBox .c_content{
  padding:20px;
  color:#252424;
}
.comments .comment .c_right .c_bottom {
  height: 40px;
  border-top: 1px solid #8A8585;
}
.comments .comment .c_right .c_bottom .time {
  margin-left: 6px;
    line-height: 35px;
    color: #222;
}
.comments .comment .c_right .c_bottom .reply {
  float: right;
  margin: 8px 12px;
}
.comments .comment .c_right .c_bottom .reply a {
  text-decoration: none;
  color: #293F7D;
  font-weight: 600;
}

Html:

16.png

17.png


相关文章
|
JavaScript 前端开发 Python
传智播客预习视频(16倍速无人值守自动下一节)
传智播客预习视频(16倍速无人值守自动下一节)
961 0
传智播客预习视频(16倍速无人值守自动下一节)
|
8月前
|
XML Java 调度
Android开发音效增强中铃声播放Ringtone及声音池调度SoundPool的讲解及实战(超详细 附源码)
Android开发音效增强中铃声播放Ringtone及声音池调度SoundPool的讲解及实战(超详细 附源码)
368 0
|
存储 缓存 物联网
数据缓存系列分享(五):零代码搭建妙鸭相机
本文会解读妙鸭相机的开源项目facechain的基本原理,并演示如何通过阿里云ECI在云上零代码快速搭建一台个人的“妙鸭相机”。
829 2
|
移动开发 前端开发
【H5 音乐播放实例】第五节 音轨制作
【H5 音乐播放实例】第五节 音轨制作
133 0
|
移动开发
【H5 音乐播放实例】第四节 音乐详情页制作 -音乐的播放和暂停
【H5 音乐播放实例】第四节 音乐详情页制作 -音乐的播放和暂停
152 0
|
移动开发 前端开发
【H5 音乐播放实例】第三节 音乐详情页制作(3)
【H5 音乐播放实例】第三节 音乐详情页制作(3)
102 0
|
移动开发 前端开发 容器
【H5 音乐播放实例】第二节 音乐详情页制作(2)
【H5 音乐播放实例】第二节 音乐详情页制作(2)
|
移动开发 前端开发 JavaScript
【H5 音乐播放实例】第一节 音乐详情页制作(1)
【H5 音乐播放实例】第一节 音乐详情页制作(1)
138 0
|
XML Java Android开发
移动应用程序设计基础——安卓动画与视音频播放器的实现
《移动应用程序设计基础》实验6 安卓动画与视音频播放器的实现 通过本实验,使得学生掌握导航的制作基本方法,掌握安卓动画和多媒体播放器的制作。 【实验内容】 1、 实现底部导航功能,包括Tween动画、Frame动画、音频播放、视频播放四个按键。 2、 实现动画功能,其中Tween动画可在界面选择四种类型的动画效果。 3、 实现音频播放。 4、 实现视频播放。 ...
259 0
移动应用程序设计基础——安卓动画与视音频播放器的实现
|
vr&ar 图形学
【Unity3D 灵巧小知识点】 ☀️ | 切换场景后保留上个场景中的游戏物体不被销毁
Unity 小科普 老规矩,先介绍一下 Unity 的科普小知识: Unity是 实时3D互动内容创作和运营平台 。 包括游戏开发、美术、建筑、汽车设计、影视在内的所有创作者,借助 Unity 将创意变成现实。 Unity 平台提供一整套完善的软件解决方案,可用于创作、运营和变现任何实时互动的2D和3D内容,支持平台包括手机、平板电脑、PC、游戏主机、增强现实和虚拟现实设备。 也可以简单把 Unity 理解为一个游戏引擎,可以用来专业制作游戏!