下载Download

下载解压后即获得以下内容中的文件最近更新日期:2017-10-11

  • css
    • diquick.comb.css77kb
    • diquick.css64kb
    • diquick.min.css59kb
  • icon
    • flaticon.eot71kb
    • flaticon.svg337kb
    • flaticon.ttf71kb
    • flaticon.woff43kb
  • img
    • arrow.png2kb
  • js
    • diquick.js4kb
    • jquery.js85kb
    • fancybox

源码同时托管在OSchina平台

安装Install

安装框架css及js文件

引用框架样式

<link rel="stylesheet" href="css/diquick.css">

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

<script src="js/jquery.js"></script>
<script src="js/diquick.js"></script>

引用fancyBox弹窗组件

<link rel="stylesheet" href="js/fancybox/fancybox.css">
<script src="js/fancybox/fancybox.js"></script>

文档Document

获取文档

html5文档类型,简体中文设定为lang="zh-CN"

<!DOCTYPE html>
<html lang="en">
    ...
</html>

<head>之中添加以下标签,告诉IE使用最新的引擎渲染网页

<meta http-equiv="X-UA-Compatible" content="IE=edge">

为了兼容更多的移动设备,在<head>之中添加以下标签,如果你希望开启用户缩放功能,可以将user-scalable=no删除。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

快速获得一个完整的文档

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<title>Title</title>
<meta name="keywords" content="Keywords">
<meta name="description" content="Description"> 

<link rel="stylesheet" href="css/diquick.css">
<link rel="stylesheet" href="js/fancybox/fancybox.css">

</head>

<body>

<!-- wrapper begin -->
<div class="wrapper">
    <h1>Hello!</h1>
</div>
<!-- wrapper end -->

<script src="js/jquery.js"></script>
<script src="js/diquick.js"></script>
<script src="js/fancybox/fancybox.js"></script>

</body>

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