手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表Tag:css

CSS 中的黄金分割率

这是一位叫 Christos Chiotis 的希腊 Web 设计师发表在 CssGlobe 的一篇文章,讲述了黄金分割率在 CSS 中的应用。黄金分割率是一个应用广泛的数学常数,大约为 1.6180339887。黄金分割率用在 Web 设计中,可以为设计带来更多视觉上的和谐。

在一个简单的两栏式页面布局中,使用两个容器,第一个容器用来显示主要内容,第二个容器显示侧条。比如,页面宽度为 960 px,使用黄金分割率,主内容容器的宽度应该为 960 / 1.62 = 593 px,而侧条的宽度为 960-593=367 px。

作者建议,在 Web 排版与布局中可以使用以下基本 CSS 设置

  • line-height = font-size * 1.62
  • paragraph margin = paragraph line-height * 1.62 / 2
  • header’s margin-top = headers line-height * 1.62

不过对中文而言,至少 font-size 和 line-height 之间使用黄金分割率是不适合的,假如中文字体使用 12px 的话,最佳行高是 22px,如果字体使用 14px 的话,行高应该使用 24px - 译者。

另一个例子,在表单中,输入框的宽度应该是标签文字的宽度乘以 1.62。而对于显示在 Web 上矩形来说,它的宽度应该是高度乘以 1.62。

这样一来,Web 设计师同时需要很好的计算能力,至少要在旁边放一台计算器,为了节省时间,作者建议在设计中随时记住一个 62/38 原则,在任何需要分割的地方,都使用 62% 和 38% 作比例。
对于需要分割成三份的场合,可以先按 62%,38%原则分成两份,再将那份大的按 62% 和 38% 的比例分割。

--------

上述文字来自于http://www.newsteng.com/html/2011/web-based_1220/69.html,因为自己不了解设计,所以备份一下。以后除了自己用还可以用来installB之类的

图片附件(缩略图):
大小: 28.8 K
尺寸: 500 x 161
浏览: 2132 次
点击打开新窗口浏览全图

图片附件(缩略图):
大小: 27.32 K
尺寸: 500 x 103
浏览: 2182 次
点击打开新窗口浏览全图

Tags: css, 黄金分割

CSS的一些兼容性的备份资料

纯资料,做备份,因为对CSS不太了解,所以复制了群内某人的发言。

CSS代码
  1. #test{  
  2. color:red/* 所有浏览器都支持 */  
  3. color:red !important;/* Firefox、IE7支持 */  
  4. _color:red/* IE6支持 */  
  5. *color:red/* IE6、IE7支持 */  
  6. *+color:red/* IE7支持 */  
  7. color:red\9; /* IE6、IE7、IE8支持 */  
  8. color:red\0; /* IE8支持 */  
  9. }  

好纠结的东西啊。

 

Tags: css, 兼容

【酷】Ultimate CSS Gradient Generator

没什么好说的,一个字:酷

上图:
大小: 104.19 K
尺寸: 500 x 368
浏览: 1749 次
点击打开新窗口浏览全图

上链接:http://www.colorzilla.com/gradient-editor/

我还能说些啥尼?

Tags: css, gradient, colorzilla

走走停停看看的:CSS通用元素选择器的都市流言

在转这篇文章之前,我先说一点项目中遇到的问题,公司的主页最近改版上线,但是上线后出了一点问题,是CSS方面的问题。

CSS文件很多,前端把它分的很细,每一个小的widget部位就是一个单独的CSS文件,这样确实方便了有重复内容时的工作量减轻。于是我们在上线后,对CSS文件进行了合并,用的是Yii的插件 EclientScript(@hightman开发的一个插件)。CSS和JS都顺利合并了,但结果却不太正常。经过仔细检查发现是每个文件头的@charset=utf-8导致了这个问题。合并后,所有的文件内容都被引用到一起,所以造成了合并后的文件中“@charset=utf8”有好几个,但是为了保证文件是按utf-8格式被加载于是保留了最上面的@charset=utf8,其余的都删除了。OK,这时候所有的流量器都正常了。

结果第二天,老板过来说,在IPAD下不正常,于是继续排查,最终发现还是这个@charset=utf8的原因。前面说过,我们只保留了第一个文件的UTF8的判断,其他的都清空了,那为什么还会出错呢?经过测试,发现@charset=utf-8只能在第一行才有效,在其他行时,safari不认,而EClientScript在压缩文件后,会在文件第一行加上这个文件对应实际文件的地址,于是就让@charset=utf8到了第二行。所以IPAD上面显示就不太正常了。。

