后台页面的表格css代码,完成layui完成后台home管理员页面表格布局

摘要：html>

JD home

html>

JD home

*{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;}

JD商城--后台管理系统

admin【系统管理员】 退出

管理员管理

• 管理员列表

权限管理

• 菜单管理
• 角色管理

系统设置

• 网站设置

商品分类

• 分类列表

产品管理

• 产品列表

幻灯片管理

• 首页首屏

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){

//按钮【按钮一】的回调

}, function(index){

//按钮【按钮二】的回调

});

}

html>

Document

.header{border-bottom: 2px solid #009688}

.header span{color:#fff;background:#009688;line-height: 32px;margin-left: 30px;padding: 10px;}

.header button{float: right;}

管理员列表

添加

ID用户名真实姓名角色状态添加时间操作

1001temtd表秀峰系统管理员正常2018-11-20 14:03:09

编辑

删除

1002ifgu表洁平系统管理员禁用2018-11-20 14:03:09

编辑

删除

1003udee表翔月系统管理员正常2018-11-20 14:03:09

编辑

删除

1004wxfd表倾城系统管理员正常2018-11-20 14:03:09

编辑

删除

1005geit表海系统管理员正常2018-11-20 14:03:09

编辑

删除

1006jeuu表明立系统管理员禁用2018-11-20 14:03:09

编辑

删除

1007tjugm表冬瑞 系统管理员正常2018-11-20 14:03:09

编辑

删除

1008gejq表果儿系统管理员正常2018-11-20 14:03:09

编辑

删除

1009jxvi表昆妙系统管理员正常2018-11-20 14:03:09

编辑

删除

layui.use(['layer'], function(){

var layer = layui.layer;

});

function del(){

layer.confirm('确定要删除么？', {

icon:3,

btn: ['确定', '取消'] //可以无限个按钮

}, function(index, layero){

//按钮【按钮一】的回调

}, function(index){

//按钮【按钮二】的回调

});

}

总结：经过前面章节学习，初步体会到了layui对页面布局美化操作过程简化和方便了不少。自己感觉layu对代码封装得太局限，没能完全按自已的实际需求，前端工作还得配合原生css样式才能把页面做得更加精美。做后台界面是个不错的选择。

批改老师：天蓬老师批改时间：2019-01-01 09:16:04

老师总结：不是封装的太局限,是你所很多东西写死了, 随着学习的深入, 你会使用的越来越灵活