【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


相关文章
|
10月前
|
XML Java 调度
Android开发音效增强中铃声播放Ringtone及声音池调度SoundPool的讲解及实战(超详细 附源码)
Android开发音效增强中铃声播放Ringtone及声音池调度SoundPool的讲解及实战(超详细 附源码)
414 0
|
移动开发 前端开发
【H5 音乐播放实例】第五节 音轨制作
【H5 音乐播放实例】第五节 音轨制作
141 0
|
移动开发
【H5 音乐播放实例】第四节 音乐详情页制作 -音乐的播放和暂停
【H5 音乐播放实例】第四节 音乐详情页制作 -音乐的播放和暂停
160 0
|
移动开发 前端开发
【H5 音乐播放实例】第三节 音乐详情页制作(3)
【H5 音乐播放实例】第三节 音乐详情页制作(3)
106 0
|
移动开发 前端开发 容器
【H5 音乐播放实例】第二节 音乐详情页制作(2)
【H5 音乐播放实例】第二节 音乐详情页制作(2)
|
移动开发 前端开发 JavaScript
【H5 音乐播放实例】第一节 音乐详情页制作(1)
【H5 音乐播放实例】第一节 音乐详情页制作(1)
164 0
|
vr&ar 图形学
【Unity3D 灵巧小知识点】 ☀️ | 切换场景后保留上个场景中的游戏物体不被销毁
Unity 小科普 老规矩,先介绍一下 Unity 的科普小知识: Unity是 实时3D互动内容创作和运营平台 。 包括游戏开发、美术、建筑、汽车设计、影视在内的所有创作者,借助 Unity 将创意变成现实。 Unity 平台提供一整套完善的软件解决方案,可用于创作、运营和变现任何实时互动的2D和3D内容,支持平台包括手机、平板电脑、PC、游戏主机、增强现实和虚拟现实设备。 也可以简单把 Unity 理解为一个游戏引擎,可以用来专业制作游戏!
|
前端开发
小视频源码,可控的跑马灯,无需焦点
小视频源码,可控的跑马灯,无需焦点
305 0
|
Android开发
Android开发;教你做一个后台相机
做过相机的同学都知道,Camera需要一个SurfaceView来承载预览的输出流,SurfaceView的特性限制了它必须要有一个可见的View才能够使用。
2192 0
|
前端开发
用MVVM模式开发中遇到的零散问题总结(4)——自制摄像头拍摄大头贴控件
原文:用MVVM模式开发中遇到的零散问题总结(4)——自制摄像头拍摄大头贴控件      一直有个疑问,为什么silverlight对摄像头支持这么好,WPF却一个库都没有....于是我各种苦恼啊,各种CodeProject啊,终于让我找到海外兄弟写的源码了,原理是通过不断向摄像头读取图片不断刷新到窗体控件上。
1040 0