同步内容CSS布局及常用工具

em与px到底有什么不同?

这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓 人,但是确实是现在国内网页制作方面的一些缺陷。我一直也搞不清楚px与 em之间的关系和特点,看过以后确实收获很大。平时都是用px来定义字体,所以无法用浏览器字体放大的功能,而国外大多数网站都可以在IE下使用。因为

1. IE无法调整那些使用px作为单位的字体大小;

2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位;

3. Firefox能够调整px和em,但是96%以上的中国网民使用IE浏览器(或内核)。

px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

google.com 首页代码分析

机缘巧合,对 google.com 的首页代码产生了浓厚兴趣。一点“分析”,杂记如下:

不同浏览器推送不同代码

google_src_diff.png

上图是在不同浏览器下,保存的 google 首页代码。
注意:文件大小是经过 IntelliJ IDEA 格式化处理后的大小。

确认页设计(confirmation alert)(三)——一些注意事项

白话大原则:

让我立马注意到——否则就没必要确认。
必须得与当前页面区分,凸显出来。所以一般二次确认页面弹出时,当前页面应该屏蔽使用。

让我不反感——除非想赶走客户。
视事件本身的严重程度采用适合的图标(信息、错误、问号)、措辞,视觉变化不至于太过突然。

Web可用性设计的247条指导方针

译序:Userfocus是 英国一家专门从事网站可用性设计的咨询培训公司。它为我们分享了247条Web可用性设计的指导方针,并把它们清晰的分为九个大类:首页可用性设计、任务 导向、导航和信息架构、表单和数据输入、可信度、写作和内容质量、页面布局和视觉设计、搜索可用性、帮助反馈和容错。如Userfocus所说,“虽然易 用性系统的设计远不止应用一些简单的指导方针,但是它们却可以为获取稳定性和好的实践提供有意义的帮助。”

使用CSS网页布局学习的参考诀窍

如果在用CSS设计布局时遇到BUG,请认真阅读以下内容,非常容易记忆的,不知道哪位高人把CSS BUG编成了顺口溜了!看看好不好记住呢?

一、IE边框若显若无,须注意,定是高度设置已忘记;

二、浮动产生有缘故,若要父层包含住,紧跟浮动要清除,容器自然显其中;

三、三像素文本慢移不必慌,高度设置帮你忙;

四、兼容各个浏览须注意,默认设置行高可能是杀手;

五、独立清除浮动须铭记,行高设无,高设零,设计效果兼浏览;

六、学布局须思路,路随布局原理自然直,轻松驾驭html,流水布局少hack,代码清爽,兼容好,友好引擎喜欢迎。

总结:失败网站的10个标准

在分析了很多网站后,发现好的网站有成功的标准,差的网站也有相同的标准。

一旦你的网站跟这十大标准之中的几个挂上钩,就难逃经典特差网站的厄运,如果不幸以下这十条你的网站全都占了,那还是请离开站长圈,另谋出路比较好。

一、不知道网民要什么

网民上网为的是什么?很多站长并不明白,所以网站做起来就是跟风,别人做什么他就做什么,始终跟着别人的屁股后面走,对自己的网站没有一个明确的定位,对网民也没有独特的吸引力,这样的网站是经典特差网站最普遍的例子,做网站也要懂得市场分析和需求分析,不然你的网站是做给谁看得,给他们看什么你自己都不知道,那更加不要指望网民从你网站得到什么有益的信息了。

二、完全没有创新

SEO中的DIV CSS样式的命名规则

在搜索引擎优化中, 对于代码的优化是一个非常重要的部分。 如果一个网页的代码非常的简捷,对于提升网站的排名那个是非常有好处的。 同样,在CSS样式表中,合理有序的命名同样可以为整个CSS工作带来意想不到的简便。 为了更加符合搜索引擎的规范,
下面是一些常用的CSS代码命名标准。 这些标准虽然不是一个必须遵守的规范,但是,却被大多数SEOer所接受,并为整个网站的更新工作带来方便。

页头:header (CSS中通常写为: #header)

登录条:loginBar

标志:logo

条件CSS的使用

毫无疑问,任何一个试图使用 CSS
的网页设计师和开发人员都会发现不同的浏览器要求不同的样式声明。这些烦恼归咎于各浏览器及其各版本不同程度的 CSS 执行的完整性。条件 CSS
是这个问题的一个解决方案,采用的是 Internet Explorer 的条件注释语法的思想,并把它内联到 CSS 声明之中。

基本用法

条件 CSS 主要用于指出一个特别的 CSS 声明是不是应该用于一个特别的浏览器。当然你不希望经常这么做,但是当你需要针对一个浏览器的时候,它会非常有用。可以在U4EA支持列表里看到,大部分的浏览器都支持这种方式。

任意 CSS 声明或者块都可以添加条件声明前缀,这些前缀有3种基本类型:

[if {!} browser]

[if {!} browser version]

ID和Class类的命名介绍

关于CSS网页布局id与class命名或许成为大家比较头疼的问题,在webjx.com中早已有相关的介绍,但还是不能满足大家对知识的渴求。

一、用class_name方式写类名。

以前喜欢用class-name写,不过好像两样也没什么差别。但我比较反对用className写类名,因为始终对浏览器大小写敏感的问题抱有怀疑态度。但是id我会写成驼峰式,理由见下一条。

二、样式都用class而不用id。

有三个理由。

1,id不可以重复,所以用class的话,可以肆无忌惮的用无数次。

2,id的优先级太高,若是写了一个#page_content a {color:#f60} ,那你完蛋了,里面要改链接颜色,都必须加上#page_content才能越过这个优先级。

CSS页面布局的25个技巧

对CSS网页布局的技巧,可谓是名目繁多。这里将适合新手的CSS网页布局的小技巧总结出来,或许对您更有实际的参考价值:

1、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值。

2、同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次;对一个标签同时使用class和id进行CSS定义,如果定义有重复,id选择符做的定义有效,是因为ID的权值要比CLASS大。

3、一个兼容性调整(IE和Mozilla)的笨办法:

初学可能会碰到这样一个情况:同样一个标签的属性在IE设置成A显示是正常的,而在Mozilla里必须要设成B才能正常显示,或者两个倒过来。

临时解决方法:选择符{属性名:B !important;属性名:A}