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

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

代码语言：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;
      .........完整代码请登录后点击上方下载按钮下载查看