多级评论列表及评论表单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 {
     .........完整代码请登录后点击上方下载按钮下载查看

多级评论列表及评论表单css样式效果

网友评论0

js+css实现炫酷被外形飞船回收的登录表单页面代码

dyform可视化表单拖拽json生成器代码

jquery+css实现动态背景登录表单页面代码

jquery+css实现动态背景用户密码验证码发送登录表单代码

css美化range实现曲线波浪滑竿效果代码

range美化成金属质感不锈钢旋钮可拖动效果代码

range美化彩虹滑动取值器滑块效果代码

css美化range成音量调节器代码

css美化radio单选按钮实现动画效果代码

css美化radio单选按钮实现列表单选效果代码