H5离线应用offline manifest


    window.applicationCache.addEventListener("checking", function () {
        console.log("checking");
    }, true);
    window.applicationCache.addEventListener("noupdate", function () {
        console.log("noupdate");
        //init code
    }, true);
    window.applicationCache.addEventListener("downloading", function () {
        console.log("downloading");
    }, true);
    window.applicationCache.addEventListener("progress", function (e) {
        console.log("progress", e.loaded, e.total);
        $('#process').html(parseInt(100 * e.loaded / e.total) + '%');
    }, true);
    window.applicationCache.addEventListener("updateready", function () {
        console.log("updateready");
        //init code
    }, true);
    window.applicationCache.addEventListener("cached", function () {
        console.log("cached");
        //init code
    }, true);
    window.applicationCache.addEventListener("error", function () {
        console.log("error");
    }, true);

CSS3动画

        .gif-1 {
            display: block;
            width: 150px;
            height: 220px;
            background: url(images/animation/ku_animation.png) 0 0 no-repeat;
            background-size: 100%;
            animation: ku 0.4s steps(14) infinite
        }

        @keyframes ku {
            from {
                background-position: 0 0;
            }
            to {
                background-position: 0 -3080px;
            }
        }

假设图片为150*3300,为15帧,每帧为150*220则

  1. background-position: 0 -3080px;    -3080为长图height-一帧的高度,即3300-220=3080
  2. animation: ku 0.4s steps(14) infinite     0.4s内完成整个懂的年华,steps为15帧-1=14

CSS控制文字行间距,字符间距

letter-spacing:2px 这个是用来控制字符间距的;

line-height:20px>这个当然就是行间距了,如果跟div的高度一致那就是正好居中了。

另外一个事情要提下,很多人说碰到火狐 IECSS不兼容得问题,我用的反正是常规的方法,所以对于这种兼容性问题倒没有怎么遇到过。2点注意下

1.在使用float:left的时候,左右2个div都要使用。如果就使用一个在IE下是正常,但FF下是不对的。所以两个都用上就没问题

2.我记得是float :left  和margin:left同时使用的时候IE6跟其它的可能不兼容,只要在这个样式里加上diaplay:inline就可以解决问题。

啰嗦几句,其实不管是程序还是HTML静态的开发(我主要是程序上的,呵呵,有时候没办法,硬着头皮在拿到设计图下做下DIV+CSS的布局,其实很头痛这个,最头大的是量尺寸,累人),主要还是那句话,思路,有问题首先自己找各种办法解决,尽量不要朋友问题就群里问,这样很讨别人厌。这点我们还是需要想小日本学习的,尽量不去麻烦别人~~~

嵌入JSP中的CSS显示效果和在HTML中的不一样解决方案

JSP页面中默认为:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

改成:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

CSS和JS标签style属性对照表

CSS 和 JavaScript 标签 style 属性对照表:

盒子标签和属性对照
CSS语法(不区分大小写) JavaScript语法(区分大小写)
border border
border-bottom borderBottom
border-bottom-color borderBottomColor
border-bottom-style borderBottomStyle
border-bottom-width borderBottomWidth
border-color borderColor
border-left borderLeft
border-left-color borderLeftColor
border-left-style borderLeftStyle
border-left-width borderLeftWidth
border-right borderRight
border-right-color borderRightColor
border-right-style borderRightStyle
border-right-width borderRightWidth
border-style borderStyle
border-top borderTop
border-top-color borderTopColor
border-top-style borderTopStyle
border-top-width borderTopWidth
border-width borderWidth
clear clear
float floatStyle
margin margin
margin-bottom marginBottom
margin-left marginLeft
margin-right marginRight
margin-top marginTop
padding padding
padding-bottom paddingBottom
padding-left paddingLeft
padding-right paddingRight
padding-top paddingTop
颜色和背景标签和属性对照
CSS 语法(不区分大小写) JavaScript 语法(区分大小写)
background background
background-attachment backgroundAttachment
background-color backgroundColor
background-image backgroundImage
background-position backgroundPosition
background-repeat backgroundRepeat
color color
样式标签和属性对照
CSS语法(不区分大小写) JavaScript 语法(区分大小写)
display display
list-style-type listStyleType
list-style-image listStyleImage
list-style-position listStylePosition
list-style listStyle
white-space whiteSpace
文字样式标签和属性对照
CSS 语法(不区分大小写) JavaScript 语法(区分大小写)
font font
font-family fontFamily
font-size fontSize
font-style fontStyle
font-variant fontVariant
font-weight fontWeight
文本标签和属性对照
CSS 语法(不区分大小写) JavaScript 语法(区分大小写)
letter-spacing letterSpacing
line-break lineBreak
line-height lineHeight
text-align textAlign
text-decoration textDecoration
text-indent textIndent
text-justify textJustify
text-transform textTransform
vertical-align verticalAlign

