做个笔记，具体实现效果看下面图片，偶不知如何用语言来描述了。具体原理偶也说不清了，反正能解决了问题就是王道。

具体数值是随行内缩进的距离变动的，上图的距离需要12pt，距离越远数值也就跟随着越大，反之，亦然。

利用li配合list-style-type的decimal来实现固然简单，但是如果需要复制文字再粘贴后保留前面数值，那么就…

3款字体在浏览器下的表现，测试用的是IE8，IE6下有不同

微软雅黑这款字体的设计具有个性独特、结体优美、识别性强、块状效果好、显示清晰等优点。好多的设计师都喜欢使用这款字体，其确实漂亮，大方得体，不过在网页里使用还是有点小问题要提的。由于该字体并不是人人电脑都有，那么系统没有微软雅黑字体的时候，就肯定需要后续字体来做殿后工作，如果没设置后续字体则默认是“宋体”，有些朋友可能不满足于“宋体”来殿后，会选择使用“黑体”，问题在这里有浮出水面了！

黑体，加粗后，笔画太粗，聚成一堆，可读性很差，字体>30px后问题逐渐减轻，随着数值的增加得到改善。宋体，不会出现类似问题。

这样我们得出一个结论：当添加“粗体”属性时，后续字体使用“宋体”；那么相反，无“粗体”属性时，后续字体可以使用“黑体”。

这样就比较简单的避免了黑体后续加粗难看的问题了！

这样的导航看起来挺复杂，做起来其实挺简单，只是IE6要用到滤镜来确保PNG的透明。万恶的IE6啊！

这里还用到inline-block，IE不支持inline-block，hack给inline，IE6下给定zoom也能解决，再利用负方向的margin值将透明部位重叠。

关键css:

预览效果：不规则的导航条

下载文件：点击下载

前段时间将Dreamweaver升级了一下，只是升级到CS3的版本。用起来没觉得有明显的变化，操作习惯还能继续维持。

有一点，让我苦恼了好几天。就在关于代码缩进的问题，我的习惯一直是以Tab作为缩进，但是当我在写代码时敲回车就会将后面一行的缩进变为空格，虽然距离是一样的，看上去相同，但是心里总是不爽，想找出问题的究竟，一开始还真没找到，后来突然在“首选参数”项里找到了相应的设置选项。终于得以解决。

解决办法：“编辑” -> “首选参数” -> “代码格式” -> “缩进”

顺便说句，本人目前还是认为写代码最快最便捷的工具就是Dreamweaver。EditPlus虽然打开速度很快，但是其他方面是远不如她的，EditPlus用于编写JS和代码的修改还是不错的选择。搜狗拼音输入法经常导致Dreamweaver崩溃，原因不清楚，还在忍耐中，哪天不爽了卸掉它，装谷歌家的。

先上PP，容易明白此文内容。

不需要用到脚本(js)，仅css中transform属性(firefox文档, safari文档)，适当设置“值”，就能实现很酷的3d效果。

浏览器支持：Safari 3.2+, Google Chrome, Firefox 3.5+

基本是个华而无实的效果了，呵呵！玩玩还是不错的！

html：

css：

看个例子：

3d演示文档 – 注意：Safari 3.2+, Google Chrome, Firefox 3.5+才能显示正确效果

本来出处：http://www.fofronline.com/2009-04/3d-cube-using-css-transformations/

首先在前端开发的角度BS一下IE8，说什么支持CSS3，现在看来，前端开发的同鞋们还得等IE9，甚至可能IE10！因为大部分它还是没有支持，不过还是有个“安慰奖”滴！

CSS3是个好东西，能支持它的浏览器都是好样的！Safari, Firefox, Opera(支持部分)。好久没做笔记了！

note:

1. 去css3.info看看
2. 直接预览css带来的新体验
3. 不喜欢读洋文的，可以看看这里

这个css的升级，着实是帮了前端人员不小的“忙”，可惜的是浏览器们没赶上！不过，众多新加的功能中，个人认为真正有实用价值的也没几个！最有用的，当属“圆角(radius)”，其次“阴影(shadow)”、背景图像大小及数量(多背景)、嵌入字体(洋文的可能用得上)、透明度(opacity)、rgba等效果,剩下的就基本是华而无实了！最重要的，现在IE7、IE8都还和它们没“混熟”，默默期待吧！

以前装的1.0版本，个人一直都认为对于blog而言过于严格，很多项都是直接和服务器的配置有关，而小空间，人家提供商未必会将服务做到这等地步，因此一直以来就没花心思在这上面。

现在升级2.0.0b3了，专门提供了Small Site or Blog检测的选项(1.0时期很少关注，不知道是否也有)，非常不错！初测得了个B，问题不大，减少些http的请求以及Reduce DNS lookups估计就到A了。

升级或安装：

1. 如果你已经安装了低版本，打开Firefox-工具-附加组件-扩展-查找更新-确认更新。即可！
2. 尚未安装过的，且没装过firebug的，请先下载安装firebug，再下载安装Yslow2，即可！

先看看demo，有了inline-block，就可以某种程度上代替了float啦！

支持的：FF3、IE8、Safari、Opera、Chrome

未支持的：IE6、IE7、FF2

下面我们就一一来解决它。

解决FF2：display: -moz-inline-stack 由于FF2未与display:inline-block“达成共识”！但有这一私有属性能顶顶也不错。

解决IE系列：display:inline 针对IE系列，切记需要触发layout，这里使用的是zoom:1。IE7下需要单独设置该值为inline，那么利用星号Hack干掉它！

至此这3个浏览器的兼容性得到解决，可惜的是，直接用于项目里是不放心的，等待着IE8的普及吧！不过及早的了解它未尝不是一桩妙事！

最后总结一下：

推荐阅读：

模拟兼容性的 inline-block 属性

跨浏览器的inline-block