您的位置：首页 > 产品设计 > UI/UE

LigerUI学习笔记之布局篇 layout

2012-09-04 18:22 465 查看
接着上次来说 搞那些东东好像没什么价值

今天来学学布局吧

按照我的风格，千言万语不如一句代码

<!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 属性啊

顺便来张效果图

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航