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. 现在我 ...
随机推荐
- [Linux]安装phpredis扩展
1.下载phpredis,解压并进入目录,在目录下运行phpize /usr/local/php/bin/phpize ./configure --enable-redis-igbinary --wi ...
- C# Winform中如何获取文件名与文件路径
获取文件名方法: 用System.IO.Path.GetFileName和System.IO.Path.GetFileNameWithoutExtension(无扩展名)的方法 获取文件路径方法: / ...
- nyoj366_D的小L_字典序_全排列
D的小L 时间限制:4000 ms | 内存限制:65535 KB 难度:2 描述 一天TC的匡匡找ACM的小L玩三国杀,但是这会小L忙着哩,不想和匡匡玩但又怕匡匡生气,这时小L给 ...
- (转)JAVA AJAX教程第四章—AJAX和MVC的简单结合
这里我们再理解了AJAX后,开始来用实例感受AJAX的力量. 今天我最后要实现的效果,当鼠标放到图片上时会根据,会把数据库库里的数据读出,通过显示框显示出来.这个在很多网上商店都有用到这里效果,我们这 ...
- eclipse远程调试Tomcat方法[转]
转载自:http://blog.csdn.net/afgasdg/article/details/9236877 1.Linux中配置tomcat在catalina.sh中添加如下CATALINA_O ...
- 解析客户端IP
<html><head><title>新浪IP解析接口的使用</title><metahttp-equiv=Content-Typecontent ...
- 【leetcode】Isomorphic Strings（easy)
Given two strings s and t, determine if they are isomorphic. Two strings are isomorphic if the chara ...
- java课后作业5
[问题]随机生成10个数,填充一个数组,然后用消息框显示数组内容,接着计算数组元素的和,将结果也显示在消息框中. 设计思路: 1.申请一个长度为10的数组 2.计算机随机生成10个数,并赋给数组 3. ...
- vs c# int & int32
在vs c#中,int就等价于int32, 所以通常也是使用int32 当在统计总数时,最好使用int32,int16数值范围太小,如果超出,就会变成随机数.
- "稀奇古怪的"delete this
myClass::foo(){ delete this; } .. void func(){ myClass *a = new myClass(); a->foo(); ...