返回layui框架......登陆

layui框架完成相应样式

七友2019-03-21 19:28:45272
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="../static/plugins/layui/css/layui.css">
  <script type="text/javascript" src="../static/plugins/layui/layui.js"></script>
  <style type="text/css">
   .header span{background: #009688;color: #fff;padding: 10px;margin-left: 30px;line-height:32px;}
     .header button{float: right;}
     .header{border-bottom: 2px #009688 solid;}
  </style>
</head>
<body style="padding: 10px;">
<div class="header">
  <span>管理员列表</span>
   <button class="layui-btn layui-btn-sm">添加</button>
</div>
<table class="layui-table" >
  <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>别名</th>
      <th >性别</th>
      <th>出生年月</th>
      <th>代表作品</th>
       <th>操作</th>
    </tr>
  </thead>
   <tbody>
      <tr>
        <td>1</td>
        <td>周比利</td>
        <td>老虎</td>
        <td>男</td>
        <td>1958-8-24</td>
         <td>《东方秃鹰》</td>
        <td>
          <button class="layui-btn layui-btn-xs">编辑</button>
            <button class="layui-btn layui-btn-danger layui-btn-xs" onclick="del()">删除</button>
        </td>
      </tr>
      <tr>
        <td>2</td>
        <td>李小龙</td>
        <td>李振藩</td>
        <td>男</td>
        <td>1940-11-27</td>
         <td>《猛龙过江》</td>
        <td>
          <button class="layui-btn layui-btn-xs">编辑</button>
            <button class="layui-btn layui-btn-danger layui-btn-xs" onclick="del()">删除</button>
        </td>
      </tr>
      <tr>
        <td>3</td>
        <td>陈惠敏</td>
        <td>骆驼</td>
        <td>男</td>
        <td>1944-7-10</td>
         <td>《古惑仔3》</td>
        <td>
          <button class="layui-btn layui-btn-xs" >编辑</button>
            <button class="layui-btn layui-btn-danger layui-btn-xs" onclick="del()">删除</button>
        </td>
      </tr>
      <tr>
        <td>4</td>
        <td>成龙</td>
        <td>房仕龙</td>
        <td>男</td>
        <td>1954-4-7</td>
         <td>《警察故事》</td>
        <td>
          <button class="layui-btn layui-btn-xs" >编辑</button>
            <button class="layui-btn layui-btn-danger layui-btn-xs"onclick="del()" >删除</button>
        </td>
      </tr>
      <tr>
        <td>5</td>
        <td>刘波</td>
        <td>药水哥</td>
        <td>男</td>
        <td>1994-10-24</td>
         <td>《您配吗》</td>
        <td>
          <button class="layui-btn layui-btn-xs" >编辑</button>
            <button class="layui-btn layui-btn-danger layui-btn-xs" onclick="del()">删除</button>
        </td>
      </tr>
      <tr>
        <td>6</td>
        <td>吴京</td>
        <td>冷锋</td>
        <td>男</td>
        <td>1974-4-3</td>
         <td>《战狼》</td>
        <td>
          <button class="layui-btn layui-btn-xs" >编辑</button>
            <button class="layui-btn layui-btn-danger layui-btn-xs" onclick="del()">删除</button>
        </td>
      </tr>
      <tr>
        <td>7</td>
        <td>孙笑川</td>
        <td>带带大师兄</td>
        <td>男</td>
        <td>1990-5-12</td>
         <td>《抽象圣经》</td>
        <td>
          <button class="layui-btn layui-btn-xs" >编辑</button>
            <button class="layui-btn layui-btn-danger layui-btn-xs" onclick="del()">删除</button>
        </td>
      </tr>
    </tbody>
  
</table>
  <script type="text/javascript">
    layui.use(['layer'],function(){   
      layer = layui.layer;
      $ = layui.jquery;
    });

    // 删除
  function del(){
    layer.confirm('确定要删除么?', {
      icon:2,
      btn: ['确定', '取消'] //可以无限个按钮
    }, function(index, layero){
      //按钮【按钮一】的回调
    }, function(index){
      //按钮【按钮二】的回调
    });
    }
  </script>
</body>
</html>


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送