ZUI框架加上Flex布局构建登录后的主页
生活随笔
收集整理的這篇文章主要介紹了
ZUI框架加上Flex布局构建登录后的主页
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
? ? ? ?LayUI框架雖然已經幫我們寫好了主頁布局，但是LayUI框架的插件較少，不足以我們使用，所以這個主頁需要自己來寫。
? ? ? ?要注意的是，不能使用浮動布局，因為浮動布局比較麻煩，還要用JS來動態計算寬高，不夠方便。
? ? ? ?所以，我們采用Flex布局。
效果圖：
頁面分為三個部分：
?頭部為導航條，左邊為菜單，右邊為iframe，我們只要往這三個部分填充用ZUI框架寫好的樣式即可。
HTML:
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/BuJu.css"> </head><body><div class="wrapper"><div class="header"></div><div class="conter"><div class="content-left">111</div><div class="content-right">222</div></div></div> </body></html>CSS:
body {margin: 0;padding: 0; }.wrapper {width: 100vw;height: 100vh;display: flex;flex-direction: column;justify-content: flex-start;background-color: sandybrown; }.header {width: 100%;height: 45px;background-color: skyblue; }.conter {width: 100%;height: auto;flex-grow: 1;display: flex;flex-direction: row;justify-content: flex-start;background-color: slateblue; }.content-left {width: 200px;height: 100%;background-color: darkcyan; }.content-right {width: auto;height: 100%;flex-grow: 1;background-color: darkslategray; }這時候，我們引入ZUI框架：(ZUI框架我是下載好的)
頭部 <link rel="stylesheet" href="./dist/css/zui.min.css"> 底部 <script src="./dist/lib/jquery/jquery.js"></script> <script src="./dist/js/zui.min.js"></script>然后把之前的導航條樣式，左邊菜單樣式，右邊內容樣式放在上面三塊對應的區域。
效果圖：
HTML:
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>用戶管理主頁</title><link rel="stylesheet" href="./css/index.css"><link rel="stylesheet" href="./dist/css/zui.min.css"> </head><body><div class="wrapper"><div class="header"><nav class="navbar navbar-default" role="navigation"><div class="container-fluid"><!-- 導航頭部 --><div class="navbar-header"><!-- 移動設備上的導航切換按鈕 --><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-example"><span class="sr-only">切換導航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><!-- 品牌名稱或logo --><a class="navbar-brand" href="your/nice/url">ZUI</a></div><!-- 導航項目 --><div class="collapse navbar-collapse navbar-collapse-example"><!-- 一般導航項目 --><ul class="nav navbar-nav navbar-right"><li class="active"><a href="your/nice/url">項目</a></li><li><a href="your/nice/url">需求</a></li><!-- 導航中的下拉菜單 --><li class="dropdown"><a href="your/nice/url" class="dropdown-toggle" data-toggle="dropdown">管理 <b class="caret"></b></a><ul class="dropdown-menu" role="menu"><li><a href="your/nice/url">任務</a></li></ul></li></ul></div><!-- END .navbar-collapse --></div></nav></div><div class="conter"><div class="content-left"><nav class="menu" data-ride="menu" style="width: 200px"><ul id="treeMenu" class="tree tree-menu" data-ride="tree"><li><a href="#"><i class="icon icon-th"></i>首頁</a></li><li><a href="#"><i class="icon icon-user"></i>個人資料</a></li><li><a href="#"><i class="icon icon-time"></i>更新時間</a><ul><li><a href="#">今天</a></li><li><a href="#">明天</a></li><li><a href="#">昨天</a></li><li><a href="#">本周</a></li></ul></li><li><a href="#"><i class="icon icon-trash"></i>垃圾簍</a></li><li><a href="#"><i class="icon icon-list-ul"></i>全部</a></li><li class="open"><a href="#"><i class="icon icon-tasks"></i>狀態</a><ul><li><a href="#"><i class="icon icon-circle-blank"></i>已就緒</a><ul><li><a href="#">已取消</a></li><li><a href="#">已關閉</a></li></ul></li><li class="active"><a href="#"><i class="icon icon-play-sign"></i>進行中</a></li><li><a href="#"><i class="icon icon-ok-sign"></i>已完成</a></li></ul></li></ul></nav></div><div class="content-right"><div class="panel" style="width: 80%;margin: 20px auto;"><div class="panel-heading" style="text-align: center; font-size: 18px;font-weight: bold;">搜索條件</div><div class="panel-body"><div class="col-xs-4"><div class="input-group with-padding"><span class="input-group-addon">用戶名</span><input type="text" class="form-control" placeholder="請輸入用戶名"></div></div><div class="col-xs-4"><div class="input-group with-padding"><span class="input-group-addon">性別</span><select class="form-control"><option value="0">全部</option><option value="1">男</option><option value="2">女</option></select></div></div><div class="col-xs-4"><div class="input-group with-padding"><span class="input-group-addon">角色類型</span><select class="form-control"><option value="0">全部</option><option value="1">高級管理員</option><option value="2">普通管理員</option></select></div></div><!-- 第二行 --><div class="col-xs-6"><div class="input-group with-padding"><span class="input-group-addon">創建時間</span><input type="text" class="form-control form-date" placeholder="請選擇開始時間"><span class="input-group-addon">至</span><input type="text" class="form-control form-date" placeholder="請選擇結束時間"></div></div><div class="col-xs-3"><div class="with-padding"><button class="btn btn-block" type="button">查詢</button></div></div><div class="col-xs-3"><div class="with-padding"><button class="btn btn-block" style="background-color:red;color: white;" type="button">新增</button></div></div></div></div><div class="panel" style="width: 80%;margin: 20px auto;"><div class="panel-heading" style="text-align: center; font-size: 18px;font-weight: bold;">用戶信息管理</div><div class="panel-body"><table class="table table-bordered" id="tableDataGridExample"><thead><tr><th>用戶名</th><th>性別</th><th>角色</th><th>狀態</th><th>操作</th></tr></thead><tbody><tr><td>tangsan</td><td>男</td><td>高級管理員</td><td>啟用</td><td><a>重置密碼</a> <a>禁用</a> <a>修改</a></td></tr><tr><td>tanghao</td><td>男</td><td>高級管理員</td><td>啟用</td><td><a>重置密碼</a> <a>禁用</a> <a>修改</a></td></tr></tbody></table><div class="col-xs-4"></div><div class="col-xs-1"><button class="btn btn-block" type="button">上一頁</button></div><div class="col-xs-2"><button class="btn btn-block" type="button" disabled="disabled">1/1</button></div><div class="col-xs-1"><button class="btn btn-block" type="button">下一頁</button></div><div class="col-xs-4"></div></div></div></div></div></div> </body> <script src="./dist/lib/jquery/jquery.js"></script> <script src="./dist/js/zui.min.js"></script></html>?
總結
以上是生活随笔為你收集整理的ZUI框架加上Flex布局构建登录后的主页的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Vue元素过渡效果
- 下一篇： RFC 文档（1-500）