驽鸟公寓

这是一位叫做  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% 的比例分割。

分享收藏

/**default css style**/
html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre { display: block }
li { display: list-item }
head { display: none }
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell; }
caption { display: table-caption }
th { font-weight: bolder; text-align: center }
caption { text-align: center }
body { margin: 8px; line-height: 1.12 }
 

阅读全文

分享收藏

使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则如下：

颜色16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：
#000000可以缩写为#000;#336699可以缩写为#369;

盒尺寸通常有下面四种书写方法:
property:value1; 表示所有边都是一个值value1；
property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3
property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left
方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下：
margin:1em 0 2em 0.5em;

边框(border)边框的属性如下：
border-width:1px;
border-style:solid;
border-color:#000;
可以缩写为一句：border:1px solid #000;
语法是border:width style color;

阅读全文

分享收藏

CSS框架之利：

　　1、开发效率的提高。

　　如果你是一个企业建站的前端开发，相信在大部分时间里进行着同类站点的代码工作。定义好的框架可以大大提高你的工作效率，避免一些常见的错误。如果你的工作是按件计费的，你的报酬一定会比别人多。

　　2、规范代码命名。

　　在多个站点中你可能会用到一些同样的CLASS或ID。如果你有一套完善的css框架，很快你就能对你的每一个站点的代码进行通读。不用浪费时间在代码的阅读上。

　　3、更好的团队合作

　　有些公司会将一些稍大的站点的前端代码分成若干子项目。有过此类经验的朋友应该对这种开发方式深感郁闷，要注意公用css，还有注意相互之间的代码配合。久而久之，废弃代码越来越多，互相之间也难以阅读。如果建立好合适的CSS框架，大家可以减少很多不必要的错误，提升产品质量和工作效率。

　　4、解决浏览器的兼容性问题

　　现在大部分项目都要求兼容IE6，7和FF。每个站点可能都会花上一部分时间去处理兼容问题。在框架层面上就将这个问题处理好。就可以为后面的兼容问题节省下大部分时间。

　　5、一套完整的、结构清晰的结构代码。

　　CSS框架为你的项目提供一个干净、严谨的基础架构。通过它你可以快速的为你的站点搭建基础的html代码框架。万事开头难，前面的基础工作做好了。后面的开发速度会提高很多。

阅读全文

分享收藏

　　总结了部分所学、所听、所看、所问的一些CSS写作经验，书写高效的CSS - 漫谈CSS的渲染效率，它们与渲染效率及所占用消耗的资源有一定的关联。部分为自己理解所写，不排除会有错漏，欢迎提供更好的意见。

1、十六进制的颜色值对位数与大小写

　　编写十六进制颜色值时你可能会用小写字母或省略成3位数，关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响，但十六进制的颜色值默认标准是大写及6位数标注。在未知情况下不希望冒险而降低了渲染的效率。
* 不赞成 - color:#f3a;
* 建议用 - color:#FF33AA;

2、display与visibility的差异

　　他们用于设置或检索是否显示对象。display隐藏对象不保留物理空间，visibility为隐藏对象保留占据的物理空间。当浏览器渲染被占据的物理空间时，会有所消耗资源。
* 不赞成 - visibility:hidden;
* 建议用 - display:none;

3、border:none;与border:0;的区别

　　和display与visibility的关系类似，分别不保留与保留空间。更多的是border:0;尽管可以隐藏掉边框，但它会为你保留border-color/border-style的使用权。
* 不赞成 - border:0;
* 建议用 - border:none;

4、不宜过小的背景图片平铺

　　一张宽高1px的背景图片，虽然文件体积非常之小，但渲染宽高500px的板块需要重复平铺2500次。提高背景图片渲染效率跟图片尺寸及体积有关，最大的图片文件体积保持约70KB。
* 不赞成 - 宽高8px以下的平铺背景图片
* 建议用 - 衡量适中体积及尺寸的背景图片

阅读全文

分享收藏

对高度的解析

　　IE：将根据内容的高度变化，包括未定义高度的图片内容，即使定义了高度，当内容超过高度时，将使用实际高度
　　Firefox：没有定义高度时，如果内容中包括了图片内容，MF的高度解析是根据印刷标准，这样就会造成和实际内容高度不符合的情况；当定义了高度，但是内容超过高度时，内容会超出定义的高度，但是区域使用的样式不会变化，造成样式错位。
　　结论：大家在可以确定内容高度的情况下最好定义高度，如果真的没有办法定义高度，最好不用使用边框样式，否则样式肯定会出现混乱！

其他的细节差别

　　当你在写css的时候，特别是用float: left（或right）排列一窜图片时，会发现在firefox里面正常而IE里面有问题。无论你用margin:0,还是border: 0来约束，都无济于事。

　　其实这里还有另外一个问题，就是IE对于空格的处理，firefox是忽略的而IE对于块与块之间的空格是处理的。也就是说一个div结束后要紧接着一个div写，中间不要有回车或者空格。不然也许会有问题，比如3px的偏差，而且这个原因很难发现。

　　非常不走运的是我又碰到了这样的问题，多个img标签连着，然后定义的float: left，希望这些图片可以连起来。但是结果在firefox里面正常而IE里面显示的每个img都相隔了3px。我把标签之间的空格都删除都没有作用。

　　后来的解决方法是在img外面套li，并且对li定义margin: 0，这样就解决了IE和firefox的显示偏差。IE对于一些模型的解释会产生很多错误问题，只有多多尝试才能发现原因。

阅读全文

