flex模拟微信布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
html{
font-size:62.5%;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
-ms-touch-action:manipulation;
touch-action:manipulation;
}
html *{
margin:0;padding:0;outline:0;
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-text-size-adjust:none;
}
title{
width:100%;text-align:center;display:block;
}
html,body{
-webkit-user-select:none;-ms-user-select:none;user-select:none;
height:100%;
font-family:"Helvetica Neue",Helvetical,STHeiTi,sans-serif;
}
body{
font-size:1.4rem;
-webkit-overflow-scrolling:touch;
}
body,p,form,input,button,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
address,article,aside,details,figcaption,figure,footer,header,menu,nav,section,summary,img{display:block;}
audio,canvas,progress,video{display:inline-block;vertical-align:baseline;}
a,img{
-webkit-touch-callout:none;
}
input,img{border:none;vertical-align:middle;}
a{
outline:0;cursor:pointer;text-decoration:none;
-webkit-tap-highlight-color:transparent;
}
a:link,a:active,a:visited{text-decoration:none;}
table{border-collapse:collapse;border-spacing:0;}
td,th{padding:0;}
textarea{overflow:auto;reaize:vertical;}
input,select,textarea,button{outline:none;border:none;background:none;}
button,input,textarea{
-webkit-user-select:text;-ms-user-select:text;user-select:text;
-webkit-appearance:none;
}
button,select{
text-transform:none;
}
button,html input[type="button"],input[type="reset"],input[type="submit"]{
cursor:pointer;
}
hr{
-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;
height:0;
}
/*字体*/
h1{font-size:1.8rem;}
h2{font-size:1.6rem;}
h3{font-size:1.4rem;}
h1,h2,h3,h4,h5,h6,small{font-style:normal;font-weight:normal;}
li,ol{list-style:none;}
b,strong{font-weight:bold;}
em,i{font-style:normal;}
button,input,select,textarea{font-family:"Helvetica Neue",Helvetical,STHeiTi,sans-serif;}
/*颜色*/
input::-moz-placeholder,textarea::-moz-placeholder{color:#ccc;}
input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#ccc;}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#ccc;}
/*2、简化样式*/
/* .clear{
clear:both;
height:0;font-size:0;line-height:0;visibility:hidden; overflow:hidden;
}*/
.fl{float:left;}
.fr{float:right;}
body{ margin:0 auto;max-width:640px; min-width:320px;color:#555; /*padding-bottom:8%;*/background:#fef9f1;}
/*input,textarea{font-size:1rem;height:1rem;padding:2rem 0;}*//*input是in注意这里不能给line-height，否则上下就无法对其,height等于文字大小，
是为了光标与文字对其，光标高度一般与font-size有关。*/ html,body,.box{
height:100%;
}
.box{
display:-webkit-flex;
-webkit-flex-direction:column;/*垂直布局*/ display:flex;
flex-direction:column; font-family:"microsoft yahei";
font-size:18px;
width:100%;
}
.box .header{
height:40px;
line-height:40px;
text-align:center;
background:#3498DB;
color:#fff;
}
.box .body{
width:100%;
display: block;
border-bottom:1px solid #eee;
overflow:auto;/*内部出现滚动条*/
flex:1;/*随着内容增减，变化高度*/
padding-bottom:10px;
}
.box .send-left {
align-self:flex-end;
margin-top:10px;
position:relative;
/* height:35px;*/
background:#F8C301;
border-radius:5px; /* 圆角 */
line-height:28px;
margin-right:16px;
margin-left:16px;
padding:0 10px;
float:left;
}
.box .send-left .arrow {
position:absolute;
top:5px;
left:-15px;
width:0;
height:0;
font-size:0;
border:solid 8px;
border-color:#fff #F8C301 #fff #fff;
}
.box .send {
align-self:flex-end;
margin-top:10px;
position:relative;
/* height:35px;*/
background:#9dd4f2;
border-radius:5px; /* 圆角 */
line-height:28px;
margin-right:16px;
margin-left:16px;
padding:0 10px;
float:right;
}
.box .send .arrow {
position:absolute;
top:5px;
right:-15px;
width:0;
height:0;
font-size:0;
border:solid 8px;
border-color:#fff #fff #fff #9dd4f2;
}
.box .clear{
clear:both;
}
.box .footer{
height:40px;
line-height:40px;
display:-webkit-flex;
display:flex;
}
.box .footer input{
flex:auto;
border:none;
border-right:1px solid #eee;
font-size:18px;
padding-left:4px;
}
.box .footer button{
width:50px;
font-size:18px;
}
</style>
</head>
<body>
<!--
容器属性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
项目属性：
order
flex-grow
flex-shrink
flex-basis
flex
align-self
-->
<div class="box">
<div class="header">
消息
</div>
<div class="body">
<div class="send-left">
你好！
<div class="arrow"></div>
</div>
<div class="clear"></div>
<div class="send">
nihao
<div class="arrow"></div>
</div>
<div class="clear"></div>
<div class="send-left">
周末去玩不
<div class="arrow"></div>
</div>
<div class="clear"></div>
<div class="send">
好呀
<div class="arrow"></div>
</div>
<div class="clear"></div>
<div class="send">
去哪儿
<div class="arrow"></div>
</div>
<div class="clear"></div>
<div class="send">
太远的地方就算了，明天还要上班，晚上准备好好吃一顿，现在秋天了，还得准备长秋膘了，冬天就不冷了，明天就要上班了，就没有时间做好吃的了。
<div class="arrow"></div>
</div>
<div class="clear"></div>
<div class="send-left">
哎呀呀，真麻烦，那就去河坊街吧！
<div class="arrow"></div>
</div>
<div class="clear"></div>
<div class="send">
不想去。。。
<div class="arrow"></div>
</div>
<div class="clear"></div>
<div class="send-left">
那就去西湖，西溪湿地，动物园，嗯，还有北高峰，这些可都没有出省的啊，算是比较近的了，要是人少的话，估计那些地方就一般了，再不然就是到附近的影院看看电影了。
<div class="arrow"></div>
</div>
<div class="clear"></div>
<div class="send">
flex模拟微信布局的更多相关文章
- android 模拟微信消息框 BaseAdapter()方法 [2]
在昨天的微信布局的基础上加内容 http://www.cnblogs.com/Seven-cjy/p/6098024.html 项目下/res/layout下创建一个 listview_layout. ...
- CSS3：布局display属性的flex（弹性布局）
CSS3:布局display属性的flex(弹性布局) 一.简介 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后, ...
- Flex box弹性布局 及 响应式前端设计的优化
Flex box弹性布局 Flex box是CSS3新添加的一种模型属性,它的出现有力的打破了我们常常使用的浮动布局.实现垂直等高.水平均分.按比例划分,可以实现许多我们之前做不到的自适应布局.如果你 ...
- chorme模拟微信浏览器
chorme模拟微信浏览器 1.代码填入到图中2出 Mozilla/5.0 (Linux; Android 4.4.4; HM NOTE 1LTEW Build/KTU84P) AppleWebKit ...
- android 安卓 微信布局 [1]
微信布局 直接上代码吧 ---------------------------------------- 头部 -------------------------------------------- ...
- 如何在浏览器中简单模拟微信浏览器（仅限于通过User Agent进行判断的页面）
模拟微信浏览器: .打开360极速 .F12开发者工具 .开发者模式左上方有一个手机样子的图标 点击进入 设备模式‘ .将UA选项中的字符串替换成: Mozilla/ 备注: 替换的字符串是微信浏览器 ...
- ListView模拟微信好友功能
ListView模拟微信好友功能 效果图: 分析: 1.创建listView 2.创建数据 3.创建适配器 将数据放到呈现数据的容器里面. 将这个容器(带数据)连接适配器. 其实是直接在我们自己写的a ...
- display Flex 盒子模型布局兼容Android UC
<!DOCTYPE html><html><head><meta charset="utf-8"><meta content= ...
- CSS开发技巧（四）：解决flex多行布局的行间距异常、子元素高度拉伸问题
在使用flex布局时,若出现换行,有两种较为特殊的现象是值得我们研究的: 子元素高度被拉伸,其实际高度大于它的内容高度. 各行子元素之间的行间距过大,甚至我们根本没有给子元素设置margin. 现在我 ...
随机推荐
- codeforces 581C. Developing Skills 解题报告
题目链接:http://codeforces.com/problemset/problem/581/C 题目意思:给出 n 个数:a1, a2, ..., an (0 ≤ ai ≤ 100).给出值 ...
- 用原生DOM 遍历页面节点
代码丢失,直接上图:
- 【XLL 文档翻译】【第1部分】 Add-in 管理器 和 XLL 接口函数
xlAddInManagerInfo/xlAddInManagerInfo12 在 Excel 会话中,每一次调用 Add-In 管理器时,系统会调用这两个函数.此函数可以在 Add-In 管理器中提 ...
- js控制表格单双行颜色交替显示
<script language="JavaScript"> window.onload = function() { var Table=document.getEl ...
- C/C++不同文件夹下包含头文件的方法及#include的使用
转自:http://blog.sina.com.cn/s/blog_6e0693f70100so42.html 本文主要介绍了如何不同文件夹下使用预处理器指示符#include. 假设我们有如下一个工 ...
- android bitmap的放大缩小
private static Bitmap big(Bitmap bitmap) { Matrix matrix = new Matrix(); matrix.postScale(1.5f,1.5f) ...
- Nginx反向代理设置 从80端口转向其他端口
[root@localhost bin]# netstat -lnutp Active Internet connections (only servers) Proto Recv-Q Send-Q ...
- 数据结构和算法 – 8.链表
8.1.数组存在的问题 在处理列表的时候数组是常用的数据结构.数组可以对所存储的数据项提供快速地存取访问,而且它很易于进行循环遍历操作.当然,数组已经是语言的一部分了,用户不需要使用额外的内存,也不需 ...
- 23.备忘录模式(Memento Pattern)
using System; using System.Collections.Generic; namespace ConsoleApplication6 { /// <summary> ...
- PHP定时器实现每隔几秒运行一次
php是服务器端脚本了并不像js那样有专业的settimeout函数来定时执行了,但只要浏览器不关闭各阶层是可以做到了,下面一起来看看. 下面写个简单例子来讲解这个方法. <?php ignor ...