Heluyao的博客 {11gz.com}

实现效果如下图：

这个方法并非我创，我也是以前在网上看到，记下了原理。今天有时间了，整理思路，写出代码！原文我不记得地址了，只记得原作者是google的前端工程师，方法很赞，尽管多了四个空标签(如果不要三角箭头，就只多了外层嵌套的两个标签)。

一般我处理圆角效果，都是弄一张图片，里面放4个角(或更多颜色的角)，利用浮动、相对定位再配合负margin来实现，也要多写空标签，而且是两对嵌套的标签(共4个)。这个方法固然好，毕竟用图片嘛，更美观，锐化效果要好。现在这个方法不用图片，从优化的角度分析，纯css不是更好吗！不过弊端还是有，只适合半径1-2像素的圆角，大了锯齿就出来啦～

如果需要实现多种颜色，那么可以将定义颜色的样式属性抽出来，单独弄一个类，比如灰色，新建个gary类，放在最外层标签上，控制好颜色。想实现几种就建几种。代码如下：

第一个div添加gray这个类：

以下css添加至样式表最后一行，再将前面控制颜色的属性删掉：

接手新项目，要写一个如上图的东西，简单做个说明：外层盒子固定宽度，文章标题字数超出即隐藏，并实现省略号(支持的浏览器)，日期位置跟随标题宽度。

难度不大，关键要了解各浏览器的特性。这个东西难点就在于时间元素上，我利用float+负margin来解决，兼容性也好，遗憾的是hack没少用，实属无奈啊！-_-!

下面贴出代码：

css第4行， _background:transparent 解决IE6下“莫名”行高问题。

css第5行， _position:relative 解决IE6下该元素随外层宽度溢出隐藏。

css reset这里未提供，需自行添加。

用到图片一张：num.gif 打开后右键另存为！

正常盒模型：

实际显示宽度 = 设置的width或height + 边框 + 填充

IE 5.x及更前的版本：

实际显示宽度 = 设置的width或height(边框和填充被包含在里面)

怪异模式的IE8以下版本将使用IE5的盒模型，这点很重要，要记清了！

　　盒子宽度未定义且是静态(没有浮动)或者相对定位的，宽度为100%，边框和填充会向内推动，而不是向外扩展。若明确设置宽度为100%，那么则相反。

　　绝对定位盒子，没设置宽度，宽度则跟随内容自动缩放，只受相对定位的外层元素的宽度影响而换行，切记body是一个相对定位的盒子。

　　浮动盒子，没设置宽度，与绝对定位的盒子相似。不同点是受外层元素的宽度影响而换行（该元素不需要设置相对定位）。

　　块级元素，上下边界会重合，以数值较大一方为基准。浮动的块级元素不会有此问题。块级元素不能为内联元素的子元素。

　　内联元素，行与行之间的距离不受边界和填充的影响。不过，内联元素也是盒子，也有边距、填充、边框，只是变现得有点“反常”。

　　边界值可为负，填充值不可为负。

　　下节准备补习：浏览器模式(怪癖模式、标准模式、准标准模式)

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

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

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

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

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

关键css:

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

下载文件：点击下载

先上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/

这些CSS Selector，目前可能还不适合用在实际项目中。但是将来是肯定能开创一片天地的。只要IE6“倒下”！

CSS2：除IE6外当前主流浏览器都是支持滴！
A > B  匹配A的子元素B
A:first-child  匹配父元素的第一个子元素是A的A
A + B  匹配紧贴着A后面的B
A[property]  匹配含property属性的A
A[property="warning"]  匹配property属性完全等于warning的A(注意“完全等于”)
E[property~="warnging"]  匹配property属性包含warning的A(仅“包含”)

CSS3
A ~ B  匹配A以后的所有B，IE6不支持
A:empty  匹配空元素A，IE6、IE7不支持

详细请进：W3C Specification on CSS3 Selectors

　　淘宝是怎么压缩js和css的？他们使用的是YUI Compressor:

The YUI Compressor is a JavaScript compressor which, in addition to removing comments and white-spaces, obfuscates local variables using the smallest possible variable name. This obfuscation is safe, even when using constructs such as ‘eval’ or ‘with’ (although the compression is not optimal is those cases) Compared to jsmin, the average savings is around 20%.

The YUI Compressor is also able to safely compress CSS files. The decision on which compressor is being used is made on the file extension (js or css)

　　淘宝前端的开发环境以Windows居多。为了方便使用，对YUICompressor做了层简单的封装，称之为TBCompressor.

　　今天偶自己试用了一下，的确是非同小可。不仅操作方法简单，而且效率也非常的高！唯一有点麻烦的就是需要安装JDK，并配置JAVA_HONE环境变量。偶本人虽然不懂JAVA，但是以前在学习一本关于AJAX的书时配置过JAVA，因此这次轻车熟路般的顺利完成。

　　测试了几次，大概效率是，1/2！非常不错了吧！

介绍：http://lifesinger.org/blog/?p=464

下载：tbcompressor-2.4.2.zip (808.3 KB)

　　之前一直都使用ECMAScript Cruncher，也是一款非常不错的文件最小化和变量名替换的工具。作者：Thomas Loo。操作起来略显复杂(与TBCompressor)，需要在Windows下运行Esc，并输入一段代码。可以按等级优化代码，一共分四级。这里就不意义介绍了。有兴趣可以去http://www.saltstorm.net/depo/esc/查看相关资料并下载试用！