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