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;
            right: 0;
            width: 100%;
            height: 100%;
            z-index: 9999;
            background-image: url(../images/guide2.png);
            background-repeat: no-repeat;
            background-position: right top;
            background-color: #191919;
            background-size: contain;
            opacity: .9
        }
        
        .btn {
            margin-bottom: 0;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            background-image: none;
            border: 1px solid transparent;
            white-space: nowrap;
            padding: 6px 12px;
            line-height: 1.42857143;
            border-radius: 4px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none
        }
        
        .btn-success {
            color: #fff;
            background-color: #5cb85c;
            border-color: #4cae4c
        }
        
        .btn-group-lg>.btn,.btn-lg {
            padding: 10px 16px;
            font-size: 18px;
            line-height: 1.3333333;
            border-radius: 6px
        }
        
        .btn-block {
            display: block;
            width: 100%
        }
        
        .bq {
            width: 13px;
            padding-left: 2px
        }
        
        .hidenone {
            display: none
        }
        	* {cursor: pointer;}
        	.weui_mask_transition {
        		display: none;
        		position: fixed;
        		z-index: 1;
        		width: 100%;
        		height: 100%;
        		top: 0;
        		left: 0;
        		background: rgba(0, 0, 0, 0);
        		-webkit-transition: background .3s;
        		transition: background .3s;
        	}
        	.weui_fade_toggle {
        		background: rgba(0, 0, 0, 0.6);
        	}
        	.weui_actionsheet {
        		position: fixed;
        		left: 0;
        		bottom: 0;
        		-webkit-transform: translate(0, 100%);
        		-ms-transform: translate(0, 100%);
        		transform: translate(0, 100%);
        		-webkit-backface-visibility: hidden;
        		backface-visibility: hidden;
        		z-index: 2;
        		width: 100%;
        		background-color: #EFEFF4;
        		-webkit-transition: -webkit-transform .3s;
        		transition: transform .3s;
        	}
        	.weui_actionsheet_toggle {
        		-webkit-transform: translate(0, 0);
        		-ms-transform: translate(0, 0);
        		transform: translate(0, 0);
        	}
        	.weui_actionsheet_menu {
        		background-color: #FFFFFF;
        	}
        	.weui_actionsheet_cell:before {
        		content: " ";
        		position: absolute;
        		left: 0;
        		top: 0;
        		width: 100%;
        		height: 1px;
        		border-top: 1px solid #D9D9D9;
        		-webkit-transform-origin: 0 0;
        		-ms-transform-origin: 0 0;
        		transform-origin: 0 0;
        		-webkit-transform: scaleY(0.5);
        		-ms-transform: scaleY(0.5);
        		transform: scaleY(0.5);
        	}
        	.weui_actionsheet_cell:first-child:before {
        		display: none;
        	}
        	.weui_actionsheet_cell {
        		position: relative;
        		padding: 10px 0;
        		text-align: center;
        		font-size: 18px;
        	}
        	.weui_actionsheet_cell.title {
        		color: #999;
        	}
        	.weui_actionsheet_action {
        		margin-top: 6px;
        		background-color: #FFFFFF;
        	}
    </style>

</head>

<body>
    <div id="actionSheet_wrap">
        <div clas.........完整代码请登录后点击上方下载按钮下载查看