专注于WEB前端开发, 追求更好的用户体验, 更好的开发体验 [长沙前端QQ群:234746733]

开发

  • 10条优秀的网站设计经验!

    / 分类: 开发 / No Comments

    一个设计良好的网页应该能够被宽带网上的多媒体高档电脑或者依然使用慢速MODEM连接的低档电脑上安装的浏览器阅读。然而,很多新的网站设计者均不是非常的了解如何尽量的让这些HTML文件保持很好的兼容性。
      当然,这里有太多的不确定因素影响网页最后呈现的结果。首先,计算机的显示器有不同的分辨率和显示质量,其次,运行着各种各样的操作系统,使用着不通版本的WEB浏览器 ,不同INTERNET连接方式和各种速度的MODEM。我们不能想当然的去武断地判定浏览者的喜好。我们还是花点时间来测试页面,这样可以让每一个访问者感到愉快。然而,遗憾的是我们没有办法为每一个访问者来优化页面,但是下面讲述的几个步骤将有助于您保证大多数访问者的浏览效果。  
     
    1、确定受众。
      一般的来说,绝大多数普通受众图形,插件,applets和其它有关的高级Web浏览器特性。对我们来说,页面的实用可能比漂亮更重要,对于用户来说,没有什么比页面能够快速下载更重要了,简而言之,精简你的站点,这是一条最佳的捷径。

      波士顿一位图形设计者兼美术讲师说:"你必须考虑什么,这一切都应该来自自于你的观众"!

      为了让每个人满意,一个站点的实用比漂亮更加重要。并且首先,它必须能够快速的被用户端的较老版本的浏览器快速解释。简化你的站点,然而,那未必是最好的办法。

      考虑一下站点访问者的操作系统,监视器,浏览器,和的连接类型。然后,想想理论上他们需要从你的站点获得什么?他们是想获得连接还是需要实际的内容?如果是普通的站点是否会失望,是否需要为浏览下载特别的插件。有一个窍门就是没有必要为每一个人优化你的站点,要满足每一个访问者显然不可能,你必须为访问者采取适当的技术。

      2、不要依赖图形。
      就站点设计而言,的确能够通过成功的图形设计招徕或者丢失访问者。并非所有的访问者可以完全看到图片,某些人为了加快存取网络的速度已经关闭了浏览器端的图形。简而言之,图形并不能正确的在客户端加载。   然而,图形经常被用来作为导航按钮。举例来说,访问者经常按向左的箭头返回上一页,或者一个包含问号的图形可以得到更多的信息,或者按公司的标志(LOGO)会告诉用户公司的地址和电话号码。图形映射(IMAGE MAP)允许你按图像的不同区域连接到不同的地方,这个经常被用来用作站点地图,你给访问者提供站点内容指引。但是如果你仅仅通过图片来提供站点导航的话,某些访问者将不能完全或者正确的离开你的站点。

      总是告诉用户你的站点需要什么样类型的技术才能正确浏览你的网站是一个非常愚笨的方法。如果访问者需要安装插件才能处理,如果你仅仅给出一个连接让访问者去下载。这个自认为非常酷的页面对用户来说根本不是什么幽默的事情,这是和用户的期待所恰恰相反的。至于为什么恰恰相反,希望你能反思一下,如果是你,你会为了浏览一个你根本不知道什么样的站点而去下载一堆你不知道的插件么?

      如何解决这个矛盾呢?你可能想到的解决方法有二种:一个是单纯的文本,另外就是完全的图形方式。其实不然。如果你使用一个图形映射的方式给内容列表,可以在该页的最后使用一个纯文本方式的表格来处理,这样会好很多。如果使用图形按钮,最好还是包括简单的导航文字提示。

      大多数的时候,通常我们要养成使用"ALT"标记的习惯,这样当图形未能正确显示的时候可用预备的文本替代显示。这样,用户至少可以看到关于这个图形的表述,便知道这个图形究竟意味着什么。举例来说某个图象标记的预备文本就可以这样写:   

      使用"ALT"标记也有另外一个好处。文字将显示在图象的上面,这样会给用户造成一个页面快说引导的感觉。

      3、保持页面小巧。
      这个小节我们谈论的是关于图形的处理。最好的方法是我们呼吁广大的读者保持让图形文件的尺寸尽量的小。即使是那些侥幸拥有快速Internet连接的用户,他们不会抱怨说你的站点加载速度太快。

      第一个基本原则是让每一个图形文件的尺寸小于30KB。这绝对不是一个坏的建议。更"极端"的某些页面设计专家说,保持整个页面的尺寸大概在30KB, 40KB左右(也就是包含图形和文本以及其它多媒体对象之后的整个页面)才是比较合适的。并忠告我们"千万不要使用非常大的页面"。

      要保持页面尺寸小巧,花些时间来处理一下图形,在保证图形质量的情况下使用尽量高的压缩比例,让图形尽量的小。

      另外,让图形使用较少的色彩也是一个让图形尽量小的办法。使用单调的颜色比使用梯度的颜色要好。使用梯度颜色可以在浏览器端快速填充颜色调色板供客户端显示。此外,减少图形的色彩深度进而可以使用较少的色彩树也是可以的。

      如果你需要提供较大的图象和多媒体文件,尽量不要插入页面里面,提供一个连接就可以了。这样,如果使用快速的连接点击图象就可以立刻看到,低速的连接不看图象也可以看到他最关心的内容,浏览感觉上没有什么延迟是最好的。

    4、不要假设用户的显示器和分辨率大小。
      一个常见的错误的是好多的网页设计师都认为访问者都有一个他们一样显示效果良好的大屏幕显示器。按照目前的状况,你可以为你的站点优化设计为标准的800×600分辨率,这是现在主流显示器的的默认显示分辨率。

      搜索引擎,比如Excite,我们可以发现一些为增加大量用户访问量的好主意。举例来说,多使用表格单元格颜色填充。该页的网页设计师为该网页添加了背景色,这样用户就不会在感觉上觉得下载页面耗费的时间过多。另外,大多数的显示器只能显示256色,而不是设计师所使用的真彩上百万种颜色设置。浏览器能显示的颜色在浏览器"安全色彩范围",即256色以内。后面我们将详细讨论这个问题。

      5、小心使用插件(plug-ins)和Applets。
      突出交互性或者多媒体特性的站点通常使用plug-ins和applets。Plug-ins是Web浏览器功能的扩展。浏览者如果安装了Plug-ins,他们就能够运行不同类型的文件,比如动画,视频和音频。Applets是小的程序片断或者是工具,经常用Java语言编写,可以借助诸如浏览器这样的大型程序完成一些有用的功能。

      虽然plug-ins和applets能大大增强站点的交互性和多媒体性能,但是对于一些较老配置的机器来说,这无疑又是一个多余的功能。举例来说,Java applets仅能工作在32位的操作系统下,Windows 3.


      虽然plug-ins和applets能大大增强站点的交互性和多媒体性能,但是对于一些较老配置的机器来说,这无疑又是一个多余的功能。举例来说,Java applets仅能工作在32位的操作系统下,Windows 3.x就行不通(虽然现在很少有人使用了)。另外,plug-ins需要花费时间下载安装,但并不是每一个用户都能熟练的完成下载后安装这样一个过程。不熟练的用户安装plug-ins的时候可能会遇到故障,不熟练的用户不需要这样的烦恼。

      如果你判断你的受众可以安装plug-ins和applets,你必须要在相关的部分提示用户,下载plug-ins和applets的时间和地址,并且安装过程中需要注意哪些方面的内容。这样可以方便用户的使用。如果是非常重要的信息,建议你提供一个可用的如纯文本型的可用信息,以方便那些确实无法安装plug-ins和applets的访问者。

      6、仅仅在需要的时候使用帧(FRAME)。
      使用帧可以把一个浏览器分成几个不同的窗口,对于站点的结构的把握是一个不错的方法。但是,你还是必须知道,还是有人在使用不支持帧的浏览器。在你开始打算设计一个帧的时候,你该仔细的考虑考虑你是否的确真的需要。经常,你这样的需求可以通过表格来组织站点的结构。当然,有些特别特别老的浏览器的确连表格也不支持。哎,这样说来,我们似乎真的是没有办法了。

      如果你必须使用帧,设法为还在使用那些古董浏览器的用户提供其它的解决办法。最坏的打算就是,如果真的没有办法解决,给这些用户一些道歉的信息,不要让他们感觉到你忽视了他们的存在。

     7、不要忘记Web浏览器。
      你应该知道,最终的浏览者有很多的方法可以控制网页在客户端浏览器的显示效果(包括字体大小,颜色等等),不过从市场占有率来看,网景公司的航海家(Navigator)相比微软公司的探险家(Internet Explorer)的份额正逐渐减小。

      对一个指定的站点来说,如果考虑到某些访问者不喜欢使用图形方式的导航条,测试的时候你就需要关闭图形显示。所以,在制作的时候,你就必须要考虑到大部分(不是全部,当是至少应该考虑到导航条图形)的图形必须要使用文字提示,这样即使在浏览者客户端不显示导航图片的时候还有文字给予适当的提示,这样的感觉,会好很多,至少面对无法显示图形的红叉而言,这样的文字提示就给人以友好的感觉二不至于无所适从。

      事实上,微软公司出品的WEB探险家和美国Netscape公司航海家已经有越来越多的相似之处了,其实,早在一年前,他们之间的兼容已经不是一个大问题了。但是在细节上还是有区别的,某些在某个浏览器看上去的效果用另外一个浏览器看就完全不是那么一回事了。你可以理解这些差别,但是你无法支配他,不同的浏览器看上去就是不同,就象不同的人眼里的某个人各自会有不同的印象一样。你所需要的,就是知道他们存在差别,你应该尽量的去避免使用导致巨大差别的代码或者方法。   好消息是,这二个浏览器都可以免费下载,对用户来说,完全可以尝试用二个浏览器去看看你的站点有什么不同的浏览感受,选择的权利在于浏览者,而你作为站点设计者,要做的只是去倾听浏览者可能的反馈。坏消息就是,你不能控制访问者使用什么样的浏览器,或者额外的去改变浏览器窗口的大小,设置字体类型、颜色和大小。你能作的就是当访问者不能访问某些部分的时候建议他们使用什么样的配置,怎么样看你的站点,这样他们就可以使用默认的设置或者你建议的浏览器。
      
    8、保持苹果和PC格式兼容。
      很多的页面在苹果环境中设计而浏览者使用的确是PC。对大部分页面来说,这个理由。实际上,浏览器比操作系统更多的影响站点的浏览效果。有一个需要指出的事实,在IBM兼容PC机上看到的图片似乎比苹果机上的小,而且颜色稍深。如果你的站点图形大部分在苹果机上设计,建议在发布之前,在PC机上进行预览,看是否有较大的效果差异。

      苹果机和PC上显示的同样的颜色在某种程度上看上去往往有些差别。说的更精确些就是我们早前提到的关于调色板的区别在起着决定性的作用。这二个不同的平台,有216个通用的颜色,所以,网页设计师在设计的时候尽量使用这通用的216色就可以最大程度的保证这二个平台的页面色彩显示效果基本一致。

      9、测试、测试、再测试!
      不要为我的罗嗦而感到厌烦。为了保证在众多的浏览者浏览器里面能正确的看到我们所想表达的页面效果,所以正式发布站点之前的测试显得非常的重要,是重中之重。从你自己的电脑开始,一遍又一遍的开始测试,使用不同的浏览器,试着调整浏览器窗口的宽度和高度,关闭图形显示,试着使用不同的显示分辨率。然后,在朋友、同事甚至邻居的电脑上重复刚才作过的事情。

      有专业的网页设计师建议我们将测试工作交给熟识的普通的用户去进行,因为这样才符合大多数的使用者的习惯,而且这些用户使用的浏览器版本较老,这样可以保证最终用户的浏览效果。有必要强调这一步的重要性。在办公室里面,我们经常可以看到一些似乎是作为点缀使用的古老的机器(几乎能见证电脑的发展历史),我们不妨用作我们的测试机器,似乎更能体现这些古董机器的价值。而这些古董机器得出的测试结果,往往比我们使用的专业的设计师所有的电脑测试的效果更加客观,更加具有代表性。

      10、可以通知你的访问者了。
      即使我们作了上面我们要作的一切工作,你必须明白,我们还是无法保证这个精心设计的站点能让每一个访问者都有很好的显示效果。如果你在首页上明确指出浏览你的站点需要具备什么什么样的条件,你必须明白并非所有的用户都能具备你所要求的条件。你可以为这些不能满足你认为的基本条件的用户一个另外的选择,这样可以让他们知道你并没有忽视他们。你可以告诉他们如何通过电话,书信或者电子邮件的方式与你取得联系,这样也不至于让他们空手而归。

      最后,经过测试、验收合格的站点才能向全世界发布。浏览者是否有兴趣浏览你的站点或者在你的站点停留很长事件已经完全摆脱你的控制了。有些用户由于使用速度过慢的调制解调器而变得烦躁不安,或者是页面无法显示图形或者,或者用户使用了他们个性化的浏览器无法正常显示站点……这些问题都将存在,一点也不用感到惊奇。我们现在所能作的,就是从客户的反馈信息当中分析和测试用户的多样性和可能性不断的进行调整。

      无论如何,你已经从你的站点得到某种心理上的满足。在开始继续作这件事情以前,你可以坐下来清楚的想想你究竟是为了什么创建这个站点的。仔细的列出你的连接,并不是所有的用户都有耐心在你的站点上寻找他所关心的内容。让他们知道什么时候什么地方将提供什么,比如你准备在什么时候提供一个重要资料的下载等等。尤其重要的是,要让那些相关的宣传对象满意,因为一旦他们发现一些对他们有用的东西,他们将向他们周围的朋友、同学或者亲戚进行扩散,这样你的站点的知名度就会慢慢的打开。

      恭喜你,你已经成功了一半,接下来要告诉你的就是"持之以恒,精益求精"。希望你能记住。

  • 解决IE打开网页一片空白- -!

    / 分类: 开发 / No Comments

    装了系统后发现打开自己的站浏览器显示空白,还以为重了病毒。用了3种杀毒软件也没找到。。这种情况估计遇到的人比较少吧,点右键-查看源文件 可以看到网站的内容,但就是打开网站没有一个字。后来才找到原因,浏览器编码造成的。。右键-选择换一种编码如:GB2312/U-TF8,不过最简单的是设置-编码-把“自动选择”打上钩,OK~

    另外给网站的站长们个建议,就是网页编码<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />这行代码要仅靠在<head>之后,这样估计访问你的站的人即使遇到我这样的情况也不会打开是空白。。

  • 关于Creative Commons(创作共用)

    / 分类: 开发 / No Comments

    创作共用中国大陆版 (CC China) 2.5协议今天在北京中国人民大学举办的 "简体中文版创作共用协议发布会暨数字化时代的知识产权与创作共用国际会议" 上正式发布.

    劳伦斯·莱斯格在发布会上的演讲创作共用组织的创始人斯坦福大学法律系教授劳伦斯·莱斯格 (Lawrence Lessig) 以及创作共用组织的多名成员出席了会议, 并介绍了著作权在数字时代下的问题以及创作共用协议的发展历史.

    在创作共用中国大陆项目组正式发布创作共用中国大陆许可协议的当天, iMagine有限公司在香港发布了第一张采用创作共用中国大陆许可协议的CD唱片《PatPet》. 该唱片采用创作共用 "署名-非商业性使用-禁止演绎 2.5 中国大陆" (cc-nc-nd 2.5 China)协议.

    CC China 项目负责人王春燕教授创作共用中国大陆小组的项目负责人, 中国人民大学法学院王春燕副教授在会上说: "在中国大陆引进创作共用许可协议极其重要. 在西方严格的版权保护方法和中国传统的全社会分享知识创造成果的观念之间,创作共用许可协议的观念和方法为中国社会提供了一种合理并切实可行的中间道路. "

    她同时说: "在中国大陆引进创作共用组织的许可协议体系将能进一步促进创造性活动的发展并丰富创造性作品, 同时提高中国人民与世界上其他社会和文化进行有效沟通的能力. "

    创作共用 (Creative Commons) 组织简称为CC, 是劳伦斯·莱斯格在2001年创办的一个非营利机构. 此组织的主要宗旨是增加创意作品的流通可及性, 作为其他人据以创作及共享的基础, 并寻找适当的法律以确保上述理念.

    根据创作共用组织的要求, 由于不同司法管辖区的法律体制和制作权法不同, 因此在不同司法管辖区需要根据原始协议进行本地化一切和当地的法律要求. 由此, 创作共用中国小组最初在CNBlog.org的毛向辉发起下 (开始的名称叫做 "创作共享" ) , 通过民间合作完成了1.0版的翻译和本地化工作. 在2005年以后, 该项目交与中国人民大学负责2.5协议的本地化工作.

    创作共用协议允许作者选择不同的授权条款, 指定四种条件并作出6种不同的组合来为作品授权:

    CC的标志姓名标示 (by)
    非商业性 (nc)
    禁止改作 (nd)
    相同方式分享 (sa)

                                                                                                                                          2006-03-30

    ----------------------------------------

    以下内容来自http://www.creativecommons.cn/

    从“保留所有权利”到“保留部分权利”

    我们通常熟知的唯一一种版权声明方式“保留所有权利”(All Rights Reserved)已经被滥用到任何人都可能触犯版权法律,人们只知道在自己的任何大小的作品(甚至本身也是在别人的成果基础上的再创造)都无以复加地声明为“保留所有权利”。这样的结果一方面导致原创者应有的权利得不到尊重,另一方面是很多优秀的作品(无论是艺术作品、文学作品、个人思想还是其他数字作品等)都无法得到最大价值利用或最广泛传播。虽然在很多国家的版权法律默认地赋予原创者很多权利,但是越来越多的人们开始意识到自己并非需要保留所有权利。相反他们更愿意选择“保留部分权利”(Some Rights Reserved)或“不保留权利”(No Rights Reserved)。

    十一种授权选择

    “创作共用”协议机制提供了由4个最常见的授权选择的组合方式,任何作品都可以通过选择这性地组合声明自己的作品授权,实际上可以有11种常见的组合方式。这些组合方式构成了从“松”到“紧”的授权限制,给作品的创造者更加灵活便利的选择。为网络上的数字作品提供了新的“护身符”。

    CC China 2.5版权生成器

    CC China官方网站

  • Class与ID的区别

    / 分类: 开发 / No Comments

    一个Class是用来根据用户定义的标准对一个或多个元素进行定义的。打个比较恰当的比方就是剧本:一个Class可以定义剧本中每个人物的故事线,你可以通过CSS,Javascript等来使用这个类。因此你可以在一个页面上使用class="Frodo" ,class="Gandalf", class="Aragorn"来区分不同的故事线。还有一点非常重要的是你可以在一个文档中使用任意次数的Class。 
       
    至于 ID,通常用于定义页面上一个仅出现一次的标记。在对页面排版进行结构化布局时(比如说通常一个页面都是由一个页眉,一个报头< masthead>,一个内容区域和一个页脚等组成),一般使用ID比较理想,因为一个ID在一个文档中只能被使用一次。而这些元素在同一页面中很少会出现大于一次的情况。 
       
    归纳成一句话就是:Class可以反复使用而ID在一个页面中仅能被使用一次。有可能在很大部分浏览器中反复使用同一个ID不会出现问题,但在标准上这绝对是错误的使用,而且很可能导致某些浏览器的现实问题。(刚才在Dreamweaver中试了一下,确实,并没有出错) 
       
    在实际应用的时候,Class可能对文字的排版等比较有用,而ID则对宏观布局和设计放置各种元素较有用。 

  • CSS的十八般技巧

    / 分类: 开发 / No Comments

    一.使用css缩写
    使用缩写可以帮助减少你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;

    背景(Backgrounds)
    背景的属性如下:

    background-color:#f00;

    background-image:url(background.gif);

    background-repeat:no-repeat;

    background-attachment:fixed;

    background-position:0 0;

    可以缩写为一句:background:#f00 url(background.gif) no-repeat fixed 0 0;

    语法是background:color image repeat attachment position;

    你可以省略其中一个或多个属性值,如果省略,该属性值将用浏览器默认值,默认值为:

    color: transparent

    image: none

    repeat: repeat

    attachment: scroll

    position: 0% 0%

    字体(fonts)
    字体的属性如下:

    font-style:italic;

    font-variant:small-caps;

    font-weight:bold;

    font-size:1em;

    line-height:140%;

    font-family:”Lucida Grande”,sans-serif;

    可以缩写为一句:font:italic small-caps bold 1em/140% “Lucida Grande”,sans-serif;

    注意,如果你缩写字体定义,至少要定义font-size和font-family两个值。

    列表(lists)
    取消默认的圆点和序号可以这样写list-style:none;,

    list的属性如下:

    list-style-type:square;

    list-style-position:inside;

    list-style-image:url(image.gif);

    可以缩写为一句:list-style:square inside url(image.gif);

    二.明确定义单位,除非值为0
    忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=”100″,但是在CSS中,你必须给一个准确的单位,比如:width:100px width:100em。只有两个例外情况可以不定义单位:行高和0值。除此以外,其他值都必须紧跟单位,注意,不要在数值和单位之间加空格。

    三.区分大小写
    当在XHTML中使用CSS,CSS里定义的元素名称是区分大小写的。为了避免这种错误,我建议所有的定义名称都采用小写。

    class和id的值在HTML和XHTML中也是区分大小写的,如果你一定要大小写混合写,请仔细确认你在CSS的定义和XHTML里的标签是一致的。

    四.取消class和id前的元素限定
    当你写给一个元素定义class或者id,你可以省略前面的元素限定,因为ID在一个页面里是唯一的,而clas s可以在页面中多次使用。你限定某个元素毫无意义。例如:

    div#content { /* declarations */ }
    fieldset.details { /* declarations */ }

    可以写成

    #content { /* declarations */ }
    .details { /* declarations */ }

    这样可以节省一些字节。

    五.默认值
    通常padding的默认值为0,background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突,可以在样式表一开始就先定义所有元素的margin和padding值都为0,象这样:

    * {
    margin:0;
    padding:0;
    }

    六.不需要重复定义可继承的值
    CSS中,子元素自动继承父元素的属性值,象颜色、字体等,已经在父元素中定义过的,在子元素中可以直接继承,不需要重复定义。但是要注意,浏览器可能用一些默认值覆盖你的定义。

    七.最近优先原则
    如果对同一个元素的定义有多种,以最接近(最小一级)的定义为最优先,例如有这么一段代码

    Update: Lorem ipsum dolor set

    在CSS文件中,你已经定义了元素p,又定义了一个class”update”

    p {
    margin:1em 0;
    font-size:1em;
    color:#333;
    }
    .update {
    font-weight:bold;
    color:#600;
    }

    这两个定义中,class=”update”将被使用,因为class比p更近。你可以查阅W3C的《Calculating a selector’s specificity》了解更多。

    八.多重class定义
    一个标签可以同时定义多个class。例如:我们先定义两个样式,第一个样式背景为#666;第二个样式有10 px的边框。

    .one{width:200px;background:#666;}
    .two{border:10px solid #F00;}

    在页面代码中,我们可以这样调用


    这样最终的显示效果是这个div既有#666的背景,也有10px的边框。是的,这样做是可以的,你可以尝试一下。

    九.使用子选择器(descendant selectors)
    CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码:

    <div id="subnav">
    <ul>
    <li class="subnavitem"> <a href="#" class="subnavitem">Item 1</a></li>>
    <li class="subnavitemselected"> <a href="#" class="subnavitemselected"> Item 1</a> </li>
    <li class="subnavitem"> <a href="#" class="subnavitem"> Item 1</a> </li>
    </ul>
    </div>

    这段代码的CSS定义是:

    div#subnav ul { /* Some styling */ }
    div#subnav ul li.subnavitem { /* Some styling */ }
    div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }
    div#subnav ul li.subnavitemselected { /* Some styling */ }
    div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }

    你可以用下面的方法替代上面的代码

    <ul id="subnav">
    <li> <a href="#"> Item 1</a> </li>
    <li class="sel"> <a href="#"> Item 1</a> </li>
    <li> <a href="#"> Item 1</a> </li>
    </ul>

    样式定义是:

    #subnav { /* Some styling */ }
    #subnav li { /* Some styling */ }
    #subnav a { /* Some styling */ }
    #subnav .sel { /* Some styling */ }
    #subnav .sel a { /* Some styling */ }

    用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。

    十.不需要给背景图片路径加引号
    为了节省字节,我建议不要给背景图片路径加引号,因为引号不是必须的。例如:

    background:url("images/***.gif") #333;

    可以写为

    background:url(images/***.gif) #333;

    如果你加了引号,反而会引起一些浏览器的错误。

    十一.组选择器(Group selectors)
    当一些元素类型、class或者id都有共同的一些属性,你就可以使用组选择器来避免多次的重复定义。这可以节省不少字节。

    例如:定义所有标题的字体、颜色和margin,你可以这样写:

    h1,h2,h3,h4,h5,h6 {
    font-family:”Lucida Grande”,Lucida,Arial,Helvetica,sans-serif;
    color:#333;
    margin:1em 0;
    }

    如果在使用时,有个别元素需要定义独立样式,你可以再加上新的定义,可以覆盖老的定义,例如:

    h1 { font-size:2em; }
    h2 { font-size:1.6em; }

    十二.用正确的顺序指定链接的样式
    当你用CSS来定义链接的多个状态样式时,要注意它们书写的顺序,正确的顺序是::link :visited :hover :active。抽取第一个字母是”LVHA”,你可以记忆成”LoVe HAte”(喜欢讨厌)。为什么这么定义,可以参考Eric Meyer的《Link Specificity》。

    如果你的用户需要用键盘来控制,需要知道当前链接的焦点,你还可以定义:focus属性。:focus属性的效果也取决与你书写的位置,如果你希望聚焦元素显示:hover效果,你就把:focus写在:hover前面;如果你希望聚焦效果替代:hover效果,你就把:focus放在:hover后面。

    十三.清除浮动
    一个非常常见的CSS问题,定位使用浮动的时候,下面的层被浮动的层所覆盖,或者层里嵌套的子层超出了外层的范围。

    通常的解决办法是在浮动层后面添加一个额外元素,例如一个div或者一个br,并且定义它的样式为clear: both。这个办法有一点牵强,幸运的是还有一个好办法可以解决,参看这篇文章《How To Clear Floats Without Structural Markup》

    上面2种方法可以很好解决浮动超出的问题,但是如果当你真的需要对层或者层里的对象进行clear的时候怎么办?一种简单的方法就是用overflow属性,这个方法最初的发表在《Simple Clearing of Floats》,又在《Clearance》和《Super simple clearing floats》中被广泛讨论。

    上面那一种clear方法更适合你,要看具体的情况,这里不再展开论述。另外关于float的应用,一些优秀的文章已经说得很清楚,推荐你阅读:《Floatutorial》、 《Containing Floats》和《Float Layouts》

    十四.横向居中(centering)
    这是一个简单的技巧,但是值得再说一遍,因为我看见太多的新手问题都是问这个:CSS如何横向居中?你需要定义元素的宽,并且定义横向的margin,如果你的布局包含在一个层(容器)中,就象这样:

    你可以这样定义使它横向居中:

    #wrap {
    width:760px; /* 修改为你的层的宽度 */
    margin:0 auto;
    }

    但是IE5/Win不能正确显示这个定义,我们采用一个非常有用的技巧来解决:用text-align属性。就象这样:

    body {
    text-align:center;
    }
    #wrap {
    width:760px; /* 修改为你的层的宽度 */
    margin:0 auto;
    text-align:left;
    }

    第一个body的text-align:center; 规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ,第二个text-align:left;是将#warp中的文字居左。

    十五.导入(Import)和隐藏CSS
    因为老版本浏览器不支持CSS,一个通常的做法是使用@import技巧来把CSS隐藏起来。例如:

    @import url("main.css");

    然而,这个方法对IE4不起作用,这让我很是头疼了一阵子。后来我用这样的写法:

    @import "main.css";

    这样就可以在IE4中也隐藏CSS了,呵呵,还节省了5个字节呢。想了解@import语法的详细说明,可以看这里《centricle’s css filter chart》

    十六.针对IE的优化
    有些时候,你需要对IE浏览器的bug定义一些特别的规则,这里有太多的CSS技巧(hacks),我只使用其中的两种方法,不管 microsoft.com/china/homepage/ms.htm" target="_blank">微软在即将发布的IE7 beta版里是否更好的支持CSS,这两种方法都是最安全的。

    1.注释的方法
    (a)在IE中隐藏一个CSS定义,你可以使用子选择器(child selector):
    html>body p {
    /* 定义内容 */
    }
    (b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)
    * html p {
    /* declarations */
    }
    (c)还有些时候,你希望IE/Win有效而IE/Mac隐藏,你可以使用”反斜线”技巧:
    /* \*/
    * html p {
    declarations
    }
    /* */
    2.条件注释(conditional comments)的方法
    另外一种方法,我认为比CSS Hacks更加经得起考验就是采用 microsoft.com/china/homepage/ms.htm" target="_blank">微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式,而不影响主样式表的定义。就象这样:

    <!–[if IE]>
    <link rel="stylesheet" type="text/css" href="ie.css" />
    <![endif]–>
    十七.调试技巧:层有多大?
    当调试CSS发生错误,你就要象排版工人,逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色,这样就能很明显看到层占据多大空间。有些人建议用border,一般情况也是可以的,但问题是,有时候border 会增加元素的尺寸,border-top和boeder-bottom会破坏纵向margin的值,所以使用background更加安全些。

    另外一个经常出问题的属性是outline。outline看起来象boeder,但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性,我所知道的只有Safari、OmniWeb、和Opera。

    十八.CSS代码书写样式
    在写CSS代码的时候,对于缩进、断行、空格,每个人有每个人的书写习惯。在经过不断实践后,我决定采用下面这样的书写样式:

    selector1,
    selector2 {
    property:value;
    }

    当使用联合定义时,我通常将每个选择器单独写一行,这样方便在CSS文件中找到它们。在最后一个选择器和大括号{之间加一个空格,每个定义也单独写一行,分号直接在属性值后,不要加空格。

    我习惯在每个属性值后面都加分号,虽然规则上允许最后一个属性值后面可以不写分号,但是如果你要加新样式时容易忘记补上分号而产生错误,所以还是都加比较好。
    最后,关闭的大括号}单独写一行。
    空格和换行有助与阅读。