多级评论列表及评论表单css样式效果-html代码-BFW代码库

代码语言：html
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["colpick", "colpick"], function() {
                $('#picker').colpick({
                    flat: true,
                    layout: 'hex',
                    submit: 0
                });
            });
        });
    </script>
    <style>
        .widget_tag_cloud {
            border: 1px solid #eee;
            border-radius: 2px;
            background: #FFFFff;
            padding: 15px
        }

        .widget_tag_cloud h3 {
            background-color: #fbfbfb;
            border-bottom: 1px solid #eee;
            margin: -15px -15px 15px;
            padding: 15px
        }

        .widget_tag_cloud .tagcloud a {
            display: inline-block;
            margin: 3px 10px 3px 0
        }
        .widget-comments {
            background: #FFFFff;
        }
        .widget-comments a {
            padding: 10px 23px 0px 70px;
            display: block;
            overflow: hidden;
            position: relative;
            color: #777;
        }

        .widget-comments li:last-child a {
            padding-bottom: 0
        }

        .widget-comments a:hover {
            color: #444
        }

        .widget-comments a:hover .inner {
            background-color: #fbfbfb
        }

        .widget-comments .inner {
            border-radius: 2px;
            padding: 12px 15px;
            border: 1px solid #eee;
            position: relative
        }

        .widget-comments .inner::before, .widget-comments .inner::after {
            content: '';
            position: absolute;
            left: -5px;
            top: 9px;
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent
        }

        .widget-comments .inner::before {
            border-right: 5px solid #aaa
        }

        .widget-comments .inner::after {
            border-right: 5px solid #fff;
            margin-bottom: 1px
        }

        .widget-comments time {
            display: block;
            font-size: 12px;
            color: #bbb;
            margin-bottom: 3px
        }

        .widget-comments strong {
            margin-right: 10px;
            color: #bbb
        }

        .widget-comments .avatar {
            float: left;
            width: 42px;
            height: 42px;
            margin-left: -52px;
            border-radius: 50%
        }
        .comments {
            background-color: #fff;
            border-radius: 4px;
            overflow: hidden;
            padding: 30px;
            margin-bottom: 20px;
        }
        .comments-title {
            margin: 0;
            line-height: 1;
            margin-bottom: 15px;
            font-weight: bold;
            font-size: 15px
        }

        .comments-title small {
            font-weight: normal;
            display: inline-block;
            margin-left: 10px;
            color: #999;
            font-size: 12px
        }

        .comments-respond {
            position: relative;
            margin-bottom: 15px
        }

        .comt {
            position: relative;
            padding-left: 52px
        }

        .comt-title {
            font-size: 12px;
            color: #999;
            float: left;
            margin-left: -52px;
            width: 42px;
            text-align: center
        }

        .comt-title .avatar {
            height: 42px;
            width: 42px;
            border-radius: 2px;
            margin-bottom: 5px
        }

        .comt-title p {
            margin: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }

        .comt-box {
            border: 2px solid #ccd4d9;
            padding: 5px 10px 0;
            border-radius: 2px;
            background-color: #fff;
            position: relative
        }

    

        .comt-area {
            width: 100%;
            resize: none;
            overflow-x: hidden;
            overflow-y: auto;
            border: none;
            line-height: 22px;
            font-size: 14px;
            outline: 0;
            color: #666;
            height: 72px
        }

        .comt-ctrl {
            background-color: #fbfbfb;
            height: 36px;
            margin-left: -10px;
            border-top: solid 1px #f2f2f2
        }

        .comt-submit {
            position: absolute;
            right: -2px;
            bottom: -2px;
            background: #FF6651;
            border: none;
            border: 2px solid;
            border-color: #FF6651;
            border-left: none;
            border-top: none;
            padding: 0px;
            width: 100px;
            height: 38px;
            line-height: 38px;
            color: #fff;
            outline: 0;
            border-radius: 0 0 2px 0;
            font-size: 16px
        }

        .comt-count {
            float: right;
            color: #999;
            margin-bottom: 5px
        }

        .comt-tips {
            text-align: center;
            margin-right: 110px;
            line-height: 116px;
            font-size: 18px;
            color: #fff
        }

        .comt-tips .comt-tip {
            position: absolute;
            top: -2px;
            left: -2px;
            background: #7AD071;
            right: -2px;
            z-index: 2;
            bottom: -2px;
            border-radius: 2px
        }

        .comt-error {
            background: #FF5E52
        }

        .comt-comterinfo {
            padding: 15px 0;
            text-align: center
        }

        .comt-comterinfo ul {
            padding: 0;
            margin: 0;
            list-style: none;
            text-align: left;
            display: inline-block;
            color: #999
        }

        .comt-comterinfo li {
            margin-bottom: 10px;
            display: inline-block;
        }

        .comt-comterinfo input {
            margin-right: 10px;
            position: relative;
            border: 2px solid #CCD4D9;
            border-radius: 2px;
            height: 36px;
            padding: 4px 14px;
            outline: none;
            /*width: 220px;*/
            box-shadow: none;
            *height: 20px
        }

        .postcomments {
            margin-bottom: 45px
        }

        .commentlist {
            padding: 0;
            list-style: none;
            margin: 0
        }

        .comment {
            position: relative;
            padding: 15px 0 15px 52px;
            overflow: hidden;
            border-bottom: 1px solid #eee
        }

        .comment .comments-respond {
            margin-top: 30px
        }

        .comment .comt-avatar {
            width: 42px;
            height: 42px;
            background-color: #FFF;
            float: left;
            position: relative;
            margin-left: -52px
        }

        .comment .comt-avatar .avatar {
            display: block;
            border-radius: 2px;
            width: 42px;
            height: 42px
        }

        .comment .comt-main {
            position: relative;
            margin-right: 50px;
            color: #666;
            font-size: 14px;
            word-wrap: break-word
        }

        .comment .comt-main p {
            margin-top: 15px;
            margin-bottom: 0
        }

        .comment .comt-author {
            margin-right: 10px
        }

        .comment .url {
            color: #999
        }

        .comment .url:hover {
            color: #666;
            text-decoration: underline
        }

        .comment .comt-meta {
            font-size: 12px;
            color: #bbb;
            margin-top: 7px
        }

        .comment .comment-reply-link {
            font-size: 12px;
            color: #bbb;
            display: none;
            margin-left: 30px
        }

        .comment .comment-reply-link:hover {
            color: #666
        }

        .comment .comt-f {
            position: absolute;
            top: 15px;
            right: 0;
            font-size: 16px;
            color: #bbb
        }

        .comment .comt-approved {
            border-radius: 2px;
            font-size: 12px;
            background-color: #666;
            color: #fff;
            display: inline-block;
            padding: 2px 3px 1px;
            line-height: 1;
            margin-right: 10px
        }

        .comment .children {
            list-style: none;
            padding: 0
        }

        .comment .children .comment {
            margin: 15px 0 0;
            border-top: 1px solid #eee;
            border-bottom: none;
            padding-bottom: 0
        }

        .comment pre {
            margin: 3px 0 5px;
            padding: 7px 10px;
            border-radius: 1px
        }

        .comment .depth-1 {
            border-bottom: #eee 1px solid
        }

        .comment .wp-smiley {
            margin-bottom: 2px
        }

        .comment:hover {
            background-color: #f8f8f8
        }

        .comment:hover .comt-f {
            color: #666
        }

        .comment:hover .comment-reply-link {
            display: inline-block
        }

        #cancel-comment-reply-link {
            display: none;
            font-size: 12px;
            text-align: center;
            margin-top: 7px;
            color: #999
        }

        #cancel-comment-reply-link:hover {
            color: #666
        }

        .comment #cancel-comment-reply-link {
            display: block
        }

        .comments-pagination {
            margin-top: 15px;
            text-align: center;
            font-size: 14px
        }

        .comments-pagination a, .comments-pagination span {
            display: inline-block;
            padding: 7px 15px;
            border-radius: 2px;
            margin: 0 2px
        }

        .comments-pagination a {
            text-decoration: none;
            background-color: #ddd;
            color: #666;
            opacity: 1
        }

        .comments-pagination span {
            cursor: default;
            color: #aaa
        }

        .comments-pagination a:hover, .comments-pagination a:focus {
            opacity: 0.8
        }

        .comments-pagination .current {
     .........完整代码请登录后点击上方下载按钮下载查看
多级评论列表及评论表单css样式效果

网友评论0

css实现单个input输入框输入分割数字验证码效果代码

css+js实现登录表单背景跟随鼠标滑入滑出动画背景效果代码

css+js实现聚焦立体阴影邮箱输入框表单提交反馈效果代码

css+js实现可显示和隐藏密码输入框效果代码

css实现自适应简洁英文登录注册表单页面代码

vue-select实现vue3下拉选择框效果代码

jquery.dropdown实现下拉单选多选框效果代码

css实现range数字选择美化效果代码

layui-vue实现考试题目添加表单录入效果代码

svg+css实现简洁登录表单页面代码
