版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
团队高效简洁的2023/4/20第1页,共23页,2023年,2月20日,星期五现状Alice的解决方式Alice介绍内容:1232第2页,共23页,2023年,2月20日,星期五现状——混乱的命名myorder和我的信息?3第3页,共23页,2023年,2月20日,星期五现状——低效的写法重复的样式定义,低效!4第4页,共23页,2023年,2月20日,星期五现状——糟糕的维护相关联的样式被隔开5第5页,共23页,2023年,2月20日,星期五Alice6第6页,共23页,2023年,2月20日,星期五解决命名混乱——表意的命名Alice命名要求表意,模块的命名表示它具体的功能含义ui-button:按钮
ui-tab:标签页
ui-paging:分页
7第7页,共23页,2023年,2月20日,星期五解决书写低效——合并相同属性样式Alice要求合并相同的样式,当各个样式有单独的属性时,再分离出另写。把两个样式的公用部分定义成basebtn,然后针对它们不同的样式再单独设置8第8页,共23页,2023年,2月20日,星期五提升维护性——聚拢的样式块Alice要求相关的样式书写时应该聚拢在一起,避免不相关的样式混杂在一起。把所有相关的button样式代码都写在一块,达到聚拢的样式效果,从而提升代码的维护性。9第9页,共23页,2023年,2月20日,星期五提升维护性——采用继承通过类似Java继承的方式对模块的样式进行扩展通过ui-button-lorange来完成样式的继承扩展10第10页,共23页,2023年,2月20日,星期五Alice介绍11第11页,共23页,2023年,2月20日,星期五
Alice简介Alice是支付宝样式解决方案,是一套模块化的样式命名和组织规范。Alice的样式组织分为两个层级:基础框架(base.css+iconfont+栅格+animate.css+常用样式类)通用模块(alice.css)12第12页,共23页,2023年,2月20日,星期五由于不同浏览器缺省的样式各不相同,导致相同的页面设计和实现在不同的浏览器上展现不同——这是最常见的兼容性问题。而base.css的目的就是解决该问题。
Alice基础框架——base.css13第13页,共23页,2023年,2月20日,星期五
Alice基础框架——iconfont直接引用icon把icon拼接到一张图上,使用sprite技术使用iconfont技术大部分网站的做法是采用雪碧图(CSSSprites),把这些图标放在一张单独的图中,结合使用CSS的background和background-position属性渲染图标。最传统的方式iconfont提供了一种通过把icon图标打包成矢量化字体的方式对图标进行管理。第14页,共23页,2023年,2月20日,星期五优点:轻薄:使用icon图片的大小是字体的4-10倍。百搭:矢量化,在不同的分辨率屏幕上适配缩放不失真!
Alice基础框架——iconfont的优点怎么使用?data-iconfont-family第15页,共23页,2023年,2月20日,星期五栅格化开发为我们提供了标准化的协作开发流程,设计师按照Grid栅格设计,开发人员采用Grid栅格方式高度还原设计;栅格化隐藏了复杂的BOXModal细节,为开发者提供了更加高效容易的布局方式,即使不懂CSS,也能写出栅格布局。
Alice基础框架——Grid栅格第16页,共23页,2023年,2月20日,星期五通过CSS3的高级属性实现动画交互,没有使用JavaScript。和CSS3特性相关的样式被单独剥离为animate.css,解决了浏览器的兼容问题。
Alice基础框架——动态样式第17页,共23页,2023年,2月20日,星期五常用功能类以fn为前缀,为了在页面中更加容易的重复使用,命名采用了以面向属性的命名方式比如:fn-clear,fn-hide等
Alice基础框架——常用功能类第18页,共23页,2023年,2月20日,星期五Alice提供了符合样式规范的常用组件样式库,通过样式库可以有效的规范代码的质量;Alice的通用样式库包括:ui-buttonui-navui-tipboxui-step...
Alice通用模块——主样式表第19页,共23页,2023年,2月20日,星期五
Alice通用模块——模块的组合Head:ui-grid-25Content:ui-grid-8,ui-grid-8,ui-grid-9Head:ui-navContent:ui-boxui-form,ui-list,ui-button第20页,共23页,2023年,2月20日,星期五
Alice的使用1,引入Alice样式文件2,使用Alice提供的HTML代码第21页,共23页,2023年,2月20日,星期五只需引入一个alice.css样式,你就能编写漂亮页面。重置样式表让所有浏览器都听话。iconfont字体代替图片,节省流量、矢量化。grid栅格让布局更为简单容易。animate.css让你随心使用css3炫酷效果。以常用功能类为辅助让代码更加简洁。基于模块化让代
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 地质勘探中的安全生产考核试卷
- 粮油产品品牌形象与年轻化策略考核试卷
- 零售企业客户数据分析与应用考核试卷
- 静脉治疗技术与护理要点考核试卷
- 家电行业绿色供应链管理考核试卷
- 电池制造过程中的性能优化与调试考核试卷
- 麻纤维纱线在体育用品中的应用考核试卷
- 蔬菜种植农业生产性服务业发展考核试卷
- 体育用品行业政策变动与市场应对考核试卷
- 石材加工中的抗菌技术应用考核试卷
- (必会)装饰装修质量员专业基础知识近年考试真题题库(含答案解析)
- (正式版)JTT 1482-2023 道路运输安全监督检查规范
- 人工智能算力中心平台建设及运营项目可行性研究报告
- FFR在冠脉狭窄治疗中的应用
- 中餐烹饪实训室安全隐患排查
- 糖尿病患者居家护理相关知识考核试题及答案
- 2024年高速公路建设行业现状及发展趋势研究
- 一汽-大众供应商管理流程介绍.sbx
- 2024年干眼诊疗规范理论考核试题及答案
- 2024春期国开电大专科《政治学原理》在线形考(形考任务一至四)试题及答案
- 开展活动保障方案
评论
0/150
提交评论