滚动div

<div id=demo style="OVERFLOW: hidden; HEIGHT: 235px">
<div id=demo1>
<table cellSpacing=1 cellPadding=0 width="100%" border=0>
    <tbody>
        <tr align=middle bgColor=#ffffff>
            <td><a href="
http://www.yide.com/featuredproducts/product_detail.asp?view=&amp;product_id=7198&amp;category_id=32&amp;category_parentid=5" target=_blank><img height=80 src="http://www.yide.com/editor/z/20060317/1.jpg" width=80 border=0></a></td>
            <td><a href="
http://www.yide.com/featuredproducts/product_detail.asp?view=&amp;product_id=7168&amp;category_id=118&amp;category_parentid=4" target=_blank><img height=80 src="http://www.yide.com/editor/x/2006/0317/1.jpg" width=80 border=0></a></td>
            <td><a href="
http://www.yide.com/featuredproducts/product_detail.asp?view=&amp;product_id=7194&amp;category_id=26&amp;category_parentid=5" target=_blank><img height=80 src="http://www.yide.com/editor/z/20060317/2.jpg" width=80 border=0></a></td>
        </tr>
        <tr align=middle bgColor=#ffffff>
            <td>
            <table cellSpacing=1 cellPadding=0 width="100%" border=0>
                <tbody>
                    <tr>
                        <td>圆头绑带女鞋</td>
                    </tr>
                    <tr>
                        <td>Christian Louboutin</td>
                    </tr>
                    <tr>
                        <td><font color=#ff0033>$ 295.00</font></td>
                    </tr>
                    <tr>
                        <td><font color=#ff0033>¥2404.25</font></td>
                    </tr>
                </tbody>
            </table>
            </td>
            <td>
            <table cellSpacing=1 cellPadding=0 width="100%" border=0>
                <tbody>
                    <tr>
                        <td><font color=#000000>DR-S100 迷你DV </font></td>
                    </tr>
                    <tr>
                        <td>Panasonic</td>
                    </tr>
                    <tr>
                        <td>
                        <p><font color=#ff0033>$ 849.00</font></p>
                        </td>
                    </tr>
                    <tr>
                        <td>
                        <p><font color=#ff0033>¥6,919.35</font></p>
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
            <td>
            <table cellSpacing=1 cellPadding=0 width="100%" border=0>
                <tbody>
                    <tr>
                        <td><font color=#000000>新娘无痕紧身胸衣</font></td>
                    </tr>
                    <tr>
                        <td>Victoria’s Secret </td>
                    </tr>
                    <tr>
                        <td><font color=#ff0033>$&nbsp;48.00</font></td>
                    </tr>
                    <tr>
                        <td><font color=#ff0033>¥</font><span class=red><font color=#ff0033>391.20</font></span></td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>
<table cellSpacing=1 cellPadding=0 width="100%" border=0>
    <tbody>
        <tr>
            <td> </td>
        </tr>
    </tbody>
</table>
<table cellSpacing=1 cellPadding=0 width="100%" border=0>
    <tbody>
        <tr align=middle bgColor=#ffffff>
            <td width="36%"><a href="
