淘小兔

DiQuick Web 前端框架 V1.1 发布正式发布,知识兔小编带来了DiQuick Web 前端框架 V1.1版本,DiQuick适合开发轻量化、语义化、扩展性强的Web前端项目,需要的朋友可以来下载!

DiQuick Web 前端框架特色

知识兔

语义化

标准语义化能够提升文档的易用性,使工作人员快速理解HTML文档,并且可以有效的帮助SEO优化

响应式

响应式设计可以做到根据不同设备环境自动响应及调整,使PC、平板、手机终端都能获得良好的阅读体验

预定义

预定义可以快速部署组件及CSS样式行为,在HTML文档中减少对子元素的设定,更有效的简化了文档

DiQuick Web 前端框架安装方法

知识兔

安装框架css及js文件

引用框架样式

202202221442256747470000

引用jQuey库及框架js(请确保jQuery库在所有js组件之前引用,建议将所有js在底部引用与编写,以确保页面的加载速度)

202202221442268448330001

引用fancyBox弹窗组件

202202221442287466960002

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文件中都使用了特定选择器来控制元素,并且保证了其他元素插入时不会受到影响。

下载体验

知识兔分享,仅供下载体验和测试学习。

请输入密码查看内容!

如何获取密码?

点击下载