css框架完全收集版

二月 25th, 2009 | 没有评论 | 发布于 页面设计

对于小的Web开发项目来说,CSS 框架并不一定就适用,至少不见得能提高多少工作效率。但对于一个开发团队和规模比较大的项目来说,CSS 框架不仅能加快设计进程,更能解决网站改版中带来的诸多麻烦和问题。

对于CSS框架,本人也只是处于学习状态。

960网格系统

960网格系统是一个通过提供通常使用的尺寸简化网站开发流程的努力的结果,基于960像素的页面宽度。它有两种类型,12和16列,他们可以独立使用或是协同使用。

YUI Grids CSS

这应该是最著名的CSS框架吧,由Yahoo开发小组开发而成。YUI Grids CSS为开发者提供了预先设置的四种不同页面宽度,六种不同的模板。有国外作者曾指出YUI Grids CSS中最值得学习的网格布局CSS写法:

  • 负Margin技术
  • 使用度量单位em
  • 清除布局的浮动

其中负margin技术,我个人觉得WordPress主题sandbox 可谓运用的炉火纯青。我感觉YUI功能不错,就是太复杂了。

YAML CSS Framework

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

Elements CSS Frameworks

Elements是一款纯净的CSS框架,可以帮助设计师快速高效率的书写css文档。你可以将他理解成一套模板,里面包含了大多数站点中所需要的那些css类。他很小,只有四个文件而已。总共不到6KB。

WYMstyle: a CSS framework

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

Blueprint CSS

Blueprint 是一个 CSS 框架,它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目,BP由一个易用的网格、合理的布局和一个打印样式。

Boilerplate CSS Framework

作为BluePrint CSS的原作者之一,我决定把我的思想重新整理到一个赤裸裸的框架,它提供最基本的要素来开始任何项目。这个框架将是较小的而且力求不使用非语义的命名习惯。你就是设计者而且你的技术很重要。

Tripoli Beta CSS Framework

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

ESWAT Web Project Framework

ESWAT正在重新整理。如果你是冲着我的网站框架来的,那么你就可以在这里下载。也许你也想看看我的其他项目gmachina、AppleSeed。

CwS CSS Framework

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

Schema Web Design Framework

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

CleverCSS

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

Logicss Framework

Logic CSS 框架是用来减少开发符合web标准的xHTML布局的时间的一个由CSS文件和PHP程序组成的集合。通常跨浏览器表现行为(不是Meyer的reset 文件或是用“*”),排版支持文本字体大小调整(使用EMs) 和垂直居中,符合可定义的灵活的布局。

更多 »

不让表格或div层被撑开的方法

八月 20th, 2008 | 没有评论 | 发布于 页面设计

一、直接在网页里设置图片大小,比如代码:<img src=”http://www.xiamian.com/test.jpg” width=”500″ height=”500″ border=”0″>,这样虽然可以限制了图片大小,但是需要在上传图片之前手动修改图片大小,否则上传的图片就会变形。

二、使用如下代码:<img src=”http://www.xiamian.com/test.jpg” onload=”javascript:if(this.width>600}{this.resized=true;this.style.width=600;}”>

更多 »

使用CSS实现div水平居中的方法

八月 2nd, 2008 | 没有评论 | 发布于 页面设计

        在Web标准中的页面布局是使用Div配合CSS来实现的。这其中最常用到的就是使整个页面水平居中的效果,这是在页面布局中基本,也是最应该首先掌握的知识。不过,还是经常会有人问到这个问题,在这里我简单总结一下使用Div和CSS实现页面水平居中的方法:

一、margin:auto 0text-aligh:center
    在现代浏览器(如Internet Explorer 7、Firefox、Opera等)现代浏览器实现水平居中的方法很简单,只要设定到左右两侧的空白为自动即可。意即:

#wrap { margin:0 auto;}

更多 »

Tags: , , ,

多浏览器CSS兼容要点分析

八月 2nd, 2008 | 没有评论 | 发布于 页面设计

IE vs FF

CSS 兼容要点:

DOCTYPE 影响 CSS 处理

FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行

FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中

FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width

FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式

div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行

cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以

更多 »

Tags: , , ,

Yahoo提供的网站性能最佳体验的黄金守则,配合Y-Slow插件使用

