1.设置文字垂直居中：设line-height与height相同。
2.显示table边框，设table的td为：border:1px solid 颜色。
3.设置table的边框间的距离为0，设table的样式为：border-collapse:collapse。
4.设置网页版权信息：用符号© 要用字体：font-family:arial;
5.用中文字体时，用12像素和14像素的文字，原因是这两个字体大小既保证了可读性看上去还很美观，但是如果作为标题来说，14像素大小的文字有时也显得过于小了，这时候22或者24像素的大小也许更为适合。再比如黑体相较于宋体很少用在正文中，原因也是一般正文14像素大小的黑体可读性不如宋体好，但是如果放在设计某些宣传口号中，黑体也许更为合适。
6.对于英文来说，网页设计中常会涉及到非衬线字体中的Arial，Tahoma，Verdana以及衬线字体中的Georgia字体，这些都是会经常用到的字体。
7.banner文字排列混搭的设计：http://www.chinaui.com/Knowledge/20120920/14021209170006.shtml
①大小和颜色的混搭
②排列组合的混搭
③不同字体之间的混搭
④中英文字体的混搭
文字的倾斜与斜切
让文字形成相对独立的区域
文字变形的魅力
文字的3D应用
生活中的字体元素
犹抱琵琶半遮面
8. 页面模块的常用命名：
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
小技巧：tips
9.标题+标题的一个列表:“dl+dt+dd”组合
10.img标签边框的重置:img{border:none;}
11. 当第三层的img转化为块状元素，根据W3C规范，内联元素是不能包含块状元素的，我们还必须把第二层的链接a，也要转化为块状元素，用“display:block; ”。
12.为了保证在网速比较慢的情况下，logo图片还未加载完成之时，先显示有颜色背景，增强用户体验！
13.IE6的双倍边距Bug:display:inline;
14.预览页面后，发现字体变了，但是大小却没有变化，原因是由于浏览器存在默认样式表产生的，所以我们就需要对h1进行重置，如下： h1{font-size:100%;}
15.目的是将做好的小红点图片dot.gif设置为dd的背景且不平铺，距离dd左侧的距离为7px，上面的距离为10px；( background:url(../images/dot.gif) no-repeat 7px 10px;)
16.若想把一个定位属性为absolute的元素定位于其父级元素内，必须满足两个条件：
a.设定TRBL,TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)
b.父级设定Position属性
17.属性为relative的元素可以用来布局页面，属性为absolute的元素用来定位某元素在父级中的位置，既然属性为absolute的元素用来定位某元素在父级中位置，就少不了TRBL（TOP、RIGHT、BOTTOM、LEFT）
18.CSS Hack是解决页面不能很好兼容多种浏览器的技巧方法，是一种方法:
两个最常用的CSS Hack:
a.!important
作用：用来解决一些在IE6上显示的效果与IE7/IE8/IE9/FireFox上的效果不一样的情况。比如有下面的一段代码：
e.g.
#content{
height:960px !important;
height:900px;
}
b.*(星号)
作用：用来解决一些在IE6/IE7上显示的效果与IE8/IE9/FireFox上的效果不一样的情况。比如有下面的一段代码：
e.g.
#content{
height:960px;
*height:900px;
}
19.单图片按钮实例(CSS Sprites、CSS精灵)(http://www.w3cfuns.com/article-264-1-1.html,即一图片有多个按钮图怎么用，链接已无效)
20.对于"text-indent:2em;"属性，只能加在块状元素上面，内联元素是不起作用的。
21.加上之后，会瞬间让你网站的所有链接变得生动起来，只有IE9以上版本，和非IE浏览器才有效果。
a,a * {cursor: pointer;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;}
22.ul { list-style:none; font-size:0; } font-size:0; 是为了去掉 <li>之间由于换行而产生的3px的间距。当然了，解决这个问题方法不只一个，比如：也可以用margin-right:-3px;
23.由于ie6、7不支持display:inline-block， 所以我们用*display:inline; zoom:1;解决这个问题。
24.如果li高度不同或者文字字数不同，用float:left;布局就全乱了,可以利用display:inline-block;完美的解决这个问题。
25.响应式设计的媒体查询(media queries)，它可以帮助你根据浏览器尺寸对网页中的元素信息相应的布局调整，当然你还可以借助css3的一些新的特性，添加一些过渡效果。无论你是用框架还是自己写的媒体查询方式，你就会感受到它自身灵活的地方，以及给你的网站带来更加完美的用户体验。
e.g.
@media screen and (max-width: 660px) {
.layout {
width:570px;
}
.box {
width:170px;
}
.box:last-child {
opacity:0;
}
}
26. 在IE6中没有min-width的概念，其默认width就是min-width，所以有时字体过多它会选择撑开容器。
IE6无法定义1px左右高度的容器，是因为默认的行高造成的,解决的方法也有很多, 例如: overflow:hidden zoom:0.08 line-height:1px
使用margin ： 0 auto；方法使容器居中依然在IE6中行不通，我们要对其父容器使用
27.
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/W3CfunsLogo.png");
28.浏览器中展示网页文字内容时，文字字体都会按照设计师在css中定义的字体族的顺序来进行显示。什么是字体族？字体族就是你在css代码中看到“font-family”的代码内的一类字体名称，例如下面这行代码：
font-family:"Comic Sans MS","幼圆","黑体",sans-serif;
按照W3C标准，浏览器在解析一行代码时首先会在系统中查找Comic Sans MS字体，如果系统内存在这个字体那么浏览器就会使用Comic Sans MS字体，如果没有的话就接着查找幼圆字体，以此类推直到浏览器可以表达系统存在的字体为止。
29.注意了，“sans-serif”不是某个字体的名称，而是一种在前面叙述的字体都无效时而最终选用的字体，称为浏览器通用字体，它取决于你所用的浏览器默认的通用字体是什么，可能是“Arial”，也有可能是“Helvetica”。
30.网页常用字体通常分为5类：serif(衬线)、sans-serif(无衬线)、monospace(等宽)、fantasy(梦幻)、cuisive(草体)，这些通用的名称允许用户代理从相应集合中选择一款字体。
serif 字体在字符笔画末端有叫做衬线的小细节，这些细节在大写字母中特别明显。
sans-serif 字体在字符笔画末端没有任何细节，与serif字体相比，他们的外形更简单。
monospace 字体，每个字母的宽度相等，通常用于计算机相关书籍中排版代码块。
fantasy 和 cuisive 字体在浏览器中不常用，在各个浏览器中有明显的差异。
31.网页常用字体
Sans-serif:
Helvetica: 被评为设计师最爱的字体，Realist风格，简洁现代的线条，非常受到追捧。在Mac下面被认为是最佳的网页字体，在Windows下由于Hinting的原因显示很糟糕。
Arial: Helvetica的「克隆」，和Helvetica非常像，细节上比如R和G有小小差别。如果字号太小，文字太多，看起来会有些累眼。Win和Mac显示都正常
Lucida Family: Lucida Grande是Mac OS UI的标准字体，属于humanist风格，稍微活泼一点。Mac下的显示要比Win下好。
Verdana: 专门为了屏显而设计的字体，humanist风格，在小字号下仍可以清楚显示，但是字体细节缺失严重，最好别做标题。
Tahoma: 也是humanist风格，字体和Verdana有点像，但是略窄一些，counter略小，曾经是Windows的标准字体，Mac 10.5之后默认也有安装。
Trebuchet MS: 为微软设计的一个humanist风格字体，个人觉得个性太过突出，用得不好会不搭。
Serif：
Georgia: 基本上适合正文屏显的衬线字体，非Georgia莫属了。笔画粗重，衬线明线，轮廓较大，小字体显示也很清晰，同时细节还算OK。
Times: Times是为了报纸而设计的，特点是可以在有限的空间塞进去更多的文字，笔画较弱，小字号正文屏显看起来累眼。曾经Engadget改版的时候用了Times作为正文，被骂得很惨之后换成了Georgia。
中文：
宋体：Win最常见的字体，小字体点阵，大字体TrueType，但是大字体并不好看，所以最好别做标题。
微软雅黑：Vista之后新引入的字体，打开Cleartype之后显示效果不错，不开Cleartype发虚。
华文细黑：Mac下的默认中文。
32.一般英文安全字体：Times New Roamn、Arial、Comis Sans MS等
中文当然是楷体、仿宋、宋体、黑特等这些国标字了。
2.显示table边框，设table的td为：border:1px solid 颜色。
3.设置table的边框间的距离为0，设table的样式为：border-collapse:collapse。
4.设置网页版权信息：用符号© 要用字体：font-family:arial;
5.用中文字体时，用12像素和14像素的文字，原因是这两个字体大小既保证了可读性看上去还很美观，但是如果作为标题来说，14像素大小的文字有时也显得过于小了，这时候22或者24像素的大小也许更为适合。再比如黑体相较于宋体很少用在正文中，原因也是一般正文14像素大小的黑体可读性不如宋体好，但是如果放在设计某些宣传口号中，黑体也许更为合适。
6.对于英文来说，网页设计中常会涉及到非衬线字体中的Arial，Tahoma，Verdana以及衬线字体中的Georgia字体，这些都是会经常用到的字体。
7.banner文字排列混搭的设计：http://www.chinaui.com/Knowledge/20120920/14021209170006.shtml
①大小和颜色的混搭
②排列组合的混搭
③不同字体之间的混搭
④中英文字体的混搭
文字的倾斜与斜切
让文字形成相对独立的区域
文字变形的魅力
文字的3D应用
生活中的字体元素
犹抱琵琶半遮面
8. 页面模块的常用命名：
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
小技巧：tips
9.标题+标题的一个列表:“dl+dt+dd”组合
10.img标签边框的重置:img{border:none;}
11. 当第三层的img转化为块状元素，根据W3C规范，内联元素是不能包含块状元素的，我们还必须把第二层的链接a，也要转化为块状元素，用“display:block; ”。
12.为了保证在网速比较慢的情况下，logo图片还未加载完成之时，先显示有颜色背景，增强用户体验！
13.IE6的双倍边距Bug:display:inline;
14.预览页面后，发现字体变了，但是大小却没有变化，原因是由于浏览器存在默认样式表产生的，所以我们就需要对h1进行重置，如下： h1{font-size:100%;}
15.目的是将做好的小红点图片dot.gif设置为dd的背景且不平铺，距离dd左侧的距离为7px，上面的距离为10px；( background:url(../images/dot.gif) no-repeat 7px 10px;)
16.若想把一个定位属性为absolute的元素定位于其父级元素内，必须满足两个条件：
a.设定TRBL,TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)
b.父级设定Position属性
17.属性为relative的元素可以用来布局页面，属性为absolute的元素用来定位某元素在父级中的位置，既然属性为absolute的元素用来定位某元素在父级中位置，就少不了TRBL（TOP、RIGHT、BOTTOM、LEFT）
18.CSS Hack是解决页面不能很好兼容多种浏览器的技巧方法，是一种方法:
两个最常用的CSS Hack:
a.!important
作用：用来解决一些在IE6上显示的效果与IE7/IE8/IE9/FireFox上的效果不一样的情况。比如有下面的一段代码：
e.g.
#content{
height:960px !important;
height:900px;
}
b.*(星号)
作用：用来解决一些在IE6/IE7上显示的效果与IE8/IE9/FireFox上的效果不一样的情况。比如有下面的一段代码：
e.g.
#content{
height:960px;
*height:900px;
}
19.单图片按钮实例(CSS Sprites、CSS精灵)(http://www.w3cfuns.com/article-264-1-1.html,即一图片有多个按钮图怎么用，链接已无效)
20.对于"text-indent:2em;"属性，只能加在块状元素上面，内联元素是不起作用的。
21.加上之后，会瞬间让你网站的所有链接变得生动起来，只有IE9以上版本，和非IE浏览器才有效果。
a,a * {cursor: pointer;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;}
22.ul { list-style:none; font-size:0; } font-size:0; 是为了去掉 <li>之间由于换行而产生的3px的间距。当然了，解决这个问题方法不只一个，比如：也可以用margin-right:-3px;
23.由于ie6、7不支持display:inline-block， 所以我们用*display:inline; zoom:1;解决这个问题。
24.如果li高度不同或者文字字数不同，用float:left;布局就全乱了,可以利用display:inline-block;完美的解决这个问题。
25.响应式设计的媒体查询(media queries)，它可以帮助你根据浏览器尺寸对网页中的元素信息相应的布局调整，当然你还可以借助css3的一些新的特性，添加一些过渡效果。无论你是用框架还是自己写的媒体查询方式，你就会感受到它自身灵活的地方，以及给你的网站带来更加完美的用户体验。
e.g.
@media screen and (max-width: 660px) {
.layout {
width:570px;
}
.box {
width:170px;
}
.box:last-child {
opacity:0;
}
}
26. 在IE6中没有min-width的概念，其默认width就是min-width，所以有时字体过多它会选择撑开容器。
IE6无法定义1px左右高度的容器，是因为默认的行高造成的,解决的方法也有很多, 例如: overflow:hidden zoom:0.08 line-height:1px
使用margin ： 0 auto；方法使容器居中依然在IE6中行不通，我们要对其父容器使用
27.
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/W3CfunsLogo.png");
28.浏览器中展示网页文字内容时，文字字体都会按照设计师在css中定义的字体族的顺序来进行显示。什么是字体族？字体族就是你在css代码中看到“font-family”的代码内的一类字体名称，例如下面这行代码：
font-family:"Comic Sans MS","幼圆","黑体",sans-serif;
按照W3C标准，浏览器在解析一行代码时首先会在系统中查找Comic Sans MS字体，如果系统内存在这个字体那么浏览器就会使用Comic Sans MS字体，如果没有的话就接着查找幼圆字体，以此类推直到浏览器可以表达系统存在的字体为止。
29.注意了，“sans-serif”不是某个字体的名称，而是一种在前面叙述的字体都无效时而最终选用的字体，称为浏览器通用字体，它取决于你所用的浏览器默认的通用字体是什么，可能是“Arial”，也有可能是“Helvetica”。
30.网页常用字体通常分为5类：serif(衬线)、sans-serif(无衬线)、monospace(等宽)、fantasy(梦幻)、cuisive(草体)，这些通用的名称允许用户代理从相应集合中选择一款字体。
serif 字体在字符笔画末端有叫做衬线的小细节，这些细节在大写字母中特别明显。
sans-serif 字体在字符笔画末端没有任何细节，与serif字体相比，他们的外形更简单。
monospace 字体，每个字母的宽度相等，通常用于计算机相关书籍中排版代码块。
fantasy 和 cuisive 字体在浏览器中不常用，在各个浏览器中有明显的差异。
31.网页常用字体
Sans-serif:
Helvetica: 被评为设计师最爱的字体，Realist风格，简洁现代的线条，非常受到追捧。在Mac下面被认为是最佳的网页字体，在Windows下由于Hinting的原因显示很糟糕。
Arial: Helvetica的「克隆」，和Helvetica非常像，细节上比如R和G有小小差别。如果字号太小，文字太多，看起来会有些累眼。Win和Mac显示都正常
Lucida Family: Lucida Grande是Mac OS UI的标准字体，属于humanist风格，稍微活泼一点。Mac下的显示要比Win下好。
Verdana: 专门为了屏显而设计的字体，humanist风格，在小字号下仍可以清楚显示，但是字体细节缺失严重，最好别做标题。
Tahoma: 也是humanist风格，字体和Verdana有点像，但是略窄一些，counter略小，曾经是Windows的标准字体，Mac 10.5之后默认也有安装。
Trebuchet MS: 为微软设计的一个humanist风格字体，个人觉得个性太过突出，用得不好会不搭。
Serif：
Georgia: 基本上适合正文屏显的衬线字体，非Georgia莫属了。笔画粗重，衬线明线，轮廓较大，小字体显示也很清晰，同时细节还算OK。
Times: Times是为了报纸而设计的，特点是可以在有限的空间塞进去更多的文字，笔画较弱，小字号正文屏显看起来累眼。曾经Engadget改版的时候用了Times作为正文，被骂得很惨之后换成了Georgia。
中文：
宋体：Win最常见的字体，小字体点阵，大字体TrueType，但是大字体并不好看，所以最好别做标题。
微软雅黑：Vista之后新引入的字体，打开Cleartype之后显示效果不错，不开Cleartype发虚。
华文细黑：Mac下的默认中文。
32.一般英文安全字体：Times New Roamn、Arial、Comis Sans MS等
中文当然是楷体、仿宋、宋体、黑特等这些国标字了。
346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
