《无懈可击的web设计II》读书笔记

1、 使用absolute定位让块脱离标准文档流

脱离文档流以后可能会出现 块的重叠

一：这是个bug，用浮动代替absolute定位

二：可以利用者特性做覆盖层

例如浮动在图片下方的图片简介

使用z-index把原本因absolute之后在其他块上方的块变成背景，例子中的价格百分比的数据可视化（那样的设计还是很人性化滴）

2、 用border-radius做圆角

原始的方法：

固定宽度或者高度，用两个div嵌套完成

宽度高度都不固定，用四个div嵌套，四张角的图片完成

支持border-radius的浏览器中

-webkit-border-radius：

-moz-border-radius: 

-webkit-border-bottom-left-radius:

-moz-border-radius-bottomleft:

3、 使用rgba颜色

主要强调使用alpha值，使用透明度使得文字或者阴影更好的和背景融合，有时候可以减少例如hover要重新设定颜色的麻烦，直接设置hover透明度改变即有hover颜色变化的效果。box-shadow也可以使用rgba颜色，让阴影与北京融合效果更好。

4、 网站没必要在所有浏览器中看起来都一样

渐进式增强

在支持的浏览器里面看起来好看

在不支持的浏览器里面看起来不乱

再更低版本浏览器里面直接别给css，一个没有样式的页面好过一个样式混乱的页面

做一个高傲的web设计员，给那些墨守成规的，还在用ie5 ie6的用户一点提示，一点警告，别打dota了..赶快去换浏览器吧...

5、 浮动管理

master.css 

.group:after {

content:".";

display:block;

height:0;

clear:both:

visibility:hidden;

}

ie.css

/* IE6 */

* html .group{

height:1%;

}

/* IE7 */

*:first-child+html .group{

min-height:1px;

}

一个自己css框架的代码结构：

framework

css

ie.css //处理IEbug的代码分出来，面得代码里都见到感觉恶心

master.css //包含网站设计的所有样式

reset.css //重新设计浏览器为html元素默认设置的显示样式，例如list-style:none;

screen.css //按顺序@import reset.css master.css ie.css

img

img1.jpg

img2.jpg

index.html

6、 浮动的网格

使用em替代px（换算）

max-width的使用

7、 使用点jquery