5个流行的CSS框架入门教程+工具

近来大受欢迎的CSS框架，使开发人员能够快速精准的设计出div+css布局。CSS框架的想法是做所有你做一遍又一遍地在每个站点上再次重复任务繁重，让您得到更快的结果，并得到设计师们的有趣的东西。

良好的CSS框架的主要特点是：

1、迅速加快我们的开发时间，2、文件体积非常小，3、有良好的文档和教程，4、具有清洁的结构网络。

你基本的了解CSS框架的特定了，你将要明白为什么和如何使用css 框架来快速布局你的网页。

在今天的文章中，我们将提供5个最流行​​的CSS框架给你参考，并展示精心挑选的教程使用在其他每个有用的工具和资源，你一定会找到有用的和节省时间的一个css框架。

1、960 CSS框架

960网格系统是通过提供常用的尺寸，宽度960像素的基础上，为了简化Web开发工作流程。有两个变种：12和16列 (现在已经有了32列，不过实践中比较少用。)，它可以单独或串联使用。960.css文件本身是只有3.6 KB的css文件压缩。

css框架演示

• 想详细的了解960 CSS框架吗？

  
  
  “ Jeffrey Way ”对960 CSS框架的密切关注，总结了一些使用它的优点和缺点。他还需要我们一步一步创建一个简单的“12列”用一个简单的头两列结构布局。最重要的秘诀是：你必须分配到每个div一个类。命名约定要求，这个类名称开头“grid_”的结束所需的列数。

• 960 CSS框架 – 了解基础知识

  在这篇文章中，你会了解到960 css框架的基本用法。你要知道，好东西大多数是外国进口的，要翻译成中文不容易啊！

• 960流体网格系统

  

  用960 css框架和js框架建成的一个类似新闻系统的布局，效果很漂亮，给各位朋友一个很好的学习和参考机会！

2、BluePrint css框架

Blueprint是一个CSS框架，其目的是减少你的CSS开发时间。它为您提供了坚实的CSS基础之上建立你的项目，一个易于使用的网格，合理的排版，好看的形式，甚至是印刷样式。其主要特点之一是执行浏览器默认样式的复位质量，提​​供一种方法来使用定制的布局网格和最重要的是，所有的元素是能够覆盖。

blueprint Css框架演示

教程讲解如何使用blueprint CSS框架和工具使用

blueprint CSS框架详解

在本教程中，我们将得到一个外观和内部运作的蓝图，我们将看看在演示应用程序使用的蓝图，以获得更好的主意了如何使用该框架。

3、jQuery UI CSS框架

jQuery的用户界面包括一个强大的CSS框架，构建定制的jQuery部件的设计。该框架包括类，涵盖了多种常见的用户界面的需求，可以使用jQuery UI的ThemeRoller操纵。通过构建你 ​​的UI组件，使用jQuery UI CSS框架，你将采用共享标记公约允许为便于代码集成在大跨插件社区。

• 造型按钮和工具栏与jQuery UI

  

  jQuery UI CSS框架的jQuery UI小部件可以很容易地应用到任何插件，为开发类的系统，甚至是静态内容主题化按钮和使用工具栏的一个真实世界的例子。下面是按钮的例子演示了如何将CSS框架类的自定义部件的电源。

4、YAML CSS框架

YAML（ Yet Another Multicolumn Layout ）侧重于灵活的布局，并提供灵活，有弹性或固定布局的列和网格的设计元素。

YAML的带有AA级别的Ajax的在线布局工具 (界面是英文版的，懒人式网页布局)，方便的工具，它允许你通过拖放-N式布局的容器视觉一起为基于YAML CSS布局可视化开发。有效的HTML和CSS代码自动产生飞。

YAML Css框架演示

5、雅虎YUI网格CSS的

基础的YUI网格CSS提供四个预设的页面宽度，6个预设模板。4KB的文件提供了1000多个页面布局组合。功能包括：自我清算页脚，定制宽度为固定宽度的布局，支持流体宽度（100％）的布局和更多的。

YUI的网格生成器 -网格定制的一个简单的界面。

YUI Css框架演示