阅读更多

40顶
1踩

Web前端

翻译新闻 27 款经典的CSS 框架

2011-02-18 14:58 by 正式编辑 chuiyan 评论(7) 有36929人浏览
利用 CSS 框架,可以简化你的工作,提高工作效率。CSS 框架是一系列 CSS 文件的集合体,包含了基本的元素重置,页面排版、网格布局、表单样式、通用规则等代码块。下面给你推荐了27款优秀的CSS框架,你可以选用。

1. 960gs

960 像素的页面宽度似乎成为了一种设计标准,在当前各种分辨率下,能够很好地展现网页内容。提供较为常用的尺寸来简化网页设计过程,使工作简单高效。


2. YUI 2: Grids CSS

芒果曾经介绍过由雅虎开发小组推出的 YUI,而这个 YUI Grids CSS 正是其中的一部分。作为最著名的 CSS 框架之一,YUI Grids CSS 提供了四种预设页面宽度,六种预设模板。其中的负 Margin 技术,使用度量单位 em,清除布局浮动等技术非常值得学习和借鉴。

3. Blueprint

Blueprint 是一款成熟的 CSS 框架,它将布局 (layout)、排版 (typography)、组件 (widget)、重置 (reset)、打印 (print) 等分放到不同的 CSS 文件中。在网页设计时就减少了引入的代码,提高了页面加载效率。

4. BlueTrip

BlueTrip 是一个集成了BluePrint & Tripoli 框架的做好的部分;Hartija 的打印样式; 960.gs的简洁;Elements 图标的一个css框架。为你提供一个好用的样式集合和一个制作网站的通用的方法。这样你就可以集中精力搞设计了。

5. Elastic CSS

Elastic 是一个简单的 CSS 框架用来对网页进行布局。Elastic 可实现各种各样常见的网页布局。

6. Easy

市面上流行的JQUERY组件功能都被纳入其框架中,你只要直接使用这个框架,不用学习复杂的AJAX JQuery语法,非常方便。

7. EZ-CSS

EZ-CSS是一个轻量级,浏览器友好,易于使用的CSS框架。用于创建CSS+Div的页面复杂布局(layouts)。

8. Tripoli

Tripoli是一个用于HTML表现的通用css规范。通过重设和重建浏览器标准,Tripoli 为你的网站项目提供了一个标准的、跨浏览器表现的基础。

9. CleverCSS

CleverCSS 是一个用于css的受Python启发的小型的标记语言,它可用于以整洁的和结构化的方式创建一个样式表。在很多方面它都比CSS2整洁和强大。与CSS最明显的区别是句法:它基于缩进而且不单调。虽然这显然违反了Python的规则,它依然是组织样式的很好的主意。

10. SenCSS

它为你CSS重复的部分提供了合理的样式,这样你就能更加关注于自己网站的样式。SenCSs不像其他CSS框架那样,它不包含各种杂乱的布局样式或是预定义的栅格系统,那SenCSs能刚什么呢?baseline, fonts, paddings, margins, tables, lists, headers, blockquotes, forms 等等都是SenCSs所能办到的。

11. Emastic

Emastic 是一个CSS框架,它有连续的任务:探索陌生的新世界,寻找新生活和新的网站空间,大胆的去CSS框架尚未到达的领域。它是轻量的、在页面宽度上比较人性化,在网格中使用固定和不固定的列宽。 Elastic 用“em”布局。

12. Typogridphy

Typogridphy是一个适合网格布局的CSS框架,用来帮助网页设计师和前端开发者能够快速编码实现漂亮的网格布局。它可以让你快速创建出各种各样的网格布局,并且非常轻松和简单。这个框架的CSS充分符合语义验度,严格的Xhtml等标准 。


13. Less Framework 3

它是一个以less.js为基础的CSS框架,它充分利用它的混入,变量和筑巢等高级功能。

14. Elements

是一个非常轻量级的css框架,从它的代码组织结构来看作者显然是希望真个project能够全部部署在它这个css的framework中。

