DiQuick Web 前端框架 V1.1 发布正式发布,知识兔小编带来了DiQuick Web 前端框架 V1.1版本,DiQuick适合开发轻量化、语义化、扩展性强的Web前端项目,需要的朋友可以来下载!
DiQuick Web 前端框架特色
语义化
标准语义化能够提升文档的易用性,使工作人员快速理解HTML文档,并且可以有效的帮助SEO优化
响应式
响应式设计可以做到根据不同设备环境自动响应及调整,使PC、平板、手机终端都能获得良好的阅读体验
预定义
预定义可以快速部署组件及CSS样式行为,在HTML文档中减少对子元素的设定,更有效的简化了文档
DiQuick Web 前端框架安装方法
安装框架css及js文件
引用框架样式
引用jQuey库及框架js(请确保jQuery库在所有js组件之前引用,建议将所有js在底部引用与编写,以确保页面的加载速度)
引用fancyBox弹窗组件
DiQuick Web 前端框架1.1版本使用说明
效果与兼容性
框架中的组件多数采用了CSS3来实现border-radius圆角、box-shadow阴影、transition过渡等效果,这意味着IE8及更老旧的浏览器将不能支持这些特性,CSS3让Web元素的效果制作变的更便捷,减少了图片的需求且加快了读取速率,框架文件并不会对这些效果做兼容处理。
内容的展现
在框架中,我们推崇CSS组件与展现的分离,展现由块布局、偏移、隐藏等系统来实现,元素及组件的布局将依赖于它们,只有在考虑部分组件能够通过预定义样式减少对子元素的设定时,我们才会为组件自身添加排列或布局的样式。
盒模型
我们对整个框架设定了box-sizing:border-box边框盒模型,它的好处是可以简易设定元素尺寸,为元素指定的任何padding内边距和border边框的值都将在已设定的宽度和高度内进行绘制,不会导致元素总尺寸发生变化,在部分元素需要使用margin外边距来设定时,采用calc()函数来进行了相应数值的剔除。
类名与选择器
在样式命名中,遵循了语义化的结构,也尽量缩减了类名的标识,采用了递进选取元素的方式,例如设定tab选项卡组件,我们对组件导航选用了class="nav"而不是class="tab-nav",因为在样式表中已限定了只有tab组件才能使用它,部分非装取大量内容的组件中甚至不需要你设置子元素类名,因为在css及js文件中都使用了特定选择器来控制元素,并且保证了其他元素插入时不会受到影响。
下载体验
知识兔分享,仅供下载体验和测试学习。