js+css仿微信朋友圈评论布局效果代码-html代码-BFW代码库

js+css仿微信朋友圈评论布局效果代码

代码语言：html

代码描述：js+css仿微信朋友圈评论布局效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        body { font-size: 12px; line-height: 120%; text-align: center; color:#333; padding: 20px;}
        a { color: #333; text-decoration: none;}
        a:hover { text-decoration: underline;}
        * { margin: 0; padding: 0; border: none;}
        .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden}
        .clearfix { *height:1%;}
        #list { margin: 0 auto; text-align: left; width: 540px;}
        .box { border-top: 1px solid #eee; position: relative;  width: 540px; padding: 20px 0}
        .box:hover .close { display: block;}
        .close { display: none; top:0px; right: 0px; width: 28px; height: 28px; border: 1px solid #eee; position: absolute; background: #f2f4f7; line-height: 27px; text-align: center;}
        .close:hover { background: #c8d2e2; text-decoration: none;}
        .head { float: left; width: 60px; height: 60px; margin-right: 10px;}
        .content { float: left; width: 440px;}
        .main { margin-bottom: 10px;}
        .txt { margin-bottom: 10px;}
        .user { color: #369; }
        .pic { margin-right: 5px; width: 200px; border: 1px solid #eee;}
        .info { height: 20px; line-height: 19px; font-size: 12px; margin: 0 0 10px 0;}
        .info .time { color: #ccc; float: left; height: 20px; padding-left: 20px; background: url("//repo.bfw.wiki/bfwrepo/image/606b9f6797084.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_15,h_15,/quality,q_90") no-repeat left top;}
        .info .praise { color: #369; float: right; height: 20px; padding-left: 18px; background: url("//repo.bfw.wiki/bfwrepo/image/5f9e9e7005148.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_15,h_15,/quality,q_90") no-repeat left top;}
        .info .praise:hover { text-decoration: underline; background: url("//repo.bfw.wiki/bfwrepo/image/5f9e9e8c8f25b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_15,h_15,/quality,q_90") no-repeat left top;}
        .praises-total { margin: 0 0 10px 0; height: 20px; background: url("//repo.bfw.wiki/bfwrepo/image/5f9e9e8c8f25b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_15,h_15,/quality,q_90") no-repeat 5px 5px rgb(247, 247, 247); padding: 5px 0 5px 25px; line-height: 19px;}
        .comment-box { padding: 10px 0; border-top: 1px solid #eee;}
        .comment-box:hover { background: rgb(247, 247, 247);}
        .comment-box .myhead { float: left; width: 30px; height: 30px; margin-right: 10px;}
        .comment-box .comment-content { float: left; width: 400px; }
        .comment-box .comment-content .comment-time { color: #ccc; margin-top: 3px; line-height: 16px; position: relative;}
        .comment-box .comment-content .comment-praise { display: none; color: #369; padding-left: 17px; height: 20px; background: url("//repo.bfw.wiki/bfwrepo/image/5f9e9e8c8f25b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_15,h_15,/quality,q_90") no-repeat;  position: absolute; bottom: 0px; right: 44px;}
        .comment-box .comment-.........完整代码请登录后点击上方下载按钮下载查看