下面就是小编给大家分享的网页设计应该关注的主题之一：色彩感觉，本文共9篇，希望大家喜欢!
篇1：网页设计应该关注的主题之一：色彩感觉
方法/步骤
1
色彩的感觉色彩有进退和胀缩的感觉当两个以上的同形同 面积的不同色彩，在相同的背景衬托下，我们发现给人的感觉是不一样的。在白背景下衬托下的红色与蓝色，红色感觉比蓝色离我们近，而且比蓝色大当白色与黑色在灰背景的衬托下，感觉白色比黑色离我们近，而且比黑色大当高纯度的红色与低纯度的红色在白背景的衬托下，我们发现高纯度的红色比低纯度的红色感觉离我们近，而且比低纯度红色大色彩比较中给人以比实际距离近的色彩叫前进色，给人以比实际距离远的叫后退色给人感觉比实际大的叫膨胀色，给人以实际小的色彩叫收色缩
结论：在色相方面，长波长的色相：红 橙 黄 给人以前进膨胀的感觉。短波长的色相：蓝 蓝绿 蓝紫有后退收缩的感觉 在明度方面，明度高而亮的色彩有前进或膨胀的感觉，明度低而黑暗的色彩有后退收缩的感觉。但也由背景的变化给人的感觉变化在纯度方面，高纯度的鲜艳色彩有前进与膨胀的感觉，低纯度的灰浊色彩有后退收缩的感觉，并为明度的高低所左右
色彩的冷暖感觉一般来说，看到红 橙 黄等时感到温暖，而看到蓝 蓝紫 蓝绿时感到冷
色彩的轻重和软硬感觉等大的黑灰色铸铁块与等大的石膏块相比时我们会觉得铸铁块重同样-等大的而且重相等的三个石膏块，一个涂灰，一个涂黑，一个留白，我们会感觉黑的最重如果一个涂红，一个涂黄，一个涂蓝黑，我们会觉得蓝黑的最重，涂红的次重。结论：决定色彩轻重感觉的主要是明度，明度高的色彩感觉轻，明度低的色彩感觉重。其次是是纯度，在同明度，同色相条件下，纯度高的感觉轻色相方面给人的感觉为：暖色黄 橙 红给人的感觉轻，冷色蓝 蓝绿 蓝紫给人的感觉重
华丽与朴素的色彩从色相看，暖色给人的感觉华丽，而冷色给人的感觉朴素。从明度看，明度高的感觉华丽从纯度看，纯度高的色彩给人的感觉华丽
积极的色彩与消极的色彩色彩影响人的感觉，最厉害的是色相，其次是纯度，最后是明度色相方面：红 橙 黄等暖色，是最令人兴奋的积极的色彩，而蓝 蓝紫 蓝绿等给人的感觉沉静而消极纯度方面：不论暖色与冷色，高纯度的色彩比低纯度的色彩感觉积极明度方面：同纯度的不同明度，一般明度高的感觉积极
2
色彩与人的心理有关系
当看到色彩时常常想起以前与该色相联系的色彩，其联想可分为具体与抽象的联想
具体的联想：
红色：可联想到火、血、太阳、、…。
橙色：可联想到灯光、柑桔、秋叶，…。
黄色：可联想到光、柠檬、迎春花……。
绿色：可联想到草地、树叶、禾苗……。
蓝色：可联想到大海、天空、水……。
紫色：可联想到丁香花、葡萄、茄子……。
黑色：可联想到夜晚、墨二炭、煤……。
白色：可联想到白云、白糖、面粉、雪……。
灰色：可联想到乌云、草木灰、树皮……。抽象的联想：红色夕可联想到热情、危险、活力……。
橙色：可联想到温暖、欢喜、嫉妒……。
黄色：可联想到光明、希望、快活、平凡……。
绿色：可联想到和平、安全、生长、新鲜……。
蓝色：可联想到平静、悠久、理智、深远……。紫色：可联想到优雅、高贵、庄重、神秘……。
黑色：可联想到严肃、q恤、恐怖、死亡……。
白色：可联想到纯洁、神圣、清净、光明……。
灰色;可联想到平凡、失意、谦逊…、。
这些色彩的联想经多次反复，几乎固定了它们专有的表情，于是该色就变成了该事物的象征。
[网页设计应该关注的主题之一：色彩感觉]
篇2：玩转CSS3色彩网页设计
传统来说，大家在CSS中使用的颜色要么是16进制格式，要么是rgb格式，就像rgb(171,205,239)，
CSS3带来了一些新的处理颜色的方法，比如使用HSL(Hue, Saturation, Light) 和opacity/alpha通道。不幸的是，现在只有Firefox 3+, Chrome 1.0+ 和Safari 3+ 以及一些衍生的浏览器完全支持它们。但是我们可以尽我们所能，而IE直到Internet Explorer 9才会开始支持一些CSS3属性。
Opacity
这其实是一个旧属性，令人惊奇的是，它被IE的当前版本支持——尽管是以一种比较复杂的方法。
Opacity将整个CSS 对象变透明，所有的子元素的透明度也会适当的继承。官方的语法如下：
1
opacity:[0-1的小数];
所以一个opacity: 0.5;设置会让对象50%透明。尽管较新的浏览器积极的支持它，老的浏览器还是需要一些定制的代码，就像IE浏览器一样。
目前较老的Firefox版本，我们需要使用-moz-前缀，而对于旧的Safari/Chrome版本，我们需要使用-webkit-前缀。而对于更老的还在使用KHTML内核而不是webkit内核的Safari版本来说，我们需要使用-khtml-。那么如果我们想支持每一个浏览器，我们的代码应该是这样的：
1234
opacity:0.5;-moz-opacity:0.5;-webkit-opacity:0.5;-khtml-opacity:0.5;
啊，稍等！IE怎么办？好吧，IE的确完全不支持这个，但是它使用了一个私有的滤镜。传统的方法简短扼要：
1
filter:alpha(opacity=50);
请注意对于IE我们需要使用从0到100的整数，而不是像opacity属性那样的小数。郁闷的是，Internet Explorer 8提供了一个新的方法来处理。不要尝试像另一个那样记住这个，这是很长的一个：
1
-ms-filter:“progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;
当然，如果你想支持旧的IE浏览器，你将不得不使用上面的那个短的，这也就意味着如果要兼容绝大部分浏览器，你需要总共六条CSS语句。
PS：事实上，Safari从1.2版本就开始支持opacity属性了，KHTML内核的Safai基本很难再找到了，而事实上，Konqueror从未支持过-khtml-opacity属性，所以请不要再使用它(我在翻译的时候考虑到原文的完整性，所以并没有对上面的代码作出修正)。Opera从9.0开始支持CSS3的opacity，而Firefox从Firefox 0.9开始就支持opacity，而到Firefox 3.5就不再支持-moz-opacity私有属性了。IE8的-ms-再加上filter真是微软的天才作品啊！不过请注意，如果你要同时使用filter和-ms-filter，请注意将-ms-filter写在filter的前面。——神飞
RGBa
下面让我们讨论一下RGBa。RGBa是对原始的RGB的扩展，它加入了第四个参数：alpha通道。alpha通道参数采用0 到1之间的小数，就像opacity那样。使用RGBa而不是opacity的优势是，当使用RGBa的时候，透明不会被应用到子元素。这也就一位着，你可以在一个透明对象里面使用一个完全不透明的子对象，而当你使用opacity的时候，透明对象的子元素也是透明的。
使用RGBa不能再简单了：
1234
div{background:rgb(255,0,0);/* The old one */background:rgba(255,0,0,0.5);/* The new one */}
正如你看到的那样，我们渐渐通过添加一个字母和另外一个参数就将一个实体的红色变为半透明的红色了，
RGBa被Firefox 3+、Safari 3+、Chrome 1.0+以及Opera 10支持。但IE还是不支持。CSS-Tricks 提供了一个使用私有滤镜的方法来让它在IE下也可以工作:
123456789
HSL
HSL是一个选择颜色的很直观的方法。如果你需要“再暗一点点儿” 或 “再亮一点点儿”，使用十六进制组合会颇麻烦吧。幸运的是，通过HSL，它就是仅仅一个简单的数字改变。
HSL代表Hue(色调、也称“色相”)、Saturation(饱和度)和Lightness(明度)。Hue就是一个色盘中的颜色(参考上图)。色彩选择通过度数来确定，0º 就是红色，120º 是绿色，而240º 就是蓝色。当然，你可以选择中间的不同的色彩组合，这样你就有这些：
0º – 红色
60º – 黄色
120º – 绿色
180º – 青色
240º – 蓝色
300º – 洋红
Saturation(饱和度)是该色彩被使用了多少。0%表示灰度，也就是我们并没有使用这个颜色，而100%表示该颜色很饱满。通俗的讲，饱和度就是颜色的深浅程程度，鲜艳程度
Lightness(明度)也就是该色彩有多亮。较低设置意味着暗，较高设置意味着亮，0% 和100%意味着分别为黑和白。
所以，一个使用橙色的50%饱和度+50%名都的背景的对象看起来就像这样：
div{background:hsl(30,50%,80%);}
如果想让它更亮一些或者暗一些，只需要调整最后一个参数就可以了。
HSL被大部分浏览数支持，包括Safari 3.2+、Chrome、Firefox、Opera 9.6+，IE不支持。
HSLA
当然，HSLA 就是HSL 的扩展，就像RGBa一样，添加了第四个透明参数。使用HSLA就像RGBa一样简单，仅仅在那里贴上额外的参数就OK了：
div{background:hsla(30,50%,80%,0.5);}
这个例子也是使用了橙色，但是添加了50%透明。
HSLA被大部分浏览器支持，包括Safari 3.2+、Chrome、Firefox，IE不支持，和HSL不同的是，Opera9.6并不支持HSLA，直到Opera 10才开始支持HSLA。
总结显然，HSL 和HSLA 只被Firefox、Safari、Chrome和Opera等浏览器的较新的版本支持。而对已IE却没有想opacity和RGBa那样对应的私有属性支持它们两个。然而，这从来不会阻止你尝试或以它们做实验。
译自：Playing Around with CSS3 Colors
中文：玩转CSS3色彩
篇3：网页设计与色彩心理学
网页设计与色彩心理学
21世纪是互联网经济的时代.随着信息社会的来临,人们的生活方式发生了一系列带有根本性的变化,由此带来的营销方式也发生了根本的.变化,产生了诸如EDI、EFT、eAD、网上采购等一系列全新的营销方式,对传统的企业营销方式和理念提出了挑战.
作 者：苏梅 作者单位：天津渤海职业技术学院 刊 名：企业经济 PKU英文刊名：ENTERPRISE ECONOMY 年，卷(期)： “”(7) 分类号：B84 关键词：篇4：关注色彩经济
关注色彩经济
关注色彩经济
近年来，色彩对人们的影响越来越广泛，色彩经济正受到人们越来越多的重视，彩棉、彩色汽车、彩色电器，许多商品在色彩上大做文章，消费者到商场去买东西，往往首先被物品的颜色所吸引，其次才注意形状、材质、价格等。流行色彩甚至可以反映一个时期的社会思潮、经济景气、生活环境、心理变化和消费动向等，它左右着生产和销售，并刺激消费。专家指出，在产品越来越趋同的情况下，色彩能提高产品的竞争力和附加值。另一方面，一些城市在拒绝单调色彩的同时，走入了“色彩污染”的误区。“显富、争强”文化蔓延，将城市涂成色彩斑斓的大花脸，不仅影响城市的品位，还给人们带来视觉污染。（据《人民日报》.12.18）
结合高中思想政治，可以从以下方面认识色彩经济的发展。
一、 从经济上分析
1、商品是价值和使用价值的统一体，商品的价值量是由社会必要劳动时间决定的。
商品是价值和使用价值的统一体，商品的价值量由社会必要劳动时间决定。在市场经济条件下，产品附加值越大，包含的人类一般劳动多，价值就大。厂家关注色彩在商品开发和生产中的运用，有助于提高商品的竞争力和附加值，顺利实现商品的价值，色彩在优化设计，提高品质，促进消费及提高效益方面有重要作用。
2、消费是生产的目的和动力。
消费心理是色彩经济发展的重要原因。消费是生产的最终目的，同时，消费的变化也会引起生产的变化。人们对色彩的关注、关心，刺激生产者将色彩作为商品品质的要素来发展，从而使得流行色彩成为经济增长的`基点。色彩经济的繁荣使生产与消费的互动关系更加密切，有利于提高产品品质，提高竞争力，促进经济的发展。
3、市场是市场经济条件下资源配置的基础手段。
色彩是一种信息，一种资源。消费者的青睐说明市场发展的潜在要求，厂家根据市场信息，调整生产，反映了供求关系，体现了市场在资源配置中的基础手段，有利于实现资源的优化配置。
二、 从哲学角度认识
1、物质决定意识，一切从实际出发。
辩证唯物主义认为，世界的本质是物质，物质决定意识，人们想问题、办事情要一切从实际出发，主观符合客观。一些厂家在生产的过程中根据消费者对色彩的偏好，开发设计多彩商品，以更好满足消费者要求，体现了一切从实际出发，主观根据客观的变化做出了相应的调整和变化。
2、体现了联系的观点。
唯物辩证法认为，世界是普遍联系的，事物的联系是客观的，因此，要坚持用联系的观点看问题。流行色彩不是孤立存在的，它对人们的消费动向和消费心理有重要影响，并进而影响到商品的生产和销售，同时，色彩的合理使用，也有助于提高产品的竞争力和附加值。因此，坚持用联系的观点看问题，发现色彩经济背后的商机，正是厂家推出色彩商品的重要原因。
3、矛盾是普遍存在的，坚持一分为二的观点。
唯物辩证法认为，矛盾是普遍存在的，任何事物都是矛盾的统一体，矛盾即对立统一。因此，要学会用一分为二的观点看问题。色彩经济有助于提升产品竞争力，丰富人民生活，但同时也要注意一定条件下矛盾双方向相反的方向转化。色彩使用不当，会带来一些不良影响，如影响城市的品位、给人们带来视觉污染等。合理使用色彩就要避免色彩污染，促进色彩经济的健康发展。
此外，还可以从社会意识的反作用角度分析消费心理对色彩经济发展的推动作用。
257400 山东利津一中 苟金海
篇5：色彩个性化网页设计:优秀网页设计案例
文章描述：在网页设计中，如果想要独树一帜，不妨在最直接吸引眼球的色彩上下下功夫，大胆的使用色彩，能够让你的网站更个性化，然而配色问题一直是设计行业的挑战，如何用好色，配好色，分清主次，自然需要潜心研究了。
在网页设计中，如果想要独树一帜，不妨在最直接吸引眼球的色彩上下下功夫，大胆的使用色彩，能够让你的网站更个性化。然而配色问题一直是设计行业的挑战，如何用好色，配好色，分清主次，自然需要潜心研究了。如果做得好，那么效果会极具冲击力。推荐您看下我们之前推荐的人气文章《配色三部曲》。
本文收集了一些大胆用色的优秀网页设计案例。一起来学习一下吧。
Studio MPLS
Heikopaiko
do a backflip
BarCamp Omaha
Brand Village
100 Ans de Tour
Spring/Summer
Snipcart
Reunite the River
Think Big
Caramel Budgie
Nineswiss
Parallax.js
原文地址：webdesignledger.com/inspiration/13-beautiful-examples-of-bold-colors-in-web-design
篇6：《感觉色彩》说课稿
一、说教材
本课是艺术八年级上册第六单元的内容，是以美术分科切入的综合性艺术课中的一节课。主要是为了培养学生的艺术通感。
教学内容力求适合学生的能力，使学生的主体作用能够得到充分的发挥，在尊重学生的个性的同时培养学生的主动学习的习惯以及举一反三的能力及习惯。
重点：对色彩的感受
难点：感受色彩，并进行联想。
二、说目标
通过识别、感受不同的色彩，获得对色彩的不同感受，如冷暖、味觉、联想等，并积极而主动地感受色彩，调动学生的情感。
三、说教法
本课以计算机为辅助，利用专题性站引导学生主动去发现与归纳色彩的情感与心理效应，学习简单的.运用，以形成艺术通感。
教学方法：发现式
四、说教学设计
设置情境——提供资料——学生探究——总结结论。
1、设置情境：听音效，谈感受——冷暖，引出“感受”
2、提供资料
（一）学生探究：冷暖（速度较快的同学自行理解色彩带来的轻重、涨与缩、华丽与朴素等感受）
（二）互动探究：味觉、软硬
（三）色彩的联想：具象联想与抽象联想
3、知识巩固与评价（计算机操作）
4、拓展与留言
五、说学法
学生的自学能力比较差，因此给他们一个网站让他们自学是不现实的，所以给学生一些半成品，在此基础上学习可能效果好一点，也是比较适合学生实际的。对与知识积累较丰富，学习能力又比较强同学，交互式站又为他们提供了广阔的空间。
篇7：幼儿教师应该关注什么
幼儿教师应该关注什么
幼儿园的候老师上课时发现，不知谁把上一节课时放好的蜡笔洒到了地上，而且用脚踩了。候老师把小朋友集中到一起，温和的询问：到底是谁弄到地上的？小朋友纷纷说不是自己，只有小明不说话。候老师又说：只要勇于承认错误了就是好孩子，老师不会怪罪的。结果没有小朋友承认。于是候老师，让每个小朋友坐回自己的位置，然后让一个个把脚抬起来。轮到小明时，小明没有抬脚，只是低声说：真的不是我。候老师什么都清楚了，她不动声色的向小朋友们说：大家说，那个踩了蜡笔的小朋友为什么要踩蜡笔啊？小朋友七嘴八舌，有的说是不小心的，有的说是贪玩。候老师又问：如果那个小朋友真的不是故意的，而且也勇于承认错误，我们大家应该怎么对待他？小朋友们大都认为应该原谅踩蜡笔的小朋友，还说以后大家一起帮助他改正错误。说到这里，候老师看到目的达到了，就说：今天踩蜡笔的小朋友我想他一定已经意识到自己的错误了，老师不会怪罪他了。其实，每个幼儿教师都会碰到与这相似的事例，但每个人就不一定能像候老师这样处理此类事件。这样的事看起来似乎平常，如果单从外部的教育结果考虑，要想让儿童体验做错事的后果并避免重犯此类错误，应该有不少方法，但是不是都考虑过孩子的自尊心却是另一回事。许多人常常讲，小孩年纪还小，什么也不懂，认为善于服从，听话的孩子就是好孩子，犯不着以平等的姿态看待他们。是的，可能孩子还缺乏较高的认知能力，也无法理解一些高级层面的.道德规则，但是他们小小的自尊心已在成长。儿童很小的时候已经开始形成他对这个世界的基本看法，一些基本的价值观和世界观已在粗略的构建，在以后的成长过程中，随着自身认识能力的提高，各种认识在不断的丰富着早期价值观和世界观的细节。成年后的个体的人生观和行为方式可以认为和童年经历是密不可分的。
我们是否给了孩子自尊，是否让孩子体验到了人生的乐趣，是否让孩子体验到了信任感和安全感，是否让孩子对未来充满幻想和渴望，都决定着孩子在逐渐能自立后，他是否以一个积极的人生态度面对这个世界。所以，优秀的幼儿教师主要关注的不应该是送给家长一个体肤完好，守规矩的，会识很多字的，有大人相的小孩，而是培养一个能主动关注他人，积极快乐，勤于问问题，自信开朗，热爱生活的儿童。可能这样的要求，即使对于一个教育专家来讲，实现这一目标也是很难的。但是，每个教师都应该意识到这点：即把小孩子看做什么也不懂，就意味着不用平等的对待他们。
篇8：产品列表到底应该如何设计？网页设计
最近随着狂风计划的席卷，我也终于开始橱窗产品位列表展示的编码工作，这只是一个改进项目，因此有原代码可供参考，但是当我打开原代码模板的时候便愣住了，一个4 × n的矩阵为了执行div + CSS的标准而放弃使用非常牛B的table布局，这本无可厚非，可是由于“某原因”（后文会陈述）却让本来很有优势的div布局失去了原有的优势，在我反复思考这个问题的时候怎样都觉得table布局能比现在的这个更加合适。那么这个非常霹雳的布局是怎么样的呢？请见下图：
产品列表结构图（png太牛B了只有18K）
我想绝大多数UEDer都不会使用如上布局来实现这个模块，首先想到的当然是使用DIV[productItem]做4 × n次的循环，然而这个布局却使用程序控制每四个DIV[productItem]给它们套一个DIV[productListRow]。可能很多人都已经发现了，这个布局有一个先天性的不足，也就是前文提到的“某原因”，那就是由于产品简介的长度不同导致每个DIV[productItem]的高度不同，因此需要在每行列表后面都清除浮动以让浏览器可以做出正确排列。那么解决办法也就出来了，很简单，有如下几个：
1、最方便、最有效、性价比最高的方法就是我们当然可以知道最长长度的产品名称和产品简介，因此我们分别取这两个值排满的最高高度来作为DIV[productItem]即可，但是这个方法却有致命的缺点导致所有UEDer都不会这么做得，那就是当出现有人不填写产品简介或者产品简介填写得非常少的时候便会出现大段的空白严重影响观看阅读。
2、那就这样把，咱把“产品简介”给拿掉吧，然后使用方法1便可以完美解决问题了。这个想法非常牛B，可是它太牛B了，我绝对不敢这样操刀直接把这么重要的内容给砍掉（也许有人觉得这些内容并不重要，但是这不是这篇文章所要讨论的东西）。我对曾经抱有次想法表示遗憾和羞愧。
3、为什么不使用table布局呢？天哪我觉得这简直就是最完美的办法了，table一出八马难追的。能够自适应高度的table在这个应用上拥有绝对的优势啊，如果前端开发工程师们可以放下一点架子在html上使用它原本应该使用的结构该是多么美好的事情，我直到在写这篇博客的时候依然觉得使用table解决问题又快又省力还很有快感哦~（其实原代码中的div布局就是抄袭了table的“思想理念”了）
但是作为一个在非常牛B的UED团队的还是菜鸟的我为了要做出非常牛B的事情也为了团队的面子，怎样也不能使用上面三种投机取巧的办法来敷衍这个现实的问题吧，因此就有了这篇博客最重要的内容。
第一次尝试：
首先我们还是来考虑考虑到底使用什么标签来写这个列表吧，所谓back 2 base嘛。重新分析列表中最重要的元素有且仅有：标题、图片、简介。显然标题是最重要的，作为一个product的title存在，而图片和简介都是用来描述标题的内容，因此第一个想到的标签就是dl，这样便有了以下布局（抱歉还没有时间整一个代码输入）：
[name] [photo][intro]对dt和dd都做float:left，dt做一个margin-top:100px来定位到图片和简介中间，dd做一个margin-left:-25%来定位到和dt相同的x坐标（由于无法输入代码就不贴css了）这样的html是我认为最贴切的，根据现在流行的html语义化定义这样的布局太合适不过了。当然css中还是存在非常多的困难，而前面所说的“某原因”也并没有得到解决，反而更甚了，因为把标题和简介流拆开后，标题过长便会和简介的文字叠加根本无法阅读！然而经过几秒钟的思考后认为这玩意儿的解决已经超出了我的范围了。当然，有人可能会说把标题和图片换一个不就可以了么？是的，没错，但是如果这样的话使用dl标签还有什么意义呢？可能有意义吧，就是标题和简介都是为了说明这张图片而存在的，但是真的可以这么想吗？还有待实验去证明，这里就不讨论了。
第二次尝试：
如上所述，dl的存在就没意义了，那就算了吧，退而求其次使用ul（请在砸我鸡蛋前念着我还死了那么多脑细胞在这个上面的份上轻点儿吧），无序列表虽然不如定义列表来得语义那么强烈，但至少它还是和列表吧，至少不是一个division吧，
ul的布局相比较就简单多了，看上去也只是把div标签换成了li而已，那么html结构如下：
[photo]
[name]
[intro]
到这个时候终于要直面本文第四次提到的“某原因”了，如何解决li浮动后高度不同导致的矩阵错位问题？最先进入脑子的想法就是记得很久很久以前看到过一篇关于div自适应高度的文章，于是就在google翻找，当时没有收藏真是太失误了。在google搜索自适应高度那是相当多呀，但是有一篇文章是不得不借鉴的，但是这篇文章并不是适应于我们的案例，很显然它更适用于两栏或者三栏布局，而我们至少有四栏甚至五栏。自此还有什么办法可以让多列布局自适应高度呢？（请不要跟我提关于巨大的padding与负margin这件事）伪装的自适应对于需要货真价实产品的我们是没有用的……至此思维告一段落，我需要回到源头来，最开始的出发点在哪里？如果只是为了清除浮动的话？使用最简单的方法？
带着上面的问题，便渐渐有了解决方案，不可避免的，我可能需要借助后台工程师的力量了，我在每4个li之后的那个li上加上clear:left属性，以清除左边的浮动来防止它因为前面li的高度不够而导致的错位，从它之后的li就应该会乖乖地跟在它的后面了。这个想法很美好，但是很天真，可能我确实在FF等标准浏览器下面获得了预想中的效果（没有想到实现起来那么简单，正在开心中），突然发现又是那该死的IE！！！那个加了clear属性的li确实正常显示了，但是在它之后的那些继续原来它应该范的错误，没有起到清除整行浮动的作用。我懊恼了~通过漫长的研究至今已经找到了一个语义和样式都比较平衡的点却无法在IE中得以实现，怎么办？
第一个想法就是使用hack技术（虽然UEDer们都不推崇，但是为了维护之前的成果，老子发飙了），问题就是如何做hack。先看这样的例子，如果我每4个li后面都插一个
的话，不管在IE下还是在FF下都可以完美地完成任务，但是这个方案有一个致命的缺陷，就是对原有html语义的破坏，凭什么好好的列表突然就多出一个空li来？那么能不能在不影响原来语义的情况下，在FF依然使用它应该使用的clear:left方式的情况下来针对IE进行hack呢？非常幸运的是IE给我们提供了条件注释工具[productItem]
[productItem]希望这样能够看得懂。至此为了尽力表述完整语义的目的就达到了，因为所有的浏览器、搜索引擎和用户都会把那段IE的hack作为一个普通的注释来看待（这里也包括IE自己，这是一段条件注释，那还是注释），因此产品列表的li就没有被中途无故打断，更不会像最早的div版本每四个是一个division。到这里研究工作就算完成了（关于这个IE特有的hack的可能的严重后果木有给予考虑。。。），不过还有一些额外的思考。
其实使用division也不完全是不好，如果division这样做：
DIV[productItem]{1-5}
DIV[productItem]{6-10}
DIV[productItem]{11-15}
DIV[productItem]{16-20}
本文出自：www.aliued.com//12/18/143/
篇9：RGBa色彩的浏览器支持网页设计
RGBa是一种在CSS中声明包含透明效果的颜色的方法，它的语法是这样的：
123
div{background:rgba(200,54,54,0.5);}
它允许我们为元素添加透明色，或许我们习惯了使用”opacity“，它很简单易用，但是，opacity会使所有的子元素都变成透明的，而且很难去解决这个问题。（除非使用怪异的定位hack） 跨浏览器透明同样颇为棘手。
通过RGBa，我们可以将一个元素设置为透明，而不会影响其子元素：
声明一个保留颜色
并非所有的浏览器支持RGBa，所以如果允许的话，可以声明一个保留色彩。这个色彩应该是可靠的——所有的浏览器都支持。不声明就意味着，在不支持RGBa的浏览器里面，没有使用颜色。
1234
div{background:rgb(200,54,54);/* The Fallback */background:rgba(200,54,54,0.5);}
不过，这条退路在某些古董级浏览器中依然无效，
RGBa的浏览器支持情况
浏览器，版本，操作系统测试结果退路Firefox 3.0.5 (OS X, Windows XP, Vista)支持—Firefox 2.0.0.18 (PC)不支持纯色Safari 4 (Developer Preview, Mac)支持—Safari 3.2.1 (PC)支持—Mobile Safari (iPhone)支持—Opera 9.6.1不支持纯色IE 5.5 (PC via IETester)不支持无色IE 6 (PC via IETester)不支持纯色IE 7不支持纯色IE 8 beta 2不支持纯色Google Chrome 1.0.154.43支持—Google Chrome 1.0.154.46支持—Netscape 4.8 (PC)不支持没有颜色SeaMonkey 1.1.14不支持无色SeaMonkey 1.1.16不支持纯色SeaMonkey 2.0 beta3支持—Sunrise 1.7.5支持—Stainless 0.2.5支持–Flock 2.0.2支持–BlackBerry Storm Browser支持纯色Camino 1.6.6不支持纯色上面的数据是通过测试demo得到的，该测试页面包含了更多更完整的浏览器兼容性列表。
对IE浏览器的更好的退路
因为IE浏览器支持条件注释，我们可以抛弃RGB并使用IE的一个私有CSS滤镜来实现同样的效果：
123456789
原文链接：css-tricks
译文主次：RGBa色彩的浏览器支持及其兼容性解决方案
文档为doc格式
