接着上次来说 搞那些东东好像没什么价值
今天来学学布局吧
按照我的风格,千言万语不如一句代码
<!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> <title>布局实力篇之自动适应窗口 高度</title> <link href="../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" /> <!--<link href="../lib/ligerUI/skins/Gray/css/all.css" rel="stylesheet" type="text/css" />--> 我用的另一套皮肤 <!--我添加了自定义的样式--> <link href="../style/site.css" rel="stylesheet" type="text/css" /> <script src="../lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="../lib/ligerUI/js/core/base.js" type="text/javascript"></script> <script src="../lib/ligerUI/js/plugins/ligerLayout.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#container").ligerLayout({ leftWidth: 200 }); //这一句可是关键啊 }); </script> </head> <body> <div id="top"> 其实俺和他们不是一起的,俺是独立的一部分 </div> <div id="container"> <div position="left"> 这里也要注意啊 </div> <div position="center" title="标题"> 加个标题更好玩 </div> </div> </body> </html>
样式文件
* { margin: 0px; padding: 0px; } body { padding: 5px; margin: 0; padding-bottom: 15px; } #top { height: 80px; margin-bottom: 3px; background-color:Lime }
总结:
只需要将容器转换为一个ligerlayout对象就行了
别忘了 position 属性啊
顺便来张效果图