<script type="text/javascript">
function S(i) { return document.getElementById(i); }
function download( evt, fid){
 var _event = evt ? evt : event;
 var _target = evt ? evt.target : event.srcElement;
 var _p = S( "downloadPanel" );
 _p.style.top = _event.clientY + document.body.scrollTop ;
 _p.style.left = ( _event.clientX + document.body.scrollLeft < 160 ? _event.clientX + document.body.scrollLeft + 10  : _event.clientX  + document.body.scrollLeft - 120 );
 Show( "downloadPanel" , true );
 _p.focus();
}
function Show(obj, bShow) {
 obj = (typeof(obj) == "string" ? S(obj) : obj);
 if (obj) obj.style.display= (bShow ? "" : "none");
}
function hideDownloadPanel( evt ){
 Show( "downloadPanel" ,false);
}
function checkClick(evt){
 var _target = evt ? evt.target : event.srcElement ;
 var _id = _target.id;
 if( _id == "" ){
  _id = _target.parentNode.id;
 }
 if( _id !="downloadDirect"  &&  _id != "downloadAgent"  &&  _id != "downloadPanel"  &&  _id.indexOf( "downloadFile_" ) < 0  &&  _id.indexOf( "downloadLink_" ) < 0 ){
  Show( "downloadPanel" , false );
 }
}
window.onload = function(){
 document.body.onclick=checkClick;
}
</script>

<style type="text/css">
html,body{
 font-size:12px;
}
img {border:none}
a {color:#4d5d2c;text-decoration:underline;cursor:pointer;}
.pointer {cursor:pointer;}
.right {float:right}
.right img{margin:0 0 0 6px}
.infobar {background:#fff9e3;border:1px solid #fadc80;color:#743e04;margin-bottom:10px;padding:8px 20px 4px 20px;}
</style>

<div id="downloadPanel" style="position:absolute;top:0px;left:0px;width:160px;z-index:999;padding:6px 2px 6px 10px;border:1px solid #fb7;display:none;" class="infobar">
 <img src="http://res.mail.qq.com/zh_CN/htmledition20080612/images/ico_closetip_gray.gif" class="right pointer" onclick="hideDownloadPanel();" title="关闭" />
 <div class="">下载方式：</div>
 <div style="padding:6px 0 0 0;"><a id="downloadDirect">直接下载</a>    <a id="downloadAgent" style="cursor:pointer;text-decoration:underline;"  title="用QQ超级旋风下载本文件" >使用旋风下载</a><span class="addrtitle" style="display:none;" id="downloadQQDownload">安装<a href="http://im.qq.com/cyclone/download.shtml" target="_blank" onclick="alert('安装超级旋风后，重新启动浏览器即可使用旋风进行下载。');" title="您还未安装超级旋风下载软件，点击这里下载安装。">旋风</a>下载</span></div>
 <div class="addrtitle" style="padding:6px 0 0 0;">
 (提取码：<span id="downloadCode">XXXXXXX</span>)
 </div>
</div>
<a id="downloadLink_001"  title="" onclick="download( event, 'downloadLink' );" >下载</a><br/>
<a id="downloadLink_002"  title="" onclick="download( event, 'downloadLink' );" >下载</a><br/><br/><br/>
<a id="downloadLink_003"  title="" onclick="download( event, 'downloadLink' );" >下载</a><br/><br/><br/><br/><br/><br/>
<a id="downloadLink_004"  title="" onclick="download( event, 'downloadLink' );" >下载</a><br/><br/><br/><br/><br/><br/><br/><br/>

<script src="http://www.zstar.cc/demo/scroll/scroll.js" type="text/javascript"></script>
<style type="text/css">
html body {
overflow:hidden;
margin:0;
padding:0;
font: 11px Arial, Helvetica, sans-serif;
color: #FFF;
background-color: #000000;
}
#content1 {
position: absolute;
margin:0; padding:0;
top: 90px;
left: 221px;
width: 485px;
height: 355px;
font-size: 11px;
line-height: 24px;
color: #FFF;
}
/* scroller */
#scrollerContainer {
position:absolute; width:375px; height:290px; clip:rect(0,375px,290px,0); overflow:hidden; z-index:6;
}
#scrollerContent {
position:absolute; left:0; top:0; width:375px;
}
#scrollerButtons {
position: absolute;
top: 37px;
left: 410px;
width: 30px;
height: 300px;
}
#scrollerButtons #up {
position: absolute;
top: 0px;
left: 0;
width: 15px;
height: 15px;
background: url(http://www.zstar.cc/demo/scroll/arrowup.gif) top left no-repeat;
z-index: 2;
cursor:pointer;
}
#scrollerButtons #track {
position:absolute;
top: 20px;
width:15px;
height:131px;
background: url(http://www.zstar.cc/demo/scroll/scrollbar_bg.gif) top left no-repeat;
z-index: 3;
}
#scrollerButtons #drag {
position: absolute;
top: 20px;
left: 0;
width: 15px;
height: 28px;
background: url(http://www.zstar.cc/demo/scroll/scrollbar.gif) top left no-repeat;
z-index: 4;
cursor:pointer;
}
#scrollerButtons #down {
position: absolute;
top: 156px;
left: 0;
width: 15px;
height: 15px;
background: url(http://www.zstar.cc/demo/scroll/arrowdown.gif) top left no-repeat;
z-index: 5;
cursor:pointer;
}
</style>
<div id="content1">
<div id="scrollerContainer">
<div id="scrollerContent"> <b>Natalia Mager Sacasa - Senior Director</b> <br />
<b>Vanessa Critchell - Director (West Coast)</b> <br />
<b>Alix Rice - Associate Director</b> <br />
<b>Kristen Becker - Associate Director</b> <br />
<b>Lisa Varghese - Associate Director</b> <br />
<b>Caroline Burghardt- Director of Publications, Archives<br>
and Reproductions Rights</b> <br />
<b>Alice Bauza - Bookkeeper - Accounts Payable</b> <br />
<b>Gabriella Artinian - Bookkeeper - Accounts<br>
Receivable</b> <br />
<b>Sophie Aschauer - Gallery Manager</b> <br />
<b>Josh Brown - Registrar</b> <br />
<b>Karen Gilbert - Associate Registrar</b> <br />
<b>Donovan Barrow - Senior Preparator</b> <br />
<b>Junpei Murao - Assistant Registrar</b> <br />
<b>Tiffany Edwards - Assistant Archivist</b> <br />
<b>Sarah Bock - Gallery Assistant and Book Sales</b> <br />
<b>Monica Schwerin - Gallery Assistant</b> <br />

