AppCan初级认证工程师之页面布局及控件3课时.ppt

AppCan初级认证工程师之 [UI布局及控件] 培训部 目录 UI布局 UI控件 综合案例 * UI布局 弹性盒子模型 弹性盒子模型是CSS3推出的一种布局机制。这种机制与常见的流式布局有很大区别。简单的理解为，流式布局是通过内容决定父容器大小，而弹性盒子模型是在指定大小的父容器里来为子元素分配空间。 使用弹性盒子对页面进行布局，ui-box.css中就定义了弹性盒子的一些css3样式，弹性盒子模型是在指定大小的父容器里来为子元素分配空间，使用box架构可以更容易更方便的适配不同分别率不同屏幕尺寸的手机。 UI布局 简单的流式布局例子 div style=display:inline;border:1px solid blue div style=display:inline;background:#66ccff aaaa/div div style=display:inline;background:#ffffffbbbb/div /div * UI布局 弹性盒子模型布局——例子1 div style=display:-webkit-box;width:600px;border:1px solid blue div style=-webkit-box-flex:1;background:#66ccffaaaa/div div style=background:#ffffffbbbb/div /div * UI布局 弹性盒子模型布局——例子2 div style=display:-webkit-box;width:600px;border:1px solid blue div style=-webkit-box-flex:1;background:#66ccff aaaa/div div style=-webkit-box-flex:2;background:#ffffffbbbb/div div style=background:#66ccff cccc/div /div * UI布局 弹性盒子模型布局——例子3 div style=display:-webkit-box;width:200px;border:1px solid blue div style=-webkit-box-flex:1;background:#66ccff;position:relative div style=position:absolute;width:100%;height:100%;aaaa/div /div div style=-webkit-box-flex:2;background:#ffffff;position:relative div style=position:absolute;width:100%;height:100%;bbbb/div /div div style=background:#66ccffcccc/div /div * UI布局 弹性盒子模型布局——例子4 div style=display:-webkit-box;height:400px;border:1px solid blue;-webkit-box-orient:vertical; div style=-webkit-box-flex:1;background:#66ccff;position:relative div style=position:absolute;width:100%;height:100%;aaaa/div /div div style=-webkit-box-flex:2;background:#ffffff;position:relative div style=position:absolute;width:100%;height:100%;bbbb/div /div div style=background:#66ccffcccc/div /div * UI布局 类名 属性 ub 元素采用弹性BOX布局 ub-rev 子元素反序排列 ub-con 在子元素中加入一个容器，用于避免内容引起子元素大小变化 ub-ac、ub-ae 子元素垂直居中对齐和尾对齐 ub-pc、ub-pe、ub-pj 子元素水平居中对齐、尾对齐和两端对齐 ub-ver 子元素纵向排列 ub-f1 ub-f2 ub-f