http://www.yide.com/featuredproducts/product_detail.asp?view=&amp;product_id=7127&amp;category_id=172&amp;category_parentid=13" target=_blank><img height=80 src="http://www.yide.com/editor/p/2005.10.1/82.6.jpg" width=80 border=0></a></td>
            <td width="28%"><a href="
http://www.yide.com/featuredproducts/product_detail.asp?view=&amp;product_id=7087&amp;category_id=202&amp;category_parentid=15" target=_blank><img height=80 src="http://www.yide.com/editor/p/2005.10.1/82.8.jpg" width=80 border=0></a></td>
            <td width="36%"><a href="
http://www.yide.com/featuredproducts/product_detail.asp?view=&amp;product_id=7022&amp;category_id=186&amp;category_parentid=14" target=_blank><img height=80 src="http://www.yide.com/editor/x/2006/0317/2.jpg" width=80 border=0></a></td>
        </tr>
        <tr align=middle bgColor=#ffffff>
            <td>
            <table cellSpacing=1 cellPadding=0 width="100%" border=0>
                <tbody>
                    <tr>
                        <td><font color=#000000>男表</font></td>
                    </tr>
                    <tr>
                        <td>名士</td>
                    </tr>
                    <tr>
                        <td><font color=#ff0033>$977.00</font></td>
                    </tr>
                    <tr>
                        <td height=12><font color=#ff0033>¥</font><span class=red><font color=#ff0000>7962.55</font></span></td>
                    </tr>
                </tbody>
            </table>
            </td>
            <td>
            <table cellSpacing=1 cellPadding=0 width="100%" border=0>
                <tbody>
                    <tr>
                        <td>足部磨砂护理</td>
                        <tr>
                            <td>碧欧泉</td>
                        </tr>
                        <tr>
                            <td><font color=#ff0033>$&nbsp;15.00</font></td>
                        </tr>
                        <tr>
                            <td><font color=#ff0033>¥122.25</font></td>
                        </tr>
                    </tbody>
                </table>
                </td>
                <td>
                <table cellSpacing=1 cellPadding=0 width="100%" border=0>
                    <tbody>
                        <tr>
                            <td>nike休闲女鞋</td>
                        </tr>
                        <tr>
                            <td>nike</td>
                        </tr>
                        <tr>
                            <td><font color=#ff0033>$&nbsp;39.99</font></td>
                        </tr>
                        <tr>
                            <td><font color=#ff0033>¥</font><span class=red><font color=#ff0000>325.92</font></span></td>
                        </tr>
                    </tbody>
                </table>
                </td>
            </tr>
        </tbody>
    </table>
    <table cellSpacing=1 cellPadding=0 width="100%" border=0>
        <tbody>
            <tr>
                <td> </td>
            </tr>
        </tbody>
    </table>
    </div>
    <div id=demo2></div>
    </div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
   if(demo2.offsetTop-demo.scrollTop<=0)
    demo.scrollTop-=demo1.offsetHeight
   else{
    demo.scrollTop++
   }
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

div始终位于网页顶端

————————————-

<div id="top_blank" style="height:30px"></div>
<div id="top_huilv_div" style="width:100%; display:inline; border-bottom:2px solid #ff9900; background-color:#FFE8D0;font-size:12px; position:fixed; left:0;top:0;z-index:100;"><!– #include file="top_huilv.asp"–><input type="button" onclick="getElementById(‘hulv_button’).style.display=’inline';getElementById(‘top_huilv_div’).style.display=’none';getElementById(‘top_blank’).style.height=0;" value="关闭" style="float:right; margin-top:3px;"/></div>
<!–<button style="width:30px; text-align:center;position:fixed; left:0; top:100px;_position:relative; z-index:100; background:url(img/botton.gif) no-repeat; xpression(offsetParent.scrollLeft+0);" id="hulv_button" onclick="getElementById(‘top_huilv_div’).style.display=’inline';this.style.display=’none’">价<br />格<br />转<br />换</button>–>
<img src="img/botton.gif" style=" margin-top:100px; display:none;width:30px; text-align:center;position:fixed; left:0; top:100px;_position:relative; z-index:100; background:url(img/botton.gif) no-repeat; xpression(offsetParent.scrollLeft+0);" id="hulv_button" onclick="getElementById(‘top_huilv_div’).style.display=’inline';this.style.display=’none';getElementById(‘top_blank’).style.height=’30px';" onmousemove="this.style.cursor=’hand’" />