</div></div>
<div id="scrollerButtons">
<div id="up"></div>
<div id="track"></div>
<div id="drag" style="top:20px; z-index: 4;"></div>
<div id="down"></div>
</div>
</div>

由下往上的： <div id="demo" onmouseover="ij=1" style="border:1px solid gray; overflow: hidden; height: 119px; width:211px " onmouseout="ij=0"> <div id="demo1">1<br />2br>3<br>4<br>5<br>6<br>7<br>8<br>9<br> 可以是任何的HTML内容<br> <font color="red">HTML</font><br> </div> <div id="demo2"></div> </div>

如果输入的字符数超过textarea的原定宽度
warp属性可以用来设定textarea中的文字如何换行
off 停用单词换行
hard(physical) 启用单词换行
soft(virtual) 启用单词换行，但不传送用户输入的换行符
DW中的default是缺省值off

一个比较完美的spacer div技巧

A wonderful "spacer div" trick

　　为了解决浮动元素引起父元素无法获得高度的问题，我们一般在子元素的最后加上一个Spacer Div（clear:both）。但是IE和Mozilla对div的解释不同引起一些表现上的差异。

　　最简单的Spacer：

.HackBox{clear:both;}

　　IE可以正确地产生预期的效果，但是在Mozilla中不起作用。所以现在很多人是这么用的

.HackBox{ height:0; clear:both;}

　　然后XHTML中加入一个&nbsp；，如下：

<div class="HackBox">&nbsp;</div>

　　这回IE和Mozilla都起作用了，但是IE并不认 height:0;　这个规则，结果IE中的这个Spacer Div就占了一定的高度，影响布局。

　　经过N次实验，我发现用下面的方法能比较完美的解决这个问题。

.HackBox{
border-top:1px solid transparent !important;
margin-top:-1px !important;
border-top:0;
margin-top:0;
clear:both;
visibility:hidden;
}

　　其实IE只需要有clear:both;这一条就可以实现我们的要求。那么下面这两条规则有什么用呢？

border-top:1px solid transparent;
margin-top:-1px;

　　第一条规则产生1px的一个透明的上边框，第二条将margin-top设置为-1，以抵消这条边框对布局产生的影响。

　　但是不幸的是IE不支持transparent这个值，它会将这条边框变为黑色-_-

　　不幸中的万幸是IE这小子还有一个不支持的值，就是!important，IE会忽略这它而选择按后面两条显示，结果就是不显示边框（也就是只有clear:both;起作用了）。而Mozilla却会按!important指出的规则显示。

　　由此，一个相对完美的Spacer Div就产生了^_^