类似google的可拖动div层网页布局，支持firefox，样式可自定义

yangshen998

浏览: 1246937 次

最近访客更多访客>>

morelily

u012363178

centuey_chen

hellygirl

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1479)

社区版块

存档分类

　　近来还是比较流行这种应用，而且论坛的人问得也多，每次去查很麻烦，就转在这里，方便查找。原文地址在下面。

可能是我转载的那个转载的排版存在问题，不能直接运行。我进行了修改。现在的代码可以直接运行了。
<html> <head> <title>拖动div</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <mce:style></mce:style><style mce_bogus="1"> 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; }.mo.nr { height: 80px; border: 1px solid#F3F3F3; margin: 2px } h1 { margin: 0px; padding: 0px; text - align: left; font - size: 12px }</style> <mce:script type="text/javascript"></mce:script> </head> <body> <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 class=mo id=m12><h1>dom12</h1><div class="nr"></div></div> </div> </div> </body> </html>

原文地址:http://www.corange.cn/archives/2008/12/2757.html

分享到：