读书笔记
第一篇 CSS精粹之布局技巧
1. 若有疑问立即检测。
在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于XHTML与CSS都有检测工具可用,请见http://validator.w3.org 请注意,在文件开头的错误,可能因为不当的结构等因素造成更多错误;我们建议先修正一些最明显的错误之后重新检测,这样也许会让错误数量爆减。
2.使用浮动功能时记得适当清除指令 。
浮动是个危险的功能,未必会产生您所期望的结果。如果您遇到浮动元素延伸到外围器的边框或者其他不正常情况,请先确定您的做法是正确的。
3.边界重合时利用padding或border来避免。
您可能会为了一点不应该出现的空间而焦头烂额,或者您需要一点点空间时,怎样都挤不出来。如果您有用到margin,那么很容易产生边界的重合;Andy Budd在他的网站上解释了可能的做法。
4.尝试避免同时对元素指定padding/border以及高度或宽度。
Windows版IE经常导致width与height的计算问题。有些方法可以解决此问题,但如果母元素需要指定高度与宽度时,最好能够在母元素之内的子元素套用margin,或者当子元素需要指定高度与宽度时,在母元素套用padding以达效果。
1
5.不要依赖min-width/min-height。
Windows版IE并不支援两种语法。但是在某种程度下,windows版IE可以达到相当于min-width/min-height的效果,所以只要对IE做点过滤功能,即可达到您想要结果。
第二篇 何为一个“丰满”的设计
1.“丰满”的含义并不代表将一个版面撑满。
每个设计都必须含有一个点子,点子以“产品特性”、“目标消费群”及“卖点”所支撑。整个设计围绕其而发展,统一与一个中心,环环相扣,由浅入深或由深化浅,循序渐进,有规律,有节奏,有重点,才不失为一个“丰满”的设计。
2.做一个“不浪费”的设计
大多数设计由图片及文案两部分组成。设计之前必须充分理解文案,读懂读通,再开始下一步工作。因为你所需要达到的最理想结果(就设计本身而言)就是将图片和文案完美结合。只有这样才能不使广告目的偏移,不使文案内容变质,发挥寸“字”寸金的广告文案的原汁原味。广告不允许你有任何浪费(贵)。 第三篇 页面空白空间的魅力
设计的意思就是策划,设计的过程就是从混乱和随意中找到条理,条理有利于读者,他们可以很轻松地理解一个条理清楚的信息。斯蒂温-阿-克里蒙特的《建筑历史》杂志评论中写到:“不要把时尚和风格混淆起来。风格是在社会和顾客的实际需要中形成的。时尚则是个些急于表现优雅或老练的人所表现出的一种肤浅的状态”。
2
这些必须通过和谐的排印、有效地利用图画和空白空间,有节制的利用(字行)来完成... ...多次重复,在视觉上形成必然联系可以引导视线和帮助读者快速浏览。设计中,留出大量空白空间作为空白表现领域,使标题“突出”,大的图画得到视觉上的延伸。
页面空白空间的最佳使用能够帮助信息易于浏览,而不仅仅只是使页面看上去漂亮,那是自然而然的结果。关键在于提高页面的可理解性。
第四章 导航设计与信息架构
大部分时候我们讲导航,讲的是导航对内容和结构的一种表现。就是说我们在讨论导航的时候,更多的去关注怎么与之交互,以及视觉上是怎么好看。但是导航,不仅仅局限于交互方式和视觉形式。
不要为了导航而导航,前面一个导航是指表现形式,后面一个导航是指实际的导航系统。 对于导航的设计,信息架构比交互方式、视觉形式更加的重要。
导航不仅仅是内容的一种分类,也包括类似交互操作的分类。导航的目的是为了让使用者高效的完成任务、达成目标。
情景式导航有可能是导航设计的一种发展趋势。 第五篇 CSS六大密技
1.css 字体简写规则 2.同时使用两个class
3
通常我们只为属性指定一个class,但这并不等于你只能指定一个,实际上,你想指定多少就可以指定多少
3.css中边框(border)的默认值
当编写一条边框的规则时,你通常会指定颜色、宽度以及样式(任何顺序均可)。 4.!important会被IE忽略
在css中,通常最后指定的规则会获得优先权。然而对除了IE以外的浏览器来说,任何后面标有!important的语句将获得绝对的优先权
5.图片替换的技巧
使用标准的html而不是图片来显示文字通常更为明智,除了加快下载还可以获得更好的可用性。但是如果你决心使用访问者的机器中可能没有的字体时,你只能选择图片。
6.css盒模型hack的另一选择
css盒模型hack被用来解决IE6之前的浏览器显示问题,IE6.0之前的版本会把某元素的边框值和填充值包含在宽度之内(而不是加在宽度值上)。 第六篇 根据时段自动切换你的站点CSS风格
同样是切换风格。不过他做了点小小的调整。站点会根据当时的时间自动调整站点风格。作者为站点制作了早上、下午、夜晚三套皮肤,主要是分别制作了背景。12点以前系统会使用早上的皮肤,过了12点,站点会自动替换成下午的风格,5点后则替换成夜晚的风格。
主要的功能实现是靠在头部的这段判断代码:
4
CSS版代码如下:
href=\"
\" />
ASP版代码如下:
if hour(now)<17 then response.write \"b.css\" else
response.write \"c.css\" end if end if %> \" />
5
第七篇 list-style-type的用法
语法:
list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin
取值:
disc : CSS1 默认值。实心圆 circle : CSS1 空心圆 square : CSS1 实心方块 decimal : CSS1 阿拉伯数字 lower-roman : CSS1 小写罗马数字 upper-roman : CSS1 大写罗马数字 lower-alpha : CSS1 小写英文字母 upper-alpha : CSS1 大写英文字母 none : CSS1 不使用项目符号
armenianl : CSS2 未支持。传统的亚美尼亚数字
6
cjk-ideographic : CSS2 未支持。浅白的表意数字 georgian : CSS2 未支持。传统的乔治数字 lower-greek : CSS2 未支持。基本的希腊小写字母 hebrew : CSS2 未支持。传统的希伯莱数字 hiragana : CSS2 未支持。日文平假名字符 hiragana-iroha : CSS2 未支持。日文平假名序号 katakana : CSS2 未支持。日文片假名字符 katakana-iroha : CSS2 未支持。日文片假名序号 lower-latin : CSS2 未支持。小写拉丁字母 upper-latin : CSS2 未支持。大写拉丁字母
7
因篇幅问题不能全部显示,请点此查看更多更全内容