多级评论列表及评论表单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