分享收藏

　　CSS代码更清晰高效的一些经验是许多网页制作者与开发者都关心的问题。但是大概没有什么魔法，可以保证一下就把你的样式表缩小到百分之多少，合理的CSS 编码与组织技巧，的确能够帮助你的更有效率地写出更清晰高效的代码，自然CSS样式表大小的缩减还能减少下载的时间。 
 
一、排版： 
 
1、关键词和操作符之间加适当的空格。
2、相对独立的程序块与块之间加空行
3、较长的语句、表达式等要分成多行书写。
4、划分出的新行要进行适应的缩进，使排版整齐，语句可读。
5、长表达式要在低优先级操作符处划分新行，操作符放在新行之首。
6、循环、判断等语句中若有较长的表达式或语句，则要进行适应的划分。
7、若函数或过程中的参数较长，则要进行适当的划分。
8、不允许把多个短语句写在一行中，即一行只写一条语句。
9、函数或过程的开始、结构的定义及循环、判断等语句中的代码都要采用缩进风格。
10、C/C++语言是用大括号‘{’和‘}’界定一段程序块的，编写程序块时‘{’和‘}’应各独占一行并且位于同一列，同时与引用它们的语句左 对齐。在函数体的开始、类的定义、结构的定义、枚举的定义以及if、for、do、while、switch、case语句中的程序都要采用如上的缩进方 式。 
 
二、注释 
 
1、注释要简单明了。
2、边写代码边注释，修改代码同时修改相应的注释，以保证注释与代码的一致性。
3、在必要的地方注释，注释量要适中。注释的内容要清楚、明了，含义准确，防止注释二义性。保持注释与其描述的代码相邻，即注释的就近原则。
4、对代码的注释应放在其上方相邻位置，不可放在下面。
5、对数据结构的注释应放在其上方相邻位置，不可放在下面;对结构中的每个域的注释应放在此域的右方;同一结构中不同域的注释要对齐。
6、变量、常量的注释应放在其上方相邻位置或右方。
7、全局变量要有较详细的注释，包括对其功能、取值范围、哪些函数或过程存取它以及存取时注意事项等的说明。
8、在每个源文件的头部要有必要的注释信息，包括：文件名;版本号;作者;生成日期;模块功能描述(如功能、主要算法、内部各部分之间的关系、该文件与其它文件关系等);主要函数或过程清单及本文件历史修改记录等。
9、在每个函数或过程的前面要有必要的注释信息，包括：函数或过程名称;功能描述;输入、输出及返回值说明;调用关系及被调用关系说明等。 
阅读全文

分享收藏

　　1、请您在2008年5月19日14时28分起从座位上起立，向本次遇难同胞默哀三分钟；
　　2、请您将QQ头像、MSN头像设为隐身（黑白色），字的颜色请改为黑色或灰色，以寄托我们的哀思； 请将你的网站设置为黑白灰色，如果有可能，请将所有的娱乐频道暂时关闭。
　　3、请您在哀悼日三天内，不要参加娱乐活动，不要大声说笑，用静静的缅怀表达我们的悲痛；
　　4、若有可能，请您在晚上点起盏盏烛光，为我们的死难同胞送行！

提醒大家国难日应注意：
 
　　第一：三天全国哀悼日期间，着装要正式、肃穆，不要穿戴太时尚或者颜色鲜艳的衣服、鞋帽，女同志不要用鲜艳的口红眼影化彩装，不要佩  戴时尚的首饰；
　　第二：工休的时候不许开音乐、不许打牌，不许打闹嬉戏；
　　第三：要注意维护公共场所的气氛，在街上行走的时候，不要三五成群的嘻闹；
　　第四：下班之后不要出入舞厅、卡拉OK厅、台球社，也不要在家里放歌曲，唱卡拉OK、举办朋友聚会；
　　第五：可以佩戴一些表示哀悼、追念的标志或饰品；
　　第六：2008年5月19日下午14:28起，停止工作三分钟。
　　第七：这是第一次为百姓举行国丧，有些百姓会不习惯、不重视，也不知道该怎么做，希望大家尽量在亲朋好友中传递这些信息，并随时纠正看到的不正确行为。

阅读全文

分享收藏

　　为了让网站能够更快，Web的建设者都会按常规地压缩和优化网站上的每一个图像文件，这常常使得为了将文件的大小减少几个百分点而牺牲了图像的质量。由于 CSS样式表是纯文本文件，和图像相比相对较小，所以Web建设者很少考虑采取措施减少其CSS样式表文件的大小。但是，通过使用CSS缩写以及其他的一些简单技巧，你可以在很大程度上减少样式表的大小。

　　Web网站可用性的关键指标是速度，更确切地说，是页面能以多快的速度出现在访问者的浏览器窗口里。影响速度的因素有很多种，包括Web服务器的速度、访问者的Internet连接情况，以及浏览器必须下载的文件大小。尽管你无法控制服务器和连接的速度，但是你可以控制构成网站Web页面的文件大小。

　　 在我对自己样式表的一次非正式的特别测试中，我把文件的大小降低了大约25－50％。

　　使用CSS的缩写性质

　　CSS 的缩写性质（shorthand property）是一些专用的性质名，用来代替多个相关性质的集合。例如，间隙性质（padding property）是顶部间隙（padding-top）、右侧间隙（padding-right）、底部间隙（padding-bottom）和左侧间隙（padding-left）的缩写。

使用速写性质让你能够把多个性质／属性对（property/attribute pair）压缩进CSS样式表的