七月 30th, 2008 | 没有评论 | 发布于 页面设计

        Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践。他们为此进行了一系列的实验、开发了各种工具、写了大量的文章和博客并在各种会议上参与探讨。最佳实践的核心就是旨在提高网站性能。
Excetional Performance团队总结出了一系列可以提高网站速度的方法。可以分为7大类34条。包括内容、服务器、cookie、CSS、JavaScript、图片、移动应用等七部分。

        其中内容部分一共十条建议:

更多 »

Tags: , , ,

网站注册表单设计样式的研究(一)

七月 26th, 2008 | 没有评论 | 发布于 用户体验设计 UED, 页面设计

转自折折熊的博客http://www.jojobox.cn

  如果你想最大化你的服务所带来的效益,你就必须最大化你网站表单的成功率。仅仅简单的让用户在你网站上注册是不够的,除非你有能够让访问你网站的人一看就映像深刻的点子。为了让服务达到最大化的体现,我们设计师需要提供用户一个良好的用户体验。我们需要邀请用户,为他们描述服务产品有多少好,给他们解释为什么他们需要填那些表单并且暗示他们会因此得到利益的回报。当然,我们也应该做的非常方便让用户来参与。

  但是设计有效的页面表单不是件容易的事情。有个不争的事实就是:没人喜欢填表单——无论是线上还是线下的。因此,作为设计师我们需要找出能够让表单百分百简单、直接甚至无痛苦的正确的设计决策。

  但是怎么样才能准确地找出这些决策?布局上那些链接应该放在表单的什么位置?我们应该怎么设计它?我们应该怎么样高亮标签,应该怎么样排列他们?页面表单设计样式怎么样才符合现代化的网站?我们拿这些问题问我们自己,并且通过实施调查来得到这些结果。

更多 »

Tags: , ,

如何选择一款合适的英文正文字体

七月 26th, 2008 | 2 个评论 | 发布于 页面设计

      今天,我打算花一点时间来分析一下怎样为不同的案例选择正确的正文字体进行排版设计。你应该知道,这些技巧并非金科玉律,但它们会是你选择正文字体时的好参谋。无论如何,这种选择取决于你希望用这个字体来表达什么,很多时候,易读性和字体的个性是同等的重要。所以请记住下面这些要点,小心从事。
1. The Letterform 字形

null

上面的“弯管”体现了这个字体的结构。这一点很重要。为了文本的易读,我们应该采用字形尽量简单的字体,而不需要太多复杂的细节。这些细节会让阅读者分心,我们应该让读者关注文本的内容而非字体。

更多 »

Tags: , , ,

几个在线web2.0风格生成网站

七月 25th, 2008 | 没有评论 | 发布于 页面设计

现在,只要看一些web2.0应用的目录,你就会发现,无论是小网站还是大的门户网站都更希望拥有web2.0的风格.可以看出,web2.0风格已经成为了现在web设计的潮流.这里列出了一些在线的专业web2.0元素生成器.如果你希望得到更多的内容或新闻,那就请订阅这个blog来及时获得更新,这是完全免费的!

Web 2.0 Badges – .一套免费的超酷web小图标
Web 2.0 Badges

更多 »

Tags:

关于首页代码一些规范写法

五月 16th, 2007 | 没有评论 | 发布于 页面设计

      首页的代码关键在head区,head区是指首页HTML代码的<head>和</head>之间的内容。

head区必须加入的标识

公司版权注释 <!— The site is designed by yourcompany,Inc 03/2001 —>

网页显示字符集 例如:
简体中文:<META HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=gb2312″>
繁体中文:<META HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=BIG5″>
英 语:<META HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=iso-8859-1″>

更多 »

Tags: , ,

中文页面中常用css技巧

四月 8th, 2007 | 没有评论 | 发布于 页面设计

1、如何设定文字字体、颜色、大小 —— 使用font

font-style设定斜体,比如font-style: italic;
font-weight设定文字粗细,比如font-weight: bold;
font-size设定文字大小,比如font-size: 12px;(或者9pt,不同单位显示问题参考CSS手册)
line-height设定行距,比如line-height: 150%;
color设定文字颜色(注意不是font-color),比如color: red;
font-family设定字体,比如font-family : “Lucida Grande”, Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;(这是通用的写法)

更多 »

Tags: , ,