3-AppCan初级认证工程师之[页面布局及控件](3课时)PPT格式课件下载.ppt
- 文档编号:15446194
- 上传时间:2022-10-31
- 格式:PPT
- 页数:21
- 大小:1.48MB
3-AppCan初级认证工程师之[页面布局及控件](3课时)PPT格式课件下载.ppt
《3-AppCan初级认证工程师之[页面布局及控件](3课时)PPT格式课件下载.ppt》由会员分享,可在线阅读,更多相关《3-AppCan初级认证工程师之[页面布局及控件](3课时)PPT格式课件下载.ppt(21页珍藏版)》请在冰豆网上搜索。
AppCan初级认证工程师之UI布局及控件培训部目录UI布局UI控件综合案例UI布局弹性盒子模型弹性盒子模型是CSS3推出的一种布局机制。
@#@这种机制与常见的流式布局有很大区别。
@#@简单的理解为,流式布局是通过内容决定父容器大小,而弹性盒子模型是在指定大小的父容器里来为子元素分配空间。
@#@使用弹性盒子对页面进行布局,ui-box.css中就定义了弹性盒子的一些css3样式,弹性盒子模型是在指定大小的父容器里来为子元素分配空间,使用box架构可以更容易更方便的适配不同分别率不同屏幕尺寸的手机。
@#@3UI布局简单的流式布局例子aaaabbbbUI布局弹性盒子模型布局例子1aaaabbbb5UI布局弹性盒子模型布局例子2aaaabbbbcccc6UI布局弹性盒子模型布局例子3aaaabbbbcccc7UI布局弹性盒子模型布局例子4aaaabbbbcccc8UI布局类名属性ub元素采用弹性BOX布局ub-rev子元素反序排列ub-con在子元素中加入一个容器,用于避免内容引起子元素大小变化ub-ac、ub-ae子元素垂直居中对齐和尾对齐ub-pc、ub-pe、ub-pj子元素水平居中对齐、尾对齐和两端对齐ub-ver子元素纵向排列ub-f1ub-f2ub-f3ub-f4子元素占用区域份数ui-box.css9UI布局类名属性uc-auc-tuc-buc-luc-r圆角类别usus1外阴影类别us-i内阴影类别uts文字阴影uflufr浮动类别ulev0ulev1ulev-1字体大小类别ub-tub-lubauba1边框类别ui-base.css10案例一、用弹性盒子实现UI布局11案例二、用弹性盒子实现UI布局UI布局分辨率适配为了使手机应用能够根据访问设备的不同分辨率自动调整页面效果。
@#@AppCanUI框架设计原理是为不同的分辨率,选取人直观感受最舒适的字体大小作为参考量,再用相对长度单位em进行页面布局。
@#@如:
@#@页面中设置font-size:
@#@1em;@#@在320x480分辨率下显示字体大小为16px,在480x800分辨率下显示字体大小为24px。
@#@目前参照Andorid屏幕密度划分为低密度、普通密度、高密度、超高密度、超超高密度,分别定义字体为14px16px24px32px48px。
@#@栅格系统AppCan提供了一套响应式、移动设备优先的流式栅格系统,结合弹性盒子进行界面布局。
@#@栅格系统用于通过一系列的row(ub)与column(ub-f1等类)的组合来创建页面布局,将内容放入这些创建好的布局中。
@#@row(ub)就是弹性盒子,column(ub-f1等类)就是盒子中的子元素,盒子中的子元素可以是固定的宽、高,也可以是按比例分配每一列,这些子元素填充盒子空间。
@#@通过row(ub)添加ub-ver,把row变成了列,其中的子元素column(ub-f1等类)变成了行。
@#@UI布局14栅格系统案例栅格系统就是行与列的组合,或者说盒子套盒子,盒子与盒子的排列。
@#@UI布局15栅格系统案例最外层就是ub。
@#@列表就是多个ub串联按流式布局进行布局的。
@#@UI布局16栅格系统补充案例UI布局17UI控件-图片轮播(slider)案例三、图片轮播18UI控件-列表(listview)案例四、列表UI控件-选项卡(tab)案例五、实现选项卡综合案例:
@#@餐厅详情页面
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 页面布局及控件 AppCan 初级 认证 工程师 页面 布局 控件 课时