字号：12px;

最佳行距：18px;段前：0px;段后：18px;

标题1（h1）;

定 “h1=3倍行距”

参考：h1字号为：24px;行距：36px;段前：9px;段后：9px;所以：行高:36+9+9=54=（3*18）

标题2

定 “h1=2倍行距”

参考：h1字号为：18px;行距：24px;段前：3px;段后：9px;所以：行高:24+3+9=36=（2*18）

_________________________________________________________________________________ 

字号：14px;

最佳行距：24px;段前：0px;段后：24px;

利用a的hover及active属性制作点击响应按钮，

例：   点击前                  点击后

查看示例

Html:

<a class='button' href='#'><span>Bring world peace</span></a>

CSS:

a.button {
    background: transparent url('http://www.oscaralexander.com/tutorials/img/bg_button_span.gif') no-repeat scroll top right;
    color: #444;
 

我们可以利用“a:hover span”的定义方式同时定义 a:hover 及 a:hover span 同时发生的两个鼠标hover状态时的页面变化。如 Web Designer Wall 中的 Advanced CSS Menu

效果预览  下载

要点说明：

1.#menu下的3个 a 分别以这样的图片做为背景

overflow:hidden：用于解决溢出，今天在做下图的导航时，应用了此属性，很好地简化了代码：

★ 解决原理：

1.将间隔线做为背景(left top no-repeat)，加margin-left=-1px，这样可0使最左侧的间隔线不显示；

2.将外围div块加 overflow:hidden 属性，用于严格兼容FF，Opera等浏览器（如不加此属性，只有IE下是正常的）。

★ 代码分享：

CSS源码：

#nav ul{display:block;float:left;background:url(../img/

免费的图片造型工具 - shape collage 2.0，刚才下载用了一下，。展示一下成果：

玳瑁帮助：

1. 拖拽图片到“photos”

2.“shape and size”区域设定造型，可设成：长方型、心型、圆型、字母型状、自定义（自己用笔画一个型状）

3.“size”区域设置一些参数，分别是：输出造型大小、单元图片大小、单元图片数量、

Smashing:

http://www.smashingmagazine.com/2008/04/25/free-credit-card-icons-for-online-shops/

Noobr:

http://feedproxy.google.com/~r/noobr/~3/xU_1uW_5GhM/

无废话，直接上链接：

http://noobr.net/2009/02/15-smiley-icon-sets-express-yourself/