下载Download

Download V1.3.6

下载解压后即获得以下框架中的文件

最近更新日期：2019-05-02

  • diquick
    • diquick.css66kb
    • diquick.js20kb
    • src
      • flaticon.eot71kb
      • flaticon.svg337kb
      • flaticon.ttf71kb

源码同时托管在gitee平台

安装Install

安装框架css及js文件

  1. <link rel="stylesheet" href="./diquick/diquick.css">
  2. <script src="./diquick/diquick.js"></script>

文档Document

快速获得一个完整的文档

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <title>Title</title>
  6.     <meta charset="utf-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  8.     <meta name="keywords" content="keywords">
  9.     <meta name="description" content="description"> 
  10.     <link rel="stylesheet" href="./diquick/diquick.css">
  11. </head>
  13. <body>
  14.     <div class="wrapper">
  15.         <div class="shell">
  16.             <h1>Hello! DiQuick</h1>
  17.         </div>
  18.     </div>
  19.     <script src="./diquick/diquick.js"></script>
  20. </body>
  22. </html>

概述Introduction

效果与兼容性

框架中的组件多数采用了CSS3来实现border-radius圆角、box-shadow阴影、transition过渡等效果，这意味着IE8及更老旧的浏览器将不能支持这些特性，CSS3让Web元素的效果制作变的更便捷，减少了图片的需求且加快了读取速率，框架文件并不会对这些效果作兼容处理。

内容的展现

在框架中，我们推崇组件与展现之间分离，展现由块布局、偏移、隐藏等系统来实现，元素及组件的布局将依赖于它们，只有在考虑部分组件能够通过预定义样式减少对子元素的设定时，我们才会为组件自身添加排列或布局的样式。

盒模型

我们对整个框架设定了box-sizing:border-box边框盒模型，它的好处是可以简易设定元素尺寸，为元素指定的任何padding内边距和border边框的值都将在已设定的宽度和高度内进行绘制，不会导致元素总尺寸发生变化，在部分元素需要使用margin外边距来设定时，采用calc()函数来进行了相应数值的剔除。

类名与选择器

在样式命名中，遵循了语义化的结构，也尽量缩减了类名的标识，采用了递进选取元素的方式，例如设定tab选项卡组件，我们对组件导航选用了class="nav"而不是class="tab-nav"，因为在样式表中已限定了只有tab组件才能使用它，部分非装取大量内容的组件中甚至不需要你设置子元素类名，因为在css及js文件中都使用了特定选择器来控制元素，并且保证了其他元素插入时不会受到影响。