————————————————

对于英文的强制换行,避免表格被拉宽

style="table-layout:fixed;word-break: break-all; word-wrap: break-word;"

css 自适应宽度圆角滑动门

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
html{filter:expression(document.execCommand("BackgroundImageCache", false, true))}
body{text-align:center;font:12px Verdana,sans-serif;margin:5px 0}
ul,ol,li{margin:0;padding:0;border:0;list-style-type:none} input,select{font-size:12px}
a{color:#010101;text-decoration:none;outline:none} a:hover{text-decoration:underline}
.Tab{height:100%;text-align:left}
.Tab .title,.Tab .title div,.Tab .title .n1,.Tab .title .n1 span,.Tab .title .n2,.Tab .title .n2 span{background:url("http://pic.eneting.com/upload/2008-07/3/0f31f293b25ac2d4018f8a794362c442.gif") no-repeat left top}
.Tab .title{height:30px;padding-left:10px}
.Tab .title div{background-position:right top;display:block;height:100%}
.Tab .title .n1,.Tab .title .n2{background-position:left bottom;height:26px;line-height:26px; display:block;float:left;text-align:center;padding-left:12px;margin-top:4px;margin-left:1px;color:#333; text-decoration:none}
.Tab .title .n1 span,.Tab .title .n2 span{background-position:right bottom;display:block;padding-right:12px}
.Tab .title .n2{background-position:left -30px}
.Tab .title .n2 span{background-position:right -30px}
.tabcon ul{margin:5px auto;padding:0}
.tabcon ul li{height:24px;line-height:24px;padding-left:16px;overflow:hidden;display:block}
</style>
<script type="text/javascript">
function $(obj){return document.getElementById(obj)}
function Tab(Xname,Cname,Lenght,j){for(i=1;i<Lenght;i++){eval("$(‘"+Xname+i+"’).className=’n2’");}eval("$(‘"+Xname+j+"’).className=’n1’");for(i=1;i<Lenght;i++){eval("$(‘"+Cname+i+"’).style.display=’none’");eval("$(‘"+Cname+j+"’).style.display=’block’");}}
</script>
</head>
<body>
<div style="width:500px;margin:0 auto">
<p>onmouseover事件</p>
<div class="Tab">
<div class="title">
<a href="#" id="a1" class="n1" onmouseover="Tab(‘a’,’ax’,6,1)"><span>选项卡1</span></a>
<a href="#" id="a2" class="n2" onmouseover="Tab(‘a’,’ax’,6,2)"><span>选项卡选项卡2</span></a>
<a href="#" id="a3" class="n2" onmouseover="Tab(‘a’,’ax’,6,3)"><span>选3</span></a>
<a href="#" id="a4" class="n2" onmouseover="Tab(‘a’,’ax’,6,4)"><span>选选4</span></a>
<a href="#" id="a5" class="n2" onmouseover="Tab(‘a’,’ax’,6,5)"><span>选选选选选选选选选选选选选选5</span></a>
<div></div>
</div>
<div class="tabcon">
<ul id="ax1">
<li><a href="#">JavaScript 经典效果集-第二期策划中 </a></li>
<li><a href="#">老猫的理想制作w3school javascript 电子书 chm版 </a></li>
<li><a href="#">发贴需知 | 新手入门 | 常见问题 | 精华整理 0722 </a></li>
</ul>
<ul id="ax2" style="display:none">
<li><a href="#">近期技术讨论贴(持续更新:12-10) </a></li>
<li><a href="#">发贴需知 | 新手入门 | 常见问题 | 精华整理 0722 </a></li>
<li><a href="#">关于奥运期间管理及只开放邀请注册的通知</a></li>
</ul>
<ul id="ax3" style="display:none">
<li><a href="#">老猫的理想制作w3school javascript 电子书 chm版</a></li>
<li><a href="#">近期技术讨论贴(持续更新:12-10) </a></li>
<li><a href="#">JavaScript 经典效果集-第二期策划中</a></li>
</ul>
<ul id="ax4" style="display:none">
<li><a href="#">近期技术讨论贴(持续更新:12-10) </a></li>
<li><a href="#">发贴需知 | 新手入门 | 常见问题 | 精华整理 0722 </a></li>
<li><a href="#">关于奥运期间管理及只开放邀请注册的通知</a></li>
</ul>
<ul id="ax5" style="display:none">
<li><a href="#">老猫的理想制作w3school javascript 电子书 chm版</a></li>
<li><a href="#">近期技术讨论贴(持续更新:12-10) </a></li>
<li><a href="#">JavaScript 经典效果集-第二期策划中</a></li>
</ul>
</div>
</div>
<p>onclick事件</p>
<div class="Tab">
<div class="title">
<a href="#" id="b1" class="n1" onclick="Tab(‘b’,’bx’,6,1)"><span>选项卡1</span></a>
<a href="#" id="b2" class="n2" onclick="Tab(‘b’,’bx’,6,2)"><span>选项卡选项卡2</span></a>
<a href="#" id="b3" class="n2" onclick="Tab(‘b’,’bx’,6,3)"><span>选3</span></a>
<a href="#" id="b4" class="n2" onclick="Tab(‘b’,’bx’,6,4)"><span>选选4</span></a>
<a href="#" id="b5" class="n2" onclick="Tab(‘b’,’bx’,6,5)"><span>选选选选选选选选选选选选选选5</span></a>
<div></div>
</div>
<div class="tabcon">
<ul id="bx1">
<li><a href="#">JavaScript 经典效果集-第二期策划中 </a></li>
<li><a href="#">老猫的理想制作w3school javascript 电子书 chm版 </a></li>
<li><a href="#">发贴需知 | 新手入门 | 常见问题 | 精华整理 0722 </a></li>
</ul>
<ul id="bx2" style="display:none">
<li><a href="#">近期技术讨论贴(持续更新:12-10) </a></li>
<li><a href="#">发贴需知 | 新手入门 | 常见问题 | 精华整理 0722 </a></li>
<li><a href="#">关于奥运期间管理及只开放邀请注册的通知</a></li>
</ul>
<ul id="bx3" style="display:none">
<li><a href="#">老猫的理想制作w3school javascript 电子书 chm版</a></li>
<li><a href="#">近期技术讨论贴(持续更新:12-10) </a></li>
<li><a href="#">JavaScript 经典效果集-第二期策划中</a></li>
</ul>
<ul id="bx4" style="display:none">
<li><a href="#">近期技术讨论贴(持续更新:12-10) </a></li>
<li><a href="#">发贴需知 | 新手入门 | 常见问题 | 精华整理 0722 </a></li>
<li><a href="#">关于奥运期间管理及只开放邀请注册的通知</a></li>
</ul>
<ul id="bx5" style="display:none">
<li><a href="#">老猫的理想制作w3school javascript 电子书 chm版</a></li>
<li><a href="#">近期技术讨论贴(持续更新:12-10) </a></li>
<li><a href="#">JavaScript 经典效果集-第二期策划中</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>滑动门效果 – by koyoz</title>  
<style type="text/css">  
body {font-size:12px;font-family:Verdana;}   
/* 滑动门定义 */   
#title{height:24px; *height:23px; width:400px; border-bottom:1px solid #ccc;}   
@media all and (min-width: 0px){#title{height:23px;}}   
#title ul{list-style:none;margin:0px 10px; padding:0px; *position:absolute}   
#title ul li {float:left;margin-left:5px;}   
#title ul li a{border:1px solid #ccc;padding:4px 10px !important;padding:5px 10px 3px 10px;display:block;text-decoration:none;color:blue;}   
#title ul li a:hover,#title ul li a.over {border-bottom:1px solid #fff;}   
/* 内容 */   
#content {padding:5px 10px;}   
#content div{display:none;}   
</style>  
  
</head>  
  
<body>  
<div id="title">  
    <ul>  
        <li><a href="javascript://" onmouseover="show(0)" class="over">首页</a></li>  
        <li><a href="javascript://" onmouseover="show(1)">新闻</a></li>  
        <li><a href="javascript://" onmouseover="show(2)">博客</a></li>  
        <li><a href="javascript://" onmouseover="show(3)">图片</a></li>  
        <li><a href="javascript://" onmouseover="show(4)">播客</a></li>  
    </ul>  
       
</div>  
  
<div id="content">  
    <div style="display:block">我是首页</div>  
    <div>我是新闻</div>  
    <div>我是博客</div>  
    <div>我是图片</div>  
    <div>我是播客</div>  
</div>  
  
<script type="text/javascript">  
function show(n)   
{      
     var o = document.getElementById(‘title’).getElementsByTagName("a");   
     var c = document.getElementById(‘content’).getElementsByTagName("div");   
     for(i = 0; l = o.length, i < l; o[i].className = ”,c[i].style.display = ‘none’,i++ );   
     o[n].className = ‘over';   
     c[n].style.display = ‘block';      
}   
</script>  
</body>  
  
</html>  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>滑动门效果 – by koyoz</title>  
<style type="text/css">  
body {font-size:12px;font-family:Verdana;}   
/* 滑动门定义 */   
#title{height:24px; *height:23px; width:400px; border-bottom:1px solid #ccc;}   
@media all and (min-width: 0px){#title{height:23px;}}   
#title ul{list-style:none;margin:0px 10px; padding:0px; *position:absolute}   
#title ul li {float:left;margin-left:5px;}   
#title ul li a{border:1px solid #ccc;padding:4px 10px !important;padding:5px 10px 3px 10px;display:block;text-decoration:none;color:blue;}   
#title ul li a:hover,#title ul li a.over {border-bottom:1px solid #fff;}   
/* 内容 */   
#content {padding:5px 10px;}   
#content div{display:none;}   
</style>  
  
</head>  
  
<body>  
<div id="title">  
    <ul>  
        <li><a href="javascript://" onmouseover="show(0)" class="over">首页</a></li>  
        <li><a href="javascript://" onmouseover="show(1)">新闻</a></li>  
        <li><a href="javascript://" onmouseover="show(2)">博客</a></li>  
        <li><a href="javascript://" onmouseover="show(3)">图片</a></li>  
        <li><a href="javascript://" onmouseover="show(4)">播客</a></li>  
    </ul>  
       
</div>  
  
<div id="content">  
    <div style="display:block">我是首页</div>  
    <div>我是新闻</div>  
    <div>我是博客</div>  
    <div>我是图片</div>  
    <div>我是播客</div>  
</div>  
  
<script type="text/javascript">  
function show(n)   
{      
     var o = document.getElementById(‘title’).getElementsByTagName("a");   
     var c = document.getElementById(‘content’).getElementsByTagName("div");   
     for(i = 0; l = o.length, i < l; o[i].className = ”,c[i].style.display = ‘none’,i++ );   
     o[n].className = ‘over';   
     c[n].style.display = ‘block';      
}   
</script>  
</body>  
  
</html>  

可拖动的层DIV的完整源代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>

body {margin:0px;padding:0px;font-size:12px;text-align:center;}
body > div {text-align:center; margin-right:auto; margin-left:auto;}
.content{width:900px;}
.content .left{
    float:left;
    width:20%;
    border:1px solid #FF0000;
    margin:3px;
}
.content .center{float:left;border:1px solid #FF0000;margin:3px;width:57%}
.content .right{float:right;width:20%;border:1px solid #FF0000;margin:3px}
.mo{height:auto;border:1px solid #CCC;margin:3px;background:#FFF}
.mo h1{background:#ECF9FF;height:18px;padding:3px;cursor:move}
.closediv{cursor:default;}
.minusspan{cursor:default;}
.mo .nr{height:80px;border:1px solid #F3F3F3;margin:2px}
h1{margin:0px;padding:0px;text-align:left;font-size:12px}
.dragging {
    FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=60); opacity: 0.6; moz-opacity: 0.6
}

</style>
<script language="javascript">
/*
zuoxinwu@gmail.com 2007-9-12 改动
1、添加拖动层时的虚线框
2、添加拖动层时的半透明效果
3、加入层折叠和关闭功能
*/
var dragobj={}
window.onerror=function(){return false}
var domid=12
function on_ini(){
    String.prototype.inc=function(s){return this.indexOf(s)>-1?true:false}
    var agent=navigator.userAgent
    window.isOpr=agent.inc("Opera")
    window.isIE=agent.inc("IE")&&!isOpr
    window.isMoz=agent.inc("Mozilla")&&!isOpr&&!isIE
    if(isMoz){
        Event.prototype.__defineGetter__("x",function(){return this.clientX+2})
        Event.prototype.__defineGetter__("y",function(){return this.clientY+2})
    }
    basic_ini()
}
function basic_ini(){
    window.$=function(obj){return typeof(obj)=="string"?document.getElementById(obj):obj}
    window.oDel=function(obj){if($(obj)!=null){$(obj).parentNode.removeChild($(obj))}}
}
window.oDel=function(obj){if($(obj)!=null){$(obj).parentNode.removeChild($(obj))}}

window.onload=function(){
    on_ini()
    var o=document.getElementsByTagName("h1")
    for(var i=0;i<o.length;i++){
        o[i].onmousedown=addevent;
        //添加折叠和关闭按钮
        var tt = document.createElement("div");
        tt.style.cssText = "float:left";
       
        var span = document.createElement("span");
        span.innerHTML = "–"+o[i].innerHTML;
        span.style.cssText = "cursor:default;";
        span.onmousedown = minusDiv;
        tt.appendChild(span);
       
        var close = document.createElement("div");
        close.innerHTML = "X";
        close.style.cssText = "cursor:default;float:right";
        close.onmousedown = closeDiv;
        o[i].innerHTML = "";
        o[i].appendChild(tt);
        o[i].appendChild(close);
    }
}
//折叠或者显示层
function minusDiv(e)
{
    e=e||event
    var nr = this.parentNode.parentNode.nextSibling;    //取得内容层
    nr.style.display = nr.style.display==""?"none":"";
}

//移出层
function closeDiv(e)
{
    e=e||event
    var mdiv = this.parentNode.parentNode;    //取得目标层
    oDel(mdiv);
}

function addevent(e){
    if(dragobj.o!=null)
        return false
    e=e||event
    dragobj.o=this.parentNode
    dragobj.xy=getxy(dragobj.o)
    dragobj.xx=new Array((e.x-dragobj.xy[1]),(e.y-dragobj.xy[0]))
    //dragobj.o.className = ‘dragging';
    dragobj.o.style.width=dragobj.xy[2]+"px"
    dragobj.o.style.height=dragobj.xy[3]+"px"
    dragobj.o.style.left=(e.x-dragobj.xx[0])+"px"
    dragobj.o.style.top=(e.y-dragobj.xx[1])+"px"
    dragobj.o.style.position="absolute"
    dragobj.o.style.filter=’alpha(opacity=60)';        //添加拖动透明效果

    var om=document.createElement("div")
    dragobj.otemp=om
    om.style.width=dragobj.xy[2]+"px"
    om.style.height=dragobj.xy[3]+"px"
    om.style.border = "1px dashed red";    //实现红色的虚线框
    dragobj.o.parentNode.insertBefore(om,dragobj.o)
    return false
}
document.onselectstart=function(){return false}
window.onfocus=function(){document.onmouseup()}
window.onblur=function(){document.onmouseup()}
document.onmouseup=function(){
    if(dragobj.o!=null){
        dragobj.o.style.width="auto"
        dragobj.o.style.height="auto"
        dragobj.otemp.parentNode.insertBefore(dragobj.o,dragobj.otemp)
        dragobj.o.style.position=""
        oDel(dragobj.otemp)
        dragobj={}
    }
}
document.onmousemove=function(e){
    e=e||event
    if(dragobj.o!=null){
        dragobj.o.style.left=(e.x-dragobj.xx[0])+"px"
        dragobj.o.style.top=(e.y-dragobj.xx[1])+"px"
        createtmpl(e, dragobj.o)    //传递当前拖动对象
    }
}
function getxy(e){
    var a=new Array()
    var t=e.offsetTop;
    var l=e.offsetLeft;
    var w=e.offsetWidth;
    var h=e.offsetHeight;
    while(e=e.offsetParent){
        t+=e.offsetTop;
        l+=e.offsetLeft;
    }
    a[0]=t;a[1]=l;a[2]=w;a[3]=h
return a;
}
function inner(o,e){
    var a=getxy(o)
    if(e.x>a[1]&&e.x<(a[1]+a[2])&&e.y>a[0]&&e.y<(a[0]+a[3])){
        if(e.y<(a[0]+a[3]/2))
            return 1;
        else
            return 2;
    }else
        return 0;
}
//将当前拖动层在拖动时可变化大小,预览效果
function createtmpl(e, elm){
    for(var i=0;i<domid;i++){
        if(document.getElementById("m"+i) == null)    //已经移出的层不再遍历
            continue;
        if($("m"+i)==dragobj.o)
            continue
        var b=inner($("m"+i),e)
        if(b==0)
            continue
        dragobj.otemp.style.width=$("m"+i).offsetWidth
        elm.style.width = $("m"+i).offsetWidth;
        //1为下移,2为上移
        if(b==1){
            $("m"+i).parentNode.insertBefore(dragobj.otemp,$("m"+i))
        }else{
            if($("m"+i).nextSibling==null){
                $("m"+i).parentNode.appendChild(dragobj.otemp)
            }else{
                $("m"+i).parentNode.insertBefore(dragobj.otemp,$("m"+i).nextSibling)
            }
        }
        return
    }
    for(var j=0;j<3;j++){
        if($("dom"+j).innerHTML.inc("div")||$("dom"+j).innerHTML.inc("DIV"))
            continue
        var op=getxy($("dom"+j))
        if(e.x>(op[1]+10)&&e.x<(op[1]+op[2]-10)){
            $("dom"+j).appendChild(dragobj.otemp)
            dragobj.otemp.style.width=(op[2]-10)+"px"
        }
    }
}
function add_div()
{
    var o=document.createElement("div")
    o.className="mo"
    o.id="m"+domid
    $(‘dom0′).appendChild(o)
    o.innerHTML="<h1>dom"+domid+"</h1><div class=nr></div>"
    o.getElementsByTagName("h1")[0].onmousedown=addevent
    domid++
}
</script>
</head>
<body>
<INPUT TYPE="button" value="添加DIV" onclick="add_div();">
<div class=content>
    <div class=left id=dom0>
        <div class=mo id=m0>
            <h1>dom0</h1>
            <div class="nr"></div>
        </div>
        <div class=mo id=m1>
            <h1>dom1</h1><div class="nr"></div>
        </div>
        <div class=mo id=m2><h1>dom2</h1><div class="nr"></div></div>
        <div class=mo id=m3><h1>dom3</h1><div class="nr"></div></div>
    </div>
    <div class=center id=dom1>
        <div class=mo id=m4><h1>dom4</h1><div class="nr"></div></div>
        <div class=mo id=m5><h1>dom5</h1><div class="nr"></div></div>
        <div class=mo id=m6><h1>dom6</h1><div class="nr"></div></div>
        <div class=mo id=m7><h1>dom7</h1><div class="nr"></div></div>
    </div>
    <div class=right id=dom2>
        <div class=mo id=m8><h1>dom8</h1><div class="nr"></div></div>
        <div class=mo id=m9><h1>dom9</h1><div class="nr"></div></div>
        <div class=mo id=m10><h1>dom10</h1><div class="nr"></div></div>
        <div class=mo id=m11><h1>dom11</h1><div class="nr"></div></div>
    </div>
</div>

</body>
</html>