15. Boilerplate

它是一个HTML/CSS/JS的预设模版,它可以帮助你建设一个支持HTML5-CSS3,跨浏览器的网站。

16. Malo

一个超小的、灵活的、易用的、宽度可以变化的个性化页面。

17. The 1kb CSS Grid

如果你仅仅需要一个轻量级的 CSS 网格系统,来构建你网站的主框架,那么你可以尝试下 1Kb CSS Grid。1KB CSS Grid 网站上提供了一个生成器用来定制 CSS 网格,并且可以直接下载定制好的 CSS 网格。


18. Fluid Grid System

一个网站的导航菜单文字不能提供足够的信息,来表达当前菜单按钮的内容,一般的解决办法是使用提示信息ToolTip,那么流动导航菜单也可以解决此问题,同时也为网站设计的添加了一些时尚而又动感元素。

19. Content with Style

Content with Style下一个逻辑步骤就是将这个扩展为CSS框架,允许使用写好并通过测试的组件来快速开发网站。实际上所需的是搞定一套命名习惯和一个灵活的基本模板。

20. WYMstyle

WYMstyle是一组CSS文件,你可以很容易的组合这些文件来快速的创建你的网站的布局。通过提供可靠的、经过良好测试的CSS模块,WYMstyle 力求让每个网站防止枯燥的跨浏览器兼容性测试。

21. The Golden Grid

是vladocar开发的一款比较新的CSS框架,可以为现代网站设计提供一个全新的布局参考。它非常小巧,所以很容易学习上手。其中的某些处理布局的方法是很值得借鉴的。如果你了解960网格系统,那么这个框架,你会更加容易使用。

22. Yet Another Multicolumn Layout (YAML)

YAML是一个 (X)HTML/CSS 框架,它为了满足弹性的和用户友好的布局而开发的。YAML自2007年出现以来就提供了广而全的文档。像许多其他的CSS-Framework如Blueprint CSS 或 YUI Grids 一样,提供了一个预定义的 CSS-classes 系统,用来创建基于网格的布局。要创建一个布局,设计师需要创建网站 HTML 结构,然后为容器(html标签)书写CSS,剩下的就自理了。

23. Compass

Compass是一种样式的创作的框架,使你的样式表和标示容易建立和维护。写自己的样式用sass而非原来的是css,利用Sass中的Mixins和Compass结合,你可以应用样式框架如Blueprint来代替你自己的样式标记.Compass基于sass,可以利用css框架比如Blueprint,非常的便捷.


24. Schema Web Design Framework

Schema 是一个为了提供在重复的设计任务中必须的CSS和HTML标签而设计的表现层的网页框架设计。 与为每一个新的网站项目从零开始创建HTMl/CSS不同,Schema提供必要的基础来开始并立马让你的设计跑起来。

25. Sparkl

它是一个很成熟的系统,它小巧灵活、易学易用。

26. The jQuery UI CSS Framework

它是一套基于jquery构建具有皮肤更换功能的UI控件和鼠标交互组件。用于帮助开发人员构建具有良好用户体验的Web应用程序。提供了一个强大的CSS Framework,为用户定义使用jQuery widgets。其中的ThemeRoller更是让你随心所欲地操作设计不同风格的网页界面。

27. 52framework

它是一个Web开发框架,它能实现HTML5和CSS3。它是一个跨浏览器的框架,可以在所有主流的浏览器上运行,包括IE6。主要是采用一个HTML5 enabling JavaScript file文件来实现。

40
1
评论 共 7 条 请登录后发表评论
7 楼 lucifer88826 2011-02-22 15:06
最后个比较好
6 楼 lqixv 2011-02-21 10:23
喜欢 960
5 楼 lectery 2011-02-19 20:57
第一次看到CSS框架,准备在将来的项目中试一下~
4 楼 neverforget 2011-02-19 13:53
CSS无框架 如果你真需要 看看国内大的门户的就OK了

