pre标签用来显示预格式(preformatted)文本，实际应用中我一般用来显示各种代码。
以前通常会给pre定义这样的CSS，使pre不被过长的文本撑破，而出现滚动条:
pre { overflow: auto; width: 515px; }但是当横向、纵向滚动条同时存在时，很让人抓狂。于是在CSS 3中，white-space有了一个新的值pre-wrap，再加上一些浏览器的私有属性，我们就得到了解决方案：
pre {
white-space: pre-wrap; /* 支持css 3的浏览器 */
white-space: -moz-pre-wrap; /* 老版Mozilla*/
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* IE 5.5以上 */
}
textmate 一直是我比较喜欢的编辑器，其中一个原因就是可自定义的代码着色功能，并且可以把你自定义的配色方案输出成themes，跟大家分享。minimal Theme 就是一个我比较喜欢的配色主题。（比较喜欢褐色调）
另外作者还发布了两个不错的textmate Bundle,TextMate HTML Bundle 和 TextMate CSS bundle，强化了自带的同名Bundle，适合html coder.
opacity是CSS 3里的一个属性，用来设定元素的透明度。当然现在还只有少部分浏览器支持。
不过各个浏览器都有自己的私有属性来支持,其中包括老版本的Mozilla和Safari：
filter:alpha(opacity)-moz-opacity-khtml-opacity很不幸的是，你没看见Opera，老版本的Opera并没有什么私有属性可以代替opacity。（新版Opera已经支持opacity）
所以以前用CSS设定一个元素半透明的话，可能会这样写:
.opacity{
filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5; /* 老版Mozilla */
-khtml-opacity:0.5; /* 老版Safari */
opacity: 0.5; /* 支持opacity的浏览器*/
}用javascript来设定一个元素为半透明:
object.filter = "alpha(opacity=" + opacity + ")"; /* IE */
object.MozOpacity = (opacity / 100); /* 老版Mozilla */
object.KhtmlOpacity = (opacity / 100); /* 老版Safari */
object.opacity = (opacity / 100); /* 支持opacity的浏览器*/还在使用mootools的时候，就非常喜欢这个Accordion（折叠菜单）效果，特别是slideUp和slideDown的滑动，接近flash的效果。今天我们就来用jquery来制作一个简单的Accordion效果。
首先准备好html结构，因为是针对sandbox template，它的sidebar结构是这样的：
<div class="sidebar">
<ul class="xoxo">
<li class="widget">
<h3 class="widget-title">content 1</h3>
<ul>
<li>this is content under content 1</li>
<li>this is content under content 1</li>
</ul>
</li>
<li class="widget">
<h3 class="widget-title">content 2</h3>
<ul>
<li>this is content under content 2</li>
<li>this is content under content 2</li>
</ul>
</li>
</ul>
</div>有了结构，我们就可以开始对结构做文章了，先把所有需要折叠的内容先隐藏：
$('li.widget > ul').hide();这里我们使用的 > 相似于CSS中的一级子元素选择符，隐藏所有第一级的ul元素。
接着我们设定折叠的控制器，本例中我们使用h3：
$('li.widget > h3').click(function() {
var content = $(this).next();
content.slideToggle('fast');
});用next()来获得跟h3平级的下一个元素，也就是我么不能够结构中的ul，然后用slideToggle来执行折叠动作，也就是slideUp和slideDown。这时候我们已经可以进行正常的折叠操作了，但是我想要做到同时只能展开一个内容，该如何处理？
其实也不难，jquery的Selectors很强大，看看怎么做：
var others = content.parent().siblings("li.widget").find("ul:visible");这里的parent()用来获取父元素，find()就是遵循一定的规则（使用Selectors）去查找符合条件的元素，本例中查找li.widget下的所有visible（CSS属性visibility:visible; 也就是本例中被展开的）的ul元素。
最后我们得到这样的内容：
$(document).ready(function(){
$('li.widget > ul').hide();
$('li.widget > h3').click(function() {
var content = $(this).next();
var others = content.parent().siblings("li.widget").find("ul:visible");
if (others.length ) {
others.slideUp('fast', function() {
content.slideToggle('fast');
});
} else {
content.slideToggle('fast');
}
});
});一个简单的效果看这里
