Day 06

最新推荐文章于 2025-07-18 14:33:26 发布

原创最新推荐文章于 2025-07-18 14:33:26 发布 · 125 阅读

CC 4.0 BY-SA版权

本文介绍了一个人员管理系统的界面设计，包括学院、学员和教师管理模块，展示了如何使用HTML、CSS和JavaScript实现响应式表格和下拉菜单，以及操作按钮如删除、修改和编辑。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>人员管理系统</title>
    <link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
    <script src="./jQuery/jquery-3.4.1.min.js"></script>
    <script src="./bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</head>
<style>
    td{
        width: 200px;
    }
    .btn_sc{
        background-color: red;
        float: left;
        border: 1px solid black;
        color: white
    }
    .btn_xg{
        background-color: white;
        margin-left: 20px;
        float: left;
        border: 1px solid black;
    }
    .btn_bj{
        background-color: blue;
        margin-left: 20px;float: left;
        border: 1px solid black;
        color: white

    }
</style>
<body>
<div class="container text-center" >

    <table class="table table-striped table-bordered table-hover" >
        <tr>
            <td>一个学院管理界面</td>
            <td>学员管理</td>
            <td>教师管理</td>
            <td>
                <div class="dropdown" style="margin-left: 50px;">
                    <button class="btn dropdown-toggle" data-toggle="dropdown">
                        其他管理<span class="caret" ></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a href="">其他1</a></li>
                        <li><a href="">其他2</a></li>
                        <li><a href="#">其他3</a></li>
                    </ul>
                </div>
            </td>
        </tr>
    </table>
</div>
<div class="container" >
    <table class="table table-striped table-bordered table-hover">
        <thead>
        <tr>
            <td>学号</td>
            <td>姓名</td>
            <td>班级</td>
            <td>学院</td>
            <td>管理</td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>李子明1</td>
            <td>101</td>
            <td>xx学院1</td>
            <td><button class="btn btn_sc">删除</button>
                <button  class="btn btn_xg">修改</button>
                <button class="btn btn_bj">编辑</button></td>
        </tr>
        <tr>
            <td>2</td>
            <td>李子明2</td>
            <td>102</td>
            <td>xx学院2</td>
            <td><button class="btn btn_sc">删除</button>
                <button  class="btn btn_xg">修改</button>
                <button class="btn btn_bj">编辑</button></td>
        </tr>
        <tr>
            <td>3</td>
            <td>李子明3</td>
            <td>103</td>
            <td>xx学院3</td>
            <td><button class="btn btn_sc">删除</button>
                <button  class="btn btn_xg">修改</button>
                <button class="btn btn_bj">编辑</button></td>
        </tr>
        <tr>
            <td>4</td>
            <td>李子明4</td>
            <td>104</td>
            <td>xx学院4</td>
            <td><button class="btn btn_sc">删除</button>
                <button  class="btn btn_xg">修改</button>
                <button class="btn btn_bj">编辑</button></td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>

在这里插入图片描述