主要是规范 很重要的是命名规范
3 楼 redvoilin 2011-02-19 12:48
哪种最好用?
2 楼 jitabc 2011-02-19 08:30
Blueprint 首选
1 楼 liusu 2011-02-18 21:48
原来是CSS框架,我还没用过呢。 960好像不错。。。

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • java 写入cookie_Java设置domain后,写入cookie失败问题

    Java后台写入cookie时,浏览器cookie视图显示为空,仔细查看后台设置参数都是正确的,于是猜测可能是跨域的问题,尝试在请求中加入跨域参数,写入成功。首先解释两个字段:1、xhrFieldsObject类型1.5.1 新增一个具有...

  • java中的Cookie类

    Cookie名称和值可以由服务器端开发自己定义,对于JSP而言也可以直接写入JSESSIONID用于标记一个会话(session),这样服务器可以知道该用户是否合法用户以及是否需要重新登录等,服务器可以设置或读取Cookies中包含...

  • java setmaxage_Cookie 中setPath()、setDomain()方法和maxAge属性小结(转载)

    一、javax.servlet.http.Cookie有两个比较重要的方法:setDomain()、setPath()正常的cookie只能在一个应用中共享,即一个cookie只能由创建它的应用获得。1.可在同一应用服务器内共享方法:设置cookie.setPath("/");...

  • java cookie中文乱码_java中cookie存取中文乱码

    项目中需要把用户名放入cookie中共享,其中创建cookie代码实现如下:String userName="李文强";Cookie cookie = new Cookie("userName", userName);cookie.setPath("/");...cookie.setDomain(domain);cooki...

  • java设置cookie域名通配_使用cookie设置二级域名登录状态互通

    ​ 登录状态的实现是java生成一个token而后前端在发送请求时将token带入请求头去请求数据,若是token失效则没法返回。javascript在前端这里,咱们须要用本地存储将token暂时存起来,发送请求的时候再读取。对于vue...

  • java设置cookie_java之Cookie详解

    Cookie是由服务器端生成,发送给User-Agent(一般是浏览器),浏览器会将Cookie的key/value保存到某个目录下的文本文件内,下次请求同一网站时就发送该Cookie给服务器(前提是浏览器设置为启用cookie)。Cookie名称和值...

  • java cookie类_Java中Cookie常用操作类(Spring中操作Cookie)

    说明:Cookie下用Key取值没有快速的方法,...在获取Cookie时要看下是否设置了域名:setDomain,不然本地调试时获取不到。Cookie 的限制:大多数浏览器支持最大为4096字节(4KB)的 Cookie。由于这限制了Cookie的大小...

  • java 设置请求 cookie

    } } } } } 核心功能: 1、添加cookie 设置域,即cookie值 2、删除cookie 遍历前端请求携带的cookie组, 删除特定的cookie值 通过设置cookie的 httpOnly 那么通过js脚本将无法读取到cookie信息,这样能有效的防止XSS...

  • java cookie 无法删除不了_java中无法删除cookie之解决

    笔者最近有一个项目需要在退出时删除相关cookie,利用手头现有的方法...先贴一下有问题的代码://设置保存一个cookiepublicstaticvoidsetCookie(HttpServletResponseresponse,Stringkey,Stringvalue,intage){Cookie...

  • java cookie类_Java Cookie类

    该楼层疑似违规已被系统折叠隐藏此楼查看此楼Java Cookie类定义public classCookie implements Cloneable这个类描述了一个cookie,有关cookie的定义可以参照Netscape Communications Corporation的说明,也可以参照...

  • java中cookie_老生常谈java中cookie的使用

    1 什么是cookie浏览器与WEB服务器之间是使用HTTP协议进行通信的,当某个用户发出页面请求时,...为了弥补这个缺陷,Netscape开发出了cookie这个有效的工具来保存某个用户的识别信息,因此人们昵称为“小甜饼”。co...

  • 如何在 Java Web 应用程序中使用 Cookie

    在本教程中,您将学习如何在 Java Web 应用程序中创建、更新、读取和删除 cookie。 cookie 是存储在 Web 浏览器中并通过 HTTP 标头在请求和响应之间传输的少量数据。cookie 具有名称和值,以及选项属性,如评论、...

  • 使用Cookie时导致的问题之基础拓展--setDomain、setPath和localhost与127.0.0.1的区别和cookie与session的区别

    使用Cookie时导致的问题之基础拓展--setDomain、setPath和localhost与127.0.0.1的区别

  • ie不支持java cookies_cookies – 从Java设置持久性cookie在IE中不起作用

    我试图设置一个带有过期时间的javax.servlet.http.Cookie(以便它在浏览器会话中保持不变).码:public void respond(HttpServletRequest req, HttpServletResponse resp) {int expiration = 3600;Cookie cooki...

  • java基础——Cookie 和Session

    文章目录1、Cookie1.1、Cookie机制1.2、Java提供的操作Cookie的API1、cookie读取和设置2、 Cookie的不可跨域名性3、Unicode编码:保存中文4、Cookie的有效期 web中什么是会话: 用户开一个浏览器,点击多个超链接,...

  • Java中Cookie的简单使用

    向请求中添加cookie: //创建cookie对象,赋值key-value Cookie userCookie = new Cookie("username","zhangsan"); //设置cookie有效期(单位秒),如果不设置默认为关闭浏览器时删除该...

  • JAVA设置Cookie

    //设置cookie Cookie cookie = new Cookie(getLoginKeyName(), loginKey); Cookie cookie1 = new Cookie("password",password); response.addCookie(cookie); response.addCookie(cookie1); //解析coolie ...

  • MATLAB-四连杆机构的仿真+项目源码+文档说明

    <项目介绍> - 四连杆机构的仿真 --m3_1.m: 位置问题求解 --m2_1.m: 速度问题求解 --FourLinkSim.slx: Simlink基于加速度方程的仿真 --FourLinkSim2.slx: Simscape简化模型仿真 --FourLinkSim3.slx: Simscape CAD模型仿真 - 不懂运行,下载完可以私聊问,可远程教学 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。 --------

  • ridge_regression:用于岭回归的python代码(已实现以预测下个月的CO2浓度)

    ridge_regression 用于岭回归的python代码(已实现以预测下个月的CO2浓度) 资料可用性 文件 Ridge.py :标准函数和Ridge回归函数window_make.py :使用滑动窗口方法制作大小为p(窗口大小)的时间序列列表。 Final_version.ipynb :使用Co2数据对代码进行实验

  • Polygon3-3.0.8-cp35-cp35m-win_amd64.whl.rar

    python whl离线安装包 pip安装失败可以尝试使用whl离线安装包安装 第一步 下载whl文件,注意需要与python版本配套 python版本号、32位64位、arm或amd64均有区别 第二步 使用pip install XXXXX.whl 命令安装,如果whl路径不在cmd窗口当前目录下,需要带上路径 WHL文件是以Wheel格式保存的Python安装包, Wheel是Python发行版的标准内置包格式。 在本质上是一个压缩包,WHL文件中包含了Python安装的py文件和元数据,以及经过编译的pyd文件, 这样就使得它可以在不具备编译环境的条件下,安装适合自己python版本的库文件。 如果要查看WHL文件的内容,可以把.whl后缀名改成.zip,使用解压软件(如WinRAR、WinZIP)解压打开即可查看。 为什么会用到whl文件来安装python库文件呢? 在python的使用过程中,我们免不了要经常通过pip来安装自己所需要的包, 大部分的包基本都能正常安装,但是总会遇到有那么一些包因为各种各样的问题导致安装不了的。 这时我们就可以通过尝试去Python安装包大全中(whl包下载)下载whl包来安装解决问题。

Global site tag (gtag.js) - Google Analytics