css布局实现微信聊天记录效果代码-html代码-BFW代码库

css布局实现微信聊天记录效果代码

代码语言：html

代码描述：css布局实现微信聊天记录效果代码

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

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta content="yes" name="apple-touch-fullscreen">
    <style type=text/css>
        body
              {
                background-color: #ebebeb;
                font-family: -apple-system;
                font-family: "-apple-system", "Helvetica Neue", "Roboto", "Segoe UI", sans-serif;
              }
              .chat-left, .media_left
              {
                clear:both;
                font-size: 10.5pt;
              }
              .chat-left div:nth-of-type(1),
              .media-left div:nth-of-type(1)
              {
                float: left;
              }
              .chat-left div:nth-of-type(2),
              .media-left div:nth-of-type(2)
              {
                margin: 0 50px 2px 50px;
                padding: 0px;
                color: #848484;
                font-size: 80%;
                text-align: left;
              }
              .chat-left div:nth-of-type(3)
              {
                background-color: white;
                /*float: left;*/
                margin: 0 50px 10px 50px;
                padding: 10px 10px 10px 10px;.........完整代码请登录后点击上方下载按钮下载查看