学习layui中弹出层，和table表格样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品管理</title>
<link rel="stylesheet" href="layui/css/layui.css">
<style>
.header{border-bottom: 2px lightblue solid;}
.header span{color: #fff;background:lightblue;padding:8px;line-height: 32px;margin-left: 30px;font-size: 16px;}
.header button{float:right;}
</style>
</head>
<body>
<div>
<span>商品列表</span>
<button class="layui-btn layui-btn-sm" onclick="add()">添加</button>
</div>
<table>
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
<th>性别</th>
<th>城市</th>
<th>签名</th>
<th>积分</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<th>张三</th>
<th>男</th>
<th>石家庄</th>
<th>hello</th>
<th>20</th>
<th>
<button class="layui-btn layui-btn-sm">编辑</button>
<button class="layui-btn layui-btn-sm">删除</button>
</th>
</tr>
<tr>
<th>2</th>
<th>张三</th>
<th>男</th>
<th>石家庄</th>
<th>hello</th>
<th>20</th>
<th>
<button class="layui-btn layui-btn-sm">编辑</button>
<button class="layui-btn layui-btn-sm">删除</button>
</th>
</tr>
<tr>
<th>3</th>
<th>张三</th>
<th>男</th>
<th>石家庄</th>
<th>hello</th>
<th>20</th>
<th>
<button class="layui-btn layui-btn-sm">编辑</button>
<button class="layui-btn layui-btn-sm">删除</button>
</th>
</tr>
<tr>
<th>4</th>
<th>张三</th>
<th>男</th>
<th>石家庄</th>
<th>hello</th>
<th>20</th>
<th>
<button class="layui-btn layui-btn-sm">编辑</button>
<button class="layui-btn layui-btn-sm">删除</button>
</th>
</tr>
</tbody>
</table>
</body>
<script src="statics/js/jq_3.3.1_mi.js"></script>
<script src="layui/layui.all.js"></script>
<script>
function add(){
layer.open({
content: '添加商品',
success: function(layero, index){
console.log(layero, index);
}
});
}
</script>
</html>代码执行后显示结果如下：
