时间:2021-07-01 10:21:17 帮助过:5人阅读
这个的demo是根据一个Jquery的框架直接做出来的:easywidgets。这个框架是可以免费下载的http://plugins.jquery.com/project/easywidgets。
废话就不多说了,直接把源代码贴出来,让大家学习!
html
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
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代码