-
读完一章，真正了解到html结构化是多么的重要。
运用html语义化标签能更好的体现出html的结构。
通过图片替换，隐藏说明文字，能够起到很好的换肤效果。
css Zen Garden的结构化很清晰，让人一目了然。
-
简洁设计要点
设计阶段。可以从相片和调色板入手，将各种元素不断组合直至满意（图像和色彩），然后将设计好的付诸于css实现。
排版样式。通过运用不同的文本大小、文字间距和颜色来调整版面样式。
图标。图标要是对物体本质的抽象，强烈、一致的方式与要表示的概念关联起来。有的图标仅仅起到标号作用，简洁不能宣兵夺主。
分界线。适当使用分界线，让页面有韵律，添加额外的维度。不能过度使用。
外边距。网页与浏览器之间的留白。联想到许多文章提及的适当的留白会让界面有更好的表现力。
借喻。用简单的设计元素表示复杂的图像或概念。比如简单的白色线条。
精心设计。并不是所有站点都需要如此精心设计，那些内容和功能占主要地位的网站应该尽可能地简化图片等设计元素，以简洁实用为首要目标。
合理使用光线、空间和形状。
色彩。理解色彩所包含的心理效果、文化影响、性别偏好等。
颜色的普通心理联想：
-------------------------------------------------------------------------------
颜色 心理联想
红色 力量、活力、爱、激情、进攻、危险
蓝色 信任、保守、安全、清洁、悲伤、有序
绿色 大自然、健康、嫉妒、复苏
橙色 愉快、幸福
黄色 乐观、希望、冷静、懦弱
紫色 神秘
褐色 可靠、舒适、忍耐、大地
灰色/银色 智慧、未来、谦虚、悲哀、腐朽、高雅
黑色 力量、性、完善、神秘、恐惧、忧愁、死亡
白色 纯洁、干净、精确、清白、中性、不毛、死亡
-------------------------------------------------------------------------------
引导视线。视觉流向是通过使用图片和内容，让读者的实现从一个重要低点移动至下一个过程。还能为读者的眼睛提供一些休息的空间。
关于图像替换技术等。<div><span>Good Luck!<span></div>
css盒模型中的外边距重叠。若两个元素上下毗邻且都定义了不为0的外边距值，同时又没有任何内边距、边框等设定，那么这两个元素之间的距离将小于二者外边距的和。
当父元素div都没有设定外边距，所以每个div的地步外边距将于其最后一个元素（比如p）的底部外边距重叠。这时总共的外边距值不为零，所以其最后一个子元素（比如p）的10px外边距值仍然要被计算进去，看上去就像是子元素“隔开”了包含它的div父元素。这种情况下可以这样解决：为每个div父元素添加1px的垂直内边距，这样就不再满足形成外边距重叠的条件，div之间的缝隙自然就消失了。
当那些非“必不可少”的图片存在时。IE6中png不能显示其透明度信息，可以利用IE6也不支持的子孙选择器来设定png图片背景 div > span
-
固定布局和流式布局。
固定布局应用于：作品区域大小固定，设计师能在控制固定布局页面时更加游刃有余。对于图文混排易于控制。为了防止页面空白失衡。一般固定布局让作品水平居中显示。
流式布局应用于：填满浏览器窗口能最大限度地利用空间，避免了半页的空白。
居中显示解决方法：1、给容器定义width且左右外边距为auto。2、给容器定义text-align:center。但这种hack方法会造成子元素也居中（不建议使用）。3、使用绝对定位和margin负边距，同时要给容器定义width。
用户界面设计的基本法则：
> 了解将浏览页面的用户
> 在页面和站点中给用户足够的导向
> 使用被人们熟知的象征符号
> 保证与功能相关的特性在页面中足够显眼
> 保证设计元素的一致性
> 了解页面中的关键元素
> 清楚地表达页面的内容（人类注意力持续时间最多9秒）
布局相关的可用性问题：
> 重要信息应放在显眼位置
> 永远在title元素中给出页面的简单介绍
> 尽可能地保证页面中的导航链接有着一致的表现
> 对于中型或大型站点来说，强烈建议提供搜索功能
> 用缩进和偏移将栏中内容分开
-
GIF：只允许同一张图像中最多出现256种颜色。适合单色插图、文本、色块等带有大块相同颜色区域的图像。
JPEG：24位色深能够很好地显示照片等色彩、细节丰富的图像。但不支持透明。使用JPEG时要把握好图像质量和文件大小之间的平衡关系。
PNG：24位能保证完全无损。透明度设置1位或8位。
图像替换的方法：
<h3 id="header">I like it!</h3>
1、Leany和Langridge的方案
#header{
padding: 25px 0 0 0;
overflow:hidden;
background-image:url(header.gif);
background-repeat: no-repeat;
height: 0px !important;
height: /**/:25px;
}
把文字隐藏在容器下面。
2、Rundle的方案
#header{
text-indent: -5000px;
background:url(header.gif) no-repeat;
height:25px;
}
把文字推到屏幕的左边缘之外。
3、Levin的方案
<h3 class="replace" id="myh1">And a dash of Thyme.<span></span></h3>
.replace{
position:relative;
margin:0px; padding:0px;
overflow:hidden;
}
.replace span{
display:block;
position:absolute;
top:0px; left:0px;
z-index:1;/*for Opera 5 and 6*/
}
#myh1, #myh1 span{
height:25px;
width:300px;
background-image:url(header.gif);
}
表现真实感：
> 要特别注意图形边缘的效果
> 注意形状
> 图像的材质能够为物体带来真实感
> 深度的确可以表现出额外维度的感觉，即使是在二维环境中也是如此。深度是通过边缘的光影体现出来的。
> 重力的模拟同样重要
-
字体格式：字样的粗细、宽度和姿态（Italic、Oblique）
字体对比度：字型中粗的部分与细的部分之间的差异程度
字体色深：文字的深浅程度、字距调整、字间距和行间距、字体色相。
字体组：
serif. 有明显的装饰钩，笔画结尾处大都能看见细小的衬钩 Times New Roman
sans serif. 没有装饰钩。Arial
monospace. 每个字母都有相同的宽度，显示程序代码特别有用。Courier或Courier New
cursive. 模仿手写风格，通常用于标题。没有默认，最常见Comic Sans
fantasy. 完全是装饰用字体，多用于标题。
标题指导意见：
> 颜色必须是整个设计中较为强势的色彩
> 色彩必须鲜明。暗色比亮色更能产生冲击力
> 越重要的标题，越要用有冲击力的颜色
> 略为紧缩的字体更能凸显标题。70%-90%宽作为标题
> 字体对比增强标题效果
> 标题长度应该有所限制
正文布局的建议：
> 保持一行在60个字符以内
> 避免每行字数过少
> 段落不要太长
> 长篇文章尽力让段落保持小巧，并且将长段分割为节并加以标题
> 段落之间的距离不能过大
> 避免在正文中使用鲜艳的色彩
重要文字：
> 应用鲜艳的色彩并保持统一
> 应当使用短行
> 不应阻断正文，而应增强正文效果
> 给插图附上说明
font-variant:small-caps/normal 将文字用略小的大写字母表示
text-transform: capitalize / uppercase / lowercase / none
首字母大写 所有字母大写 所有字母小写 正常
text-decoration:none / underline / overline / linethrough / blink(不用)
无 下划线 上划线 中划线 时隐时现效果
line-height 行间距
letter-spacing 字符间距
word-spacing 单词间距
text-align 对齐文字 left、right、center、justify 不要应用到长段文字中
-
IE6不支持的css选择器：
子选择器 #content > p {color:blue;} 运用于元素的直接子元素，子孙元素不会应用
邻接选择器 #content p + p {color:red;}
属性选择器[ href~="http://www.google.com/"] {color:green;}
关于固定边框的处理技巧：
给浏览器加固定边框，可以用position:fixed;但IE不支持此属性，边框会随着滑动而滚动。
处理此hack的技巧是。
#extraDiv2 {
background-image: url(edge.gif);
background-repeat:repeat-x;
position:fixed;
bottom:0;
left:100%;
width:100%;
height:20px;
margin-left:-100%;
}
把边框设置左偏移量100%然后再通过左外边距-100%把边框拖回来。
而恰好对于那些不支持负外边距的浏览器，也不能正确显示fixed的悬浮效果。
有时候可以使用“半”透明的GIF图片重叠于背景之上。半透明GIF类似于一个国际象棋棋盘。
-
分层功能利用了background-attachment:fixed属性。让背景图片不随滚动条滚动。
在绝对定位中使用em为单位会导致定位随字体大小改变而自动调整。但若使用px为单位，虽然可能导致文字重叠，但却能对元素位置进行更为精确的控制。
分割各个文字块，可用border-bottom:1px dashed blue; 边框将呈点划线状。
利用相对定位元素中加入绝对定位的子元素，能够处理一些布局问题。
