亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

完成layui完成后臺home管理員頁面表格布局

??? 2019-01-01 00:39:45 310
????：<!DOCTYPE html> <html> <head>  <meta charset="UTF-8">  <title>JD home</title>  <link rel="stylesheet" 

20190101002421.png

20190101002450.png

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>JD home</title>
 <link rel="stylesheet" type="text/css" href="static/layui/css/layui.css">
 <script type="text/javascript" src ="static/layui/layui.js"></script>
 <style>
 *{margin: 0px;padding: 0px;}
 .head{color: #fff;background:#2E6DA4;width:100%;height: 50px;}
 .head_title{font-size: 20px;line-height: 50px;float:left;margin-left: 20px;}
 .head_info{line-height: 50px;float:right;font-size: 14px;margin-right: 20px;}
 .head_info a{color:#fff;text-decoration: none;}
 .menu{width:200px;height:630px;background:#333744;position: absolute;}
 .layui-collapse{border:none;}
 .layui-colla-item{border:none;}
 .layui-colla-title{background:#42485B;border:0px;color:#fff;}
 .layui-colla-content{border-top:none;color: #C4C5C9;padding: 0px;}
 .main{position: absolute;left: 200px;right: 0px;}
 </style>
</head>
<body>
 <div>
 <span>JD商城--后臺管理系統(tǒng)</span>
 <span>admin【系統(tǒng)管理員】<a href="javascript:;" onclick="logout()"> 退出</a></span>
 </div>

 <div>
 <div>
 <div>
 <h2>管理員管理</h2>
 <div class="layui-colla-content layui-show">
 <ul class="layui-nav layui-nav-tree" lay-filter="test">
 <li><a href="">管理員列表</a></li>
 </ul>
 </div>
 </div>
 <div>
 <h2>權限管理</h2>
 <div>
 <ul class="layui-nav layui-nav-tree" lay-filter="test">
 <li><a href="">菜單管理</a></li>
 <li><a href="">角色管理</a></li>
 </ul>
 </div>
 </div>
 <div>
 <h2>系統(tǒng)設置</h2>
 <div>
 <ul class="layui-nav layui-nav-tree" lay-filter="test">
 <li><a href="">網(wǎng)站設置</a></li>
 </ul>
 </div>
 </div>
 <div>
 <h2>商品分類</h2>
 <div>
 <ul class="layui-nav layui-nav-tree" lay-filter="test">
 <li><a href="">分類列表</a></li>
 </ul>
 </div>
 </div>
 <div>
 <h2>產(chǎn)品管理</h2>
 <div>
 <ul class="layui-nav layui-nav-tree" lay-filter="test">
 <li><a href="">產(chǎn)品列表</a></li>
 </ul>
 </div>
 </div>
 <div>
 <h2>幻燈片管理</h2>
 <div>
 <ul class="layui-nav layui-nav-tree" lay-filter="test">
 <li><a href="">首頁首屏</a></li>
 </ul>
 </div>
 </div>
 </div>
 </div>

 <div>
 <iframe src="layui-index.html" style="width:100%;height:100%;" frameborder="0"  scrolling="0" ></iframe>
 </div>

<script type="text/javascript">
 layui.use(['element', 'layer'], function(){
   var element = layui.element;
    layer = layui.layer;
    $= layui.jquery
    resetMenuHeight()
 });
 function logout(){
 layer.confirm('確定要退出么？', {
   icon:3,
   btn: ['確定', '取消'] //可以無限個按鈕
 }, function(index, layero){
   //按鈕【按鈕一】的回調(diào)
 }, function(index){
   //按鈕【按鈕二】的回調(diào)
 });
 }
</script>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" type="text/css" href="./static/layui/css/layui.css">
 <script type="text/javascript" src ="./static/layui/layui.js"></script>
 <style type="text/css">
 .header{border-bottom: 2px solid #009688}
 .header span{color:#fff;background:#009688;line-height: 32px;margin-left: 30px;padding: 10px;}
 .header button{float: right;}
 </style>
</head>
<body style="padding:10px;">
 <div>
 <span>管理員列表</span>
 <button class="layui-btn layui-btn-sm">添加</button>
 </div>

 <table>
 <thead>
 <tr>
 <th>ID</th>
 <th>用戶名</th>
 <th>真實姓名</th>
 <th>角色</th>
 <th>狀態(tài)</th>
 <th>添加時間</th>      
 <th>操作</th>
 </tr>

 </thead>

 <tbody>
 <tr>
 <td>1001</td>
 <td>temtd</td>
 <td>表秀峰</td>
 <td>系統(tǒng)管理員</td>
 <td>正常</td>
 <td>2018-11-20 14:03:09</td>
 <td>
 <button class="layui-btn layui-btn-xs">編輯</button>
 <button class="layui-btn layui-btn-xs layui-btn-danger" onclick="del()">刪除</button>

 </td>
 </tr>

 <tr>
 <td>1002</td>
 <td>ifgu</td>
 <td>表潔平</td>
 <td>系統(tǒng)管理員</td>
 <td style="color:red;">禁用</td>
 <td>2018-11-20 14:03:09</td>
 <td>
 <button class="layui-btn layui-btn-xs">編輯</button>
 <button class="layui-btn layui-btn-xs layui-btn-danger" onclick="del()">刪除</button>
 </td>
 </tr>

 <tr>
 <td>1003</td>
 <td>udee</td>
 <td>表翔月</td>
 <td>系統(tǒng)管理員</td>
 <td>正常</td>
 <td>2018-11-20 14:03:09</td>
 <td>
 <button class="layui-btn layui-btn-xs">編輯</button>
 <button class="layui-btn layui-btn-xs layui-btn-danger" onclick="del()">刪除</button>
 </td>
 </tr>

 <tr>
 <td>1004</td>
 <td>wxfd</td>
 <td>表傾城</td>
 <td>系統(tǒng)管理員</td>
 <td>正常</td>
 <td>2018-11-20 14:03:09</td>
 <td>
 <button class="layui-btn layui-btn-xs">編輯</button>
 <button class="layui-btn layui-btn-xs layui-btn-danger" onclick="del()">刪除</button>
 </td>
 </tr>

 <tr>
 <td>1005</td>
 <td>geit</td>
 <td>表海</td>
 <td>系統(tǒng)管理員</td>
 <td>正常</td>
 <td>2018-11-20 14:03:09</td>
 <td>
 <button class="layui-btn layui-btn-xs">編輯</button>
 <button class="layui-btn layui-btn-xs layui-btn-danger" onclick="del()">刪除</button>
 </td>
 </tr>

 <tr>
 <td>1006</td>
 <td>jeuu</td>
 <td>表明立</td>
 <td>系統(tǒng)管理員</td>
 <td style="color:red;">禁用</td>
 <td>2018-11-20 14:03:09</td>
 <td>
 <button class="layui-btn layui-btn-xs">編輯</button>
 <button class="layui-btn layui-btn-xs layui-btn-danger" onclick="del()">刪除</button>
 </td>
 </tr>

 <tr>
 <td>1007</td>
 <td>tjugm</td>
 <td>表冬瑞 </td>
 <td>系統(tǒng)管理員</td>
 <td>正常</td>
 <td>2018-11-20 14:03:09</td>
 <td>
 <button class="layui-btn layui-btn-xs">編輯</button>
 <button class="layui-btn layui-btn-xs layui-btn-danger" onclick="del()">刪除</button>
 </td>
 </tr>

 <tr>
 <td>1008</td>
 <td>gejq</td>
 <td>表果兒</td>
 <td>系統(tǒng)管理員</td>
 <td>正常</td>
 <td>2018-11-20 14:03:09</td>
 <td>
 <button class="layui-btn layui-btn-xs">編輯</button>
 <button class="layui-btn layui-btn-xs layui-btn-danger" onclick="del()">刪除</button>
 </td>
 </tr>

 <tr>
 <td>1009</td>
 <td>jxvi</td>
 <td>表昆妙</td>
 <td>系統(tǒng)管理員</td>
 <td>正常</td>
 <td>2018-11-20 14:03:09</td>
 <td>
 <button class="layui-btn layui-btn-xs">編輯</button>
 <button class="layui-btn layui-btn-xs layui-btn-danger" onclick="del()">刪除</button>
 </td>
 </tr>
 </tbody>

 </table>

<script type="text/javascript">
 layui.use(['layer'], function(){
   var layer = layui.layer;  
 });
 function del(){
 layer.confirm('確定要刪除么？', {
   icon:3,
   btn: ['確定', '取消'] //可以無限個按鈕
 }, function(index, layero){
   //按鈕【按鈕一】的回調(diào)
 }, function(index){
   //按鈕【按鈕二】的回調(diào)
 });
 }
</script>
</body>
</html>

總結：經(jīng)過前面章節(jié)學習，初步體會到了layui對頁面布局美化操作過程簡化和方便了不少。自己感覺layu對代碼封裝得太局限，沒能完全按自已的實際需求，前端工作還得配合原生css樣式才能把頁面做得更加精美。做后臺界面是個不錯的選擇。

?? ???：天蓬老師?? ??：2019-01-01 09:16:04
???? ??：不是封裝的太局限,是你所很多東西寫死了, 隨著學習的深入, 你會使用的越來越靈活

??? ??

?? ??