HTML5 评论列表界面模板

Comments list

h5, template, comment

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 23338
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html,
body {
    background-color: #f0f2fa;
    font-family: "PT Sans", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
    color: #555f77;
    -webkit-font-smoothing: antialiased;
}
input,
textarea {
    outline: none;
    border: none;
    display: block;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    font-family: "PT Sans", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
    font-size: 1rem;
    color: #555f77;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #ced2db;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #ced2db;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
    color: #ced2db;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #ced2db;
}
p {
    line-height: 1.3125rem;
}
.comments {
    margin: 2.5rem auto 0;
    max-width: 60.75rem;
    padding: 0 1.25rem;
}
.comment-wrap {
    margin-bottom: 1.25rem;
    display: table;
    width: 100%;
    min-height: 5.3125rem;
}
.photo {
    padding-top: 0.625rem;
    display: table-cell;
    width: 3.5rem;
}
.photo .avatar {
    height: 2.25rem;
    width: 2.25rem;
    border-radius: 50%;
    background-size: contain;
}
.comment-block {
    padding: 1rem;
    background-color: #fff;
    display: table-cell;
    vertical-align: top;
    border-radius: 0.1875rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
}
.comment-block textarea {
    width: 100%;
    max-width: 100%;
}
.comment-text {
    margin-bottom: 1.25rem;
}
.bottom-comment {
    color: #acb4c2;
    font-size: 0.875rem;
}
.comment-date {
    float: left;
}
.comment-actions {
    float: right;
}
.comment-actions li {
    display: inline;
}
.comment-actions li.complain {
    padding-right: 0.625rem;
    border-right: 1px solid #e1e5eb;
}
.comment-actions li.reply {
    padding-left: 0.625rem;
}

HTML

<div class="comment-wrap">
        <div class="photo">
            <div class="avatar" style="background-image: url('/assets/coolgirl.jpg')"></div>
        </div>
        <div class="comment-block">
            <p class="comment-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto temporibus iste nostrum dolorem natus recusandae incidunt voluptatum. Eligendi voluptatum ducimus architecto tempore, quaerat explicabo veniam fuga corporis totam reprehenderit
                quasi sapiente modi tempora at perspiciatis mollitia, dolores voluptate. Cumque, corrupti?</p>
            <div class="bottom-comment">
                <div class="comment-date">23.5 2014</div>
                <ul class="comment-actions">
                    <li class="complain">Complain</li>
                    <li class="reply">Reply</li>
                </ul>
            </div>
        </div>
    </div>

<div class="comment-wrap">
        <div class="photo">
            <div class="avatar" style="background-image: url('/assets/coolboy.jpg')"></div>
        </div>
        <div class="comment-block">
            <p class="comment-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto temporibus iste nostrum dolorem natus recusandae incidunt voluptatum. Eligendi voluptatum ducimus architecto tempore, quaerat explicabo veniam fuga corporis totam.</p>
            <div class="bottom-comment">
                <div class="comment-date">22.2 2014</div>
                <ul class="comment-actions">
                    <li class="complain">Complain</li>
                    <li class="reply">Reply</li>
                </ul>
            </div>
        </div>
    </div>
</div>

Comments list

h5, template, comment

编辑器支持Emmet

快捷键

Comments list

h5, template, comment

HTML5带投票功能文章评论（讨论）列表界面模板

HTML5 CSS3树状（树形）评论列表界面设计

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：