1.3音乐简介

效果：

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>

欢迎大家来到IT世界,在知识的湖畔探索吧!

css:

效果：

发表评论的按钮

效果：

1.5 评论区域

css:

欢迎大家来到IT世界,在知识的湖畔探索吧!.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:

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://itzsg.com/17859.html