![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：
Collection
Collection
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>员工管理后台</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <!-- 头部 --> <div class="top c"> <div class="ltop"><h2>员工管理系统</h2></div> <div class="rtop"> <a href=""><span>管理员：***|***</span></a> <a href="">退出</a> </div> </div> <!-- 中部 内容 --> <div class="content c"> <div class="lContent"> <a href="admin/list.php" target="list">员工管理</a> <a href="https://www.baidu.com/" target="list">文章管理</a> <a href="" target="list">>公告管理</a> <a href="" target="list">>用户设置</a> <a href="" target="list">>权限管理</a> <a href="" target="list">>投注记录</a> <a href="" target="list">>系统设置</a> </div> <div class="rContent"> <iframe src="" name="list" id="lister" width="900" height="550" frameborder="0"></iframe> </div> </div> <!-- 底部 --> <div class="footer c"></div> </body> </html>
点击 "运行实例" 按钮查看在线实例
*{margin: 0px;padding: 0px;}
a{text-decoration: none;font-size:15px;color: black;}
body{background: #ccc;}
.c{margin: 0 auto;}
/* 头部 */
.top{width: 1200px;height: 100px;background: #888;border-bottom: 1px solid #fff;}
.ltop{float: left;width:299px;height: 100px;text-align: center;line-height: 100px;}
.rtop{float: right;margin-right: 50px;}
.rtop a{display: inline-block;text-align: center;line-height: 100px;}
/* 中部 内容 */
.content{width: 1200px;height: 550px;}
/* 中左导航 */
.lContent{width: 299px;height: 550px;background: #888;float: left;border-right: 1px solid #fff;}
.lContent a{display: block;text-align: center;width: 100%;height: 50px;font-size:16px;
line-height: 50px; }
.lContent a:hover{background: #676767;color: #fff;}
/* 中右内容 */
.rContent{width: 900px;height: 550px;background: #ccc;float: left;}
/* 底部 */
.footer{width: 1200px;height: 50px;background: #ccc;border-top: 1px solid black;}点击 "运行实例" 按钮查看在线实例
list 文件代码
实例
<?php // 文件标题 $title = '员工管理'; // 员工信息 $Tabyginfo = [ ['id'=>1,'name'=>'赵晋虎','sex'=>'1','age'=>18,'department'=>'财务','hiredate'=>'2019-02-01','resignation'=>'2019-30-01'], ['id'=>2,'name'=>'赵晋虎','sex'=>'1','age'=>18,'department'=>'财务','hiredate'=>'2019-02-01','resignation'=>'2019-30-01'], ['id'=>3,'name'=>'赵晋虎','sex'=>'1','age'=>18,'department'=>'财务','hiredate'=>'2019-02-01','resignation'=>'2019-30-01'], ['id'=>4,'name'=>'赵晋虎','sex'=>'1','age'=>18,'department'=>'财务','hiredate'=>'2019-02-01','resignation'=>'2019-30-01'], ['id'=>5,'name'=>'赵晋虎','sex'=>'1','age'=>18,'department'=>'财务','hiredate'=>'2019-02-01','resignation'=>'2019-30-01'] ]; // 表格标题 $thead = '员工信息表'; // 员工数量 $num = count($Tabyginfo); ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>员工管理</title> <link rel="stylesheet" href="css/style1.css"> </head> <body> <div class="top"> <h2><?=$thead?></h2> <div> <span>当前位置：</span> <input type="text"> </div> </div> <div class="table"> <table width="860px" border="1" bordercolor="#bbb" cellspacing="0" cellpadding="0" align="center"> <tr> <th>工号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>部门</th> <th>入职时间</th> <th>离职时间</th> <th>操作</th> </tr> <?php foreach($Tabyginfo as $staff):?> <tr> <td><?=$staff['id']?></td> <td><?=$staff['name']?></td> <td><?=$staff['sex']?></td> <td><?=$staff['age']?></td> <td><?=$staff['department']?></td> <td><?=$staff['hiredate']?></td> <td><?=$staff['resignation']?></td> <td> <button>编辑</button> <button>删除</button> </td> </tr> <?php endforeach;?> </table> <p>总计：<?=$num ?>人</p> </div> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
list CSS代码
实例
*{margin: 0px;padding: 0px;} a{text-decoration: none;font-size:15px;color: black;} body{background: #ccc;width: 860px;max-height: 400px;margin: 0px auto;} td{text-align: center;} p{text-align: center;} table{margin: 0px auto;} .top{width: 860px;height: 100px;text-align: center;line-height: 50px;} .top div{width: 860px;height: 50px;float: right;margin-bottom: 0px;background: #888;text-align: left;} .top div span{margin-left: 10px;} .top input{width: 200px;height: 25px;float: right;margin: 10px 5px 10px ;padding-left: 10px;}
运行实例 »点击 "运行实例" 按钮查看在线实例