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. 现在我 ...
随机推荐
- Unity3d《Shader篇》绘制圆角图片
Pass { CGPROGRAM // Upgrade NOTE: excluded shader from OpenGL ES 2.0 because it does not contain a s ...
- android volley http请求框架
2015年11月6日 14:35:19 注意: 1.安卓官方的volley在google的codesource上, 在github上有他的镜像android-volley, 并解决了官方的一部分bug ...
- 【leetcode】Isomorphic Strings（easy)
Given two strings s and t, determine if they are isomorphic. Two strings are isomorphic if the chara ...
- struts配置文件中如何从一个package的action跳到另一个package中的某个action
<package name="pack1" namespace="/test1" extends="struts-default"&g ...
- IOS - 本地消息推送
第一步:创建本地推送 // 创建一个本地推送 UILocalNotification *notification = [[[UILocalNotification alloc] init] autor ...
- UISrollView
1. contentOffset 默认CGPointZero,用来设置scrollView的滚动偏移量. // 设置scrollView的滚动偏移量 scrollView.contentOffset ...
- [Android Pro] proguard
-optimizationpasses 5 # 指定代码的压缩级别 -dontusemixedcaseclassnames # 是否使用大小写混合 -dontskipnonpubliclibraryc ...
- [Android Pro] Android 6.0 Root
reference : http://bbs.gfan.com/android-8001827-1-1.html 2. 刷机和刷入recovery 建议参考 置顶教程: [15年3月31日更新]Nex ...
- SQL语句删除重复数据
1.如表中没有主键,先添加自动增长主键 alter table 表名 add 列名 int identity (1,1) primary key 2.删除重复数据 delete from 表名 whe ...
- MVC下HtmlHelper自带BeginForm表单提交与异步Ajax请求
假如有一个数据表格UserInfo: public class UserInfo { public int Id { get; set; } public string Name { get; set ...