时间:2021-07-01 10:21:17 帮助过:5人阅读
这个的demo是根据一个Jquery的框架直接做出来的:easywidgets。这个框架是可以免费下载的http://plugins.jquery.com/project/easywidgets。
废话就不多说了,直接把源代码贴出来,让大家学习!
html
CSS
body{ margin: 0; padding: 0; background-color: silver; font-family: 'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif; color: #666; font-size:20px; line-height:150%; } #left{ width: 380px; height: 100%; padding: 10px; position: absolute; top: 10px; left: 10px; border: solid red 2px; } #left .widget { width: 340px; height: 150px; padding; 10px; margin: 20px; border: solid red 2px; background-color: white; } #left .widget .widget-header { width: 340px; height: 30px; padding: 0; margin: 0; color: red; position: static; background-color: gray; } #middle{ width: 400px; height: 100%; position: absolute; top:10px; left: 435px; padding: 10px; margin: 0 30px 0; border: solid red 2px; } #middle .widget { width: 360px; height: 150px; padding; 10px; margin: 20px; border: solid red 2px; background-color: white; } #middle .widget .widget-header { width: 360px; height: 30px; padding: 0; margin: 0; color: red; position: static; background-color: gray; } #right{ width: 380px; height: 100%; padding: 10px; position: absolute; top: 10px; right: 10px; border: solid red 2px; } #right .widget { width: 340px; height: 150px; padding; 10px; margin: 20px; border: solid red 2px; background-color: white; } #right .widget .widget-header { width: 340px; height: 30px; padding: 0; margin: 0; color: red; position: static; background-color: gray; }
javascript代码