css布局实现手机端微信朋友圈效果代码-html代码-BFW代码库

代码语言：html

代码描述：css布局实现手机端微信朋友圈效果代码

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

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>jQuery仿微信朋友圈样式效果代码</title>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>

    <style type="text/css">
        #list,#list li,.po-hd,.post {
            overflow: hidden
        }
        
        .po-cmt,.post .list-img:nth-child(1),.time {
            float: left
        }
        
        #list li,.cmt-wrap,.r,.time {
            clear: both
        }
        
        .btn,a {
            cursor: pointer
        }
        
        blockquote,body,code,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,pre,td,textarea,th,ul {
            margin: 0;
            padding: 0
        }
        
        table {
            border-collapse: collapse;
            border-spacing: 0
        }
        
        fieldset,img {
            border: 0
        }
        
        address,caption,cite,code,dfn,em,strong,th,var {
            font-style: normal;
            font-weight: 400
        }
        
        ol,ul {
            list-style: none none
        }
        
        caption,th {
            text-align: left
        }
        
        h1,h2,h3,h4,h5,h6 {
            font-size: 100%;
            font-weight: 400
        }
        
        q::after,q::before {
            content: ""
        }
        
        abbr,acronym {
            border: 0;
            font-variant: normal
        }
        
        sup {
            vertical-align: text-top
        }
        
        sub {
            vertical-align: text-bottom
        }
        
        input,select,textarea {
            font-family: inherit;
            font-size: inherit;
            font-weight: inherit
        }
        
        legend {
            color: #000
        }
        
        a {
            text-decoration: none
        }
        
        input {
            -webkit-appearance: none
        }
        
        * {
            -webkit-tap-highlight-color: transparent
        }
        
        html {
            background-color: #f8f8f8;
            font-family: Arial,sans-serif;
            font-size: 13px
        }
        
        @media screen and (min-width:350px) {
            html {
                font-size: 15px
            }
        
            .cmt-wrap {
                font-size: 14px
            }
        
            .time {
                font-size: 13px
            }
        }
        
        .hide {
            display: none
        }
        
        header {
            position: relative
        }
        
        #avt,#user-name {
            position: absolute
        }
        
        #bg {
            width: 100%
        }
        
        #user-name {
            text-align: right;
            right: 114px;
            bottom: 15px;
            color: #fff;
            font-weight: 700;
            font-size: 15px;
            text-shadow: 0 1px .5px #000
        }
        
        #share a,.btn {
            font-size: 14px
        }
        
        .btn,b {
            font-weight: 400
        }
        
        #share a,#share p,.btn {
            text-align: center
        }
        
        #avt {
            width: 74px;
            height: 74px;
            border: 1px solid #dbdbdb;
            right: 15px;
            bottom: -22px;
            padding: 1px;
            background-color: #fff
        }
        
        #list li,.po-hd {
            position: relative
        }
        
        #list {
            padding: 30px 0 10px
        }
        
        #list li {
            line-height: 1.5;
            border-bottom: 1px solid #e2e2e2;
            margin-top: 15px;
            padding-bottom: 15px
        }
        
        #share a:nth-child(2),.ads,.po-avt {
            position: absolute
        }
        
        .ads {
            color: #999;
            right: 5px;
            top: 0
        }
        
        .ads img {
            width: 10px;
            padding-left: 8px
        }
        
        .ad-link {
            color: #3b5384
        }
        
        .post .ad-link img {
            width: 11px;
            padding: 0;
            display: inline-block
        }
        
        .po-avt-wrap {
            padding-left: 10px
        }
        
        .po-avt {
            width: 40px;
            height: 40px;
            top: 0;
            left: 10px
        }
        
        .r {
            border-bottom: 8px solid #eee;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            width: 1px;
            margin-top: 5px;
            margin-left: 10px
        }
        
        .po-cmt {
            padding-left: 60px;
            padding-right: 10px;
            width: 100%;
            box-sizing: border-box
        }
        
        .po-name {
            color: #576b95
        }
        
        .post {
            color: #252525;
            padding-bottom: 10px
        }
        
        .post img {
            padding: 10px 5px 0 0;
            display: block;
            max-height: 130px;
            max-width: 130px
        }
        
        #share a,.btn {
            display: inline-block
        }
        
        .post .list-img {
            width: 30%;
            max-height: 80px;
            max-width: 80px;
            padding-right: 5px;
            float: left;
            object-fit: cover
        }
        
        .post .list-img:last-child {
            padding-right: 0
        }
        
        .time {
            color: #b1b1b1
        }
        
        .c-icon {
            width: 20px;
            float: right
        }
        
        .cmt-wrap {
            width: 100%;
            background-color: #eee
        }
        
        .like {
            color: #576b95;
            padding: 5px 5px 3px 12px
        }
        
        .like img {
            width: 12px;
            padding-right: 5px
        }
        
        .cmt-list {
            padding: 5px 12px;
            color: #454545
        }
        
        .cmt-list p {
            padding-top: 3px
        }
        
        .cmt-list span {
            color: #3b5384
        }
        
        #share a {
            border-radius: 5px;
            background-color: #26337e;
            color: #fff;
            line-height: 2.5;
            width: 138px;
            margin: 0 10px
        }
        
        #share a:nth-child(1) {
            position: absolute;
            left: 50%;
            margin-left: -148px
        }
        
        #share a:nth-child(2) {
            right: 50%;
            margin-right: -148px
        }
        
        #share p {
            padding: 45px 0 10px;
            color: #999
        }
        
        #guide {
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
           .........完整代码请登录后点击上方下载按钮下载查看