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

代码语言: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
  .........完整代码请登录后点击上方下载按钮下载查看

网友评论0