网页设计css

最新推荐文章于 2024-10-09 09:17:59 发布
影Nothing
最新推荐文章于 2024-10-09 09:17:59 发布
阅读量350
点赞数 7
文章标签： css 前端
本文链接：https://blog.csdn.net/qq_74105106/article/details/135143163
版权
本文详细描述了一个包含姓名输入、性别选择、日期范围和查询功能的员工管理系统，以及表格展示和分页选项的设计。
摘要由CSDN通过智能技术生成
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第二次练习</title>
    <style type="text/css">
        #p1{
            text-align: left;
            color: deepskyblue;
            font-size: larger;
        }
        #h{
            float: left;
            margin-top: 10px;
        }
        #h1{
            width: 180px;
            height: 40px;
            margin-right: 60px;
        }
        #h2{
            width: 180px;
            height: 40px;
            margin-right: 60px;
            background-color: gainsboro;
        }
        #word1{
            font-size: large;
            margin-right: 20px;
        }
        #word2{
            font-size: large;
            color: gainsboro;
        }
        #word3{
            margin-left: 50px;
            margin-right: 20px;
        }
        #check{
            width: 100px;
            height: 45px;
            background-color:lightskyblue;
            margin-right: 60px;
            border: none;
            font-size: medium;
            font-weight: bold;
            color: aliceblue;
        }
        .h3{
            width:300px;
            height: 70px;
        }
        .h3-1{
            float: left;
            margin-top:40px;
            background-color: lightskyblue;
            font-size: medium;
            color: aliceblue;
            width: 100px;height: 45px;
            border: none;
        }
        .h3-2{
            margin-top:40px;
            background-color: lightskyblue;
            font-size: medium;
            color: aliceblue;
            width: 100px;height: 45px;
            border: none;
            margin-left: 20px;
        }
        .clear{clear: both;}
        table,th,td{ border:0.5px solid silver;border-spacing: 0;}
        table{caption-side: top;}
        #h4{
            margin-top: 20px;
            width:1200px;
            height:350px;
        }
        .th{
            height: 50px;
            background-color: gainsboro;
        }
        .col1{
            width: 50px;
        }
        .checkbox{width: 20px;}
        .yellow{
            color: orange;
            margin: 0 auto
        }
        #h5{
            float: left;
            width:1200px;
            height: 50px;
            margin: 20px;
        }
        .h5-box{
            width: 35px;
            height: 40px;
            background-color:gainsboro ;
        }
        .h5{
            width: 50px;
            height: 25px;
            border: 1px solid lightgray;
            margin-right: 10px;
            float: right;
        }
        #d6{
            float:right;
            margin-left: 8px;
            margin-right: 8px;
        }
        .w{
            width: 8px;
        }
    </style>
</head>
<body>
    <div>
        <p id="p1">员工管理</p>
        <form method="post">
            <div id="h">
                <span id="word1">姓名</span><input type="text" id="h1" value="请输入员工姓名">
                <span id="word3">性别</span>
                <select id="h2">
                    <option selected>请选择</option>
                    <option>男</option>
                    <option>女</option>
                </select>
                <span id="word3">入职时间&nbsp;&nbsp;&nbsp;从&nbsp;&nbsp;&nbsp;</span>
                <input type="text"  id="h1" value="开始时间&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;结束时间">
                <button id="check">查询</button>
            </div>
            <div class="clear"></div>
        </form>
        <form method="post">
            <div class="h3">
                <button class="h3-1">+新增员工</button>
                <button class="h3-2">+批量删除</button>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
        </form>
        <table id="h4">
            <thead class="th">
                <tr>
                    <th><input type="checkbox" class="checkbox"></th>
                    <th>姓名</th>
                    <th>图像</th>
                    <th>性别</th>
                    <th>职位</th>
                    <th>入职申请</th>
                    <th>最后操作时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody <table align="center">
                <tr>
                    <td><input type="checkbox"></td>
                    <td>赵敏</td>
                    <td>女</td>
                    <td><img src="./zuoye.png"></td>
                    <td>班主任</td>
                    <td>2008-12-18</td>
                    <td>2022-7-22&nbsp;12:05:20</td>
                    <td class="yellow">编辑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;删除</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>风清扬</td>
                    <td>男</td>
                    <td><img src="./zuoye.png"></td>
                    <td>讲师</td>
                    <td>2015-07-22</td>
                    <td>2022-7-21&nbsp;15:00:00</td>
                    <td class="yellow">编辑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;删除</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>风清扬</td>
                    <td>男</td>
                    <td><img src="./zuoye.png"></td>
                    <td>讲师</td>
                    <td>2015-07-22</td>
                    <td>2022-7-21&nbsp;15:00:00</td>
                    <td class="yellow">编辑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;删除</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>风清扬</td>
                    <td>男</td>
                    <td><img src="./zuoye.png"></td>
                    <td>讲师</td>
                    <td>2015-07-22</td>
                    <td>2022-7-21&nbsp;15:00:00</td>
                    <td class="yellow">编辑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;删除</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>风清扬</td>
                    <td>男</td>
                    <td><img src="./zuoye.png"></td>
                    <td>讲师</td>
                    <td>2015-07-22</td>
                    <td>2022-7-21&nbsp;15:00:00</td>
                    <td class="yellow">编辑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;删除</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>风清扬</td>
                    <td>男</td>
                    <td><img src="./zuoye.png"></td>
                    <td>讲师</td>
                    <td>2015-07-22</td>
                    <td>2022-7-21&nbsp;15:00:00</td>
                    <td class="yellow">编辑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;删除</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>风清扬</td>
                    <td>男</td>
                    <td><img src="./zuoye.png"></td>
                    <td>讲师</td>
                    <td>2015-07-22</td>
                    <td>2022-7-21&nbsp;15:00:00</td>
                    <td class="yellow">编辑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;删除</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>风清扬</td>
                    <td>男</td>
                    <td><img src="./zuoye.png"></td>
                    <td>讲师</td>
                    <td>2015-07-22</td>
                    <td>2022-7-21&nbsp;15:00:00</td>
                    <td class="yellow">编辑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;删除</td>
                </tr>
            </tbody>
        </table>
        <form method="post">
            <div id="h5">
                <span >每页展示数</span>
                <select class="h5-box">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
                <div id="d6">
                    <input type="text" value="<" class="w">
                    <input type="text" value="1" class="w">
                    <input type="text" value="2" class="w">
                    <input type="text" value="3" class="w">
                    <input type="text" value="4" class="w">
                    <input type="text" value="5" class="w">
                    <input type="text" value="……" class="w">
                    <input type="text" value="50" class="w">
                    <input type="text" value=">" class="w">
            </div>
        </form>
    </div>
</body>
</html>