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

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

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

安装框架css及js文件

快速获得一个完整的文档

  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">
  9.     <meta name="description" content="description"> 
  10. </head>
  12. <body>
  13.     <div class="wrapper">
  15.             <h1>Hello! DiQuick</h1>
  16.         </div>
  17.     </div>
  18.     <script src="./diquick/diquick.js"></script>
  19. </body>
效果与兼容性
内容的展现

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

盒模型

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

类名与选择器