接下来就转载了:CSS通用元素选择器的都市流言,原文来自:http://shawphy.com/2010/11/css-universal-selector.html

本文尚未有测试数据支持,以下结论仅是根据现有情况的一种解释。

关于 * 这个选择器,一直有个疑惑,到底是否影响效率。在先前的观念中,这由于要匹配所有的元素,让每一个元素都带上这个属性,所以会影响页面的效率。但近来的思考,觉得这应该不会影响效率。为此还特地写过一篇博文,里边提到了这点:真的还需要reset.css么?

而这篇文章中我打算着重阐述为何 * 这个选择器不会影响效率。

上周六去参加了 web标准化交流会,席间 winter 从浏览器(webkit)的角度分享了关于页面渲染的过程。其PPT也可以在前面的链接中下载到。

其中一个很重要的过程是,当页面载入过程中,CSS 和 HTML 是并行下载的。并且通常CSS是在HEAD中引入的,并且体积不如HTML大,所以CSS会先下载完。下载的过程中浏览器就已经开始对CSS中的规则进行 索引,也就是已经确定哪一个元素呈现的样式是如何的了。同时,浏览器根据HTML构建出的DOM树,其中的每一个元素会直接去CSS规则索引中去比对,构 建出渲染树。这个过程都是并行的,并且CSS规则是进行了索引的,因此速度非常的快速。

那么我们看看CSS规则的来源主要有2个,一是浏览器内置的元素样式,Firefox 3.x版是放在目录下的res文件夹内,4.0版和Chrome中没找到(这里是我的主观臆断不太可靠,大家自行辨别),另一个就是页面提供的。根据查看 放在 res 文件夹下的 CSS 文件就可以得知,就是是什么样式都不写,已经为每一个HTML元素设定好了基本样式了。

那么看看我们所忌讳的事情,不用*{margin:0;padding:0},而是使用

CSS代码
  1. html, body, div, span, applet, object, iframe,  
  2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,  
  3. a, abbr, acronym, address, big, cite, code,  
  4. del, dfn, em, font, img, ins, kbd, q, s, samp,  
  5. small, strike, strong, sub, sup, tt, var,  
  6. b, u, i, center,  
  7. dl, dt, dd, ol, ul, li,  
  8. fieldset, form, label, legend,  
  9. table, caption, tbody, tfoot, thead, tr, th, td {  
  10.     margin: 0;  
  11.     padding: 0;  
  12. }  

看看这一大坨东西啊,难道不是跟上面的 * 选择器一个用途么?对每个元素(至少是常用元素),添加样式。其实作用是一样的,并且就算没有这一坨,浏览器内置样式也在对每个元素设置样式。之后 HTML 文件中的每一个元素,可以很容易找到自己应当呈现的样式了。

那么,对于之后添加的,会不会有性能影响呢?也不会,由于CSS规则已经确定并索引了,所以今后增加的元素也不过就是简单比对一下而已,不会多走一步的。

所以,由此得出结论,只要有需要,大胆的使用 * 吧,他不会给你从性能上增加额外的麻烦。

最后补两个前端优化小知识:
1,由于CSS规则和HTML是并行载入的,因此把CSS放在HEAD中是非常有必要的。
2,少使用 :last-child 。因为这个选择器无法索引起来,必须等DOM构件完,才能知道他是不是父元素中最后的那个 元素。这种就非常慢了,慎用。

 

----EOF--

注:文中@charset=utf-8我格式可能写的不对,只是表达一个意思,因为我没有dreamwaver,而所说DW在写CSS的时候,默认会在第一行加上这个玩意。。。

 

Tags: css, charset, eclientscript, yii

css之浏览器hack

来自颓废小魔的博客,主要是自己了解一下,这样万一哪天自己要写CSS了也可以参考一下:

CSS代码
  1. height:100px;  /*正常情况*/  
  2. [;color:#0F0;]/* Sa,CH */  
  3. height:100px\9; /*IE全部系列*/  
  4. *height:100px;  /*IE6 IE7识别*/  
  5. _height:100px;  /*IE6识别*/  
  6. height:100px\0;  /*IE8识别*/  

发现这些写法都好妖啊。。还是firefox好。不过,我也发现一点问题那就是UBUNTU下的FF和WIN下的FF看我的博客的样式居然也不太一样估计是字体的关系了。。(很明显的是我用openoffice的WORD文档让老婆帮我打印的时候,字体变的一塌糊涂)

Tags: css, hack, browser

Records:15123