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. 现在我 ...
随机推荐
- ios 引入第三方库 运行时找不到函数实现
今天引入webtrends 这个库,结果一直运行时找不到函数,纳闷了一下午! 后来发现,是other flag没有设置对,对于那些包含category用来扩展ios原始类型的库,链接的时候需要特别的链 ...
- Qt 对话框显示控制按钮
在对话框窗体构造函数加入 SystemDialog::SystemDialog(QWidget *parent) : QDialog(parent), ui(new Ui::SystemDialog) ...
- 使用Servlet和jdbc创建用户登录验证
首先创建一个用户表,用来保存用户名 密码,并插入几条数据 mysql> desc user;+----------+-------------+------+-----+---------+-- ...
- 【编程题目】输入一个单向链表，输出该链表中倒数第 k 个结点
第 13 题(链表):题目:输入一个单向链表,输出该链表中倒数第 k 个结点.链表的倒数第 0 个结点为链表的尾指针.链表结点定义如下: struct ListNode {int m_nKey;Lis ...
- Crystal Report 遇到需要登录的问题
解决方式: The advices for crystal report database connection settings: 1, Using ApplyLogOnInfo method in ...
- nVivo highlight code中的文本
要highlight nvivo中的code一颗在如图highlight中下拉菜单选择,如coding for all nodes,所有的有归属code的文本都会被高亮.如果选择coding for ...
- 模拟赛1103d1
取模(mod) [题目描述] 有一个整数a和n个整数b_1, -, b_n.在这些数中选出若干个数并重新排列,得到c_1,-, c_r.我们想保证a mod c_1 mod c_2 mod - mod ...
- Linear regression with multiple variables(多特征的线型回归)算法实例_梯度下降解法(Gradient DesentMulti)以及正规方程解法(Normal Equation)
,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, , ...
- ShareSdk使用心得
1. 微信和朋友圈:分享的时候设置了链接和图片,但就是不显示: 需要指明ShareType为WEB_PAGE 2. 需要完整添加 ShareSdk 的所需要的权限,不然分享闪退,并且不报异常:网络请求 ...
- JavaScript基础——创建函数
JavaScript的最重要的一个部分是制作其他代码可以重用的代码.要做到这一点,你可以把代码组织成执行特定任务的函数.函数是结合在一个单一的块中,并给予一个名称的一系列代码语句.然后,你就可以通过引 ...