这是一个HTML + CSS的综合练习案例，效果如图所示：
HTML代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单综合案例</title><link rel="stylesheet" href="CSS/CSS07.css">
</head>
<body><div class="web"><div class="nav"><h1>tlias 智能学习辅助系统</h1><button type="submit">退出登录</button></div><div class="search"><form action="#" target="_blank"><label for="name">姓名 </label><input type="text" id="name" placeholder="请输入员工姓名"><label for="gender">性别 </label><select name="gender" id="gender"><option value="-1" selected="selected">请选择员工性别</option><option value="1">男</option><option value="2">女</option></select><label for="job">职位 </label><select name="job" id="job"><option value="-1" selected="selected">请选择员工的职位</option><option value="1">班主任</option><option value="2">讲师</option></select><button type="submit">查询</button><button type="reset">清空</button></form> </div><div class="table"><table class="information_table"><thead><th>姓名</th><th>性别</th><th>职位</th><th>入职日期</th><th>操作时间</th><th>操作</th></thead><tbody><tr><td>张三</td><td>男</td><td>班主任</td><td>2008-12-18</td><td>2024-12-16</td><td><a href="#">编辑</a><a href="#">删除</a></td></tr><tr><td>李四</td><td>男</td><td>班主任</td><td>2008-12-18</td><td>2024-12-16</td><td><a href="#">编辑</a><a href="#">删除</a></td></tr><tr><td>王五</td><td>男</td><td>班主任</td><td>2008-12-18</td><td>2024-12-16</td><td><a href="#">编辑</a><a href="#">删除</a></td></tr><tr><td>赵六</td><td>男</td><td>班主任</td><td>2008-12-18</td><td>2024-12-16</td><td><a href="#">编辑</a><a href="#">删除</a></td></tr><tr><td>钱七</td><td>男</td><td>班主任</td><td>2008-12-18</td><td>2024-12-16</td><td><a href="#">编辑</a><a href="#">删除</a></td></tr><tr><td>周八</td><td>男</td><td>班主任</td><td>2008-12-18</td><td>2024-12-16</td><td><a href="#">编辑</a><a href="#">删除</a></td></tr></tbody></table></div><footer class="footer"><p class="company-name">123456789</p><p class="copyright">版权所有 Copyright 2006-2024 All Rights Reserved</p></footer></div></body>
</html>CSS样式代码：
* {margin: 0;padding: 0;
}.web {width: 80%;margin: 0 auto;
}.nav {background-color:#f1f1f1;/* 这是弹性布局，还没看 */display: flex;justify-content: space-between;align-items: center;background-color: #f1f1f1;padding: 10px 20px;box-shadow: 0 2px 5px rgba(0,0,0,0.1);font-family: "楷体";
}.nav h1 {margin: 0;font-size: 40px;font-weight: bold;
}.nav button {background-color: #f1f1f1;color: black;border-radius: 4px;font-size: 17px;border: none;
}/* 设置查询栏（表单） */
.search {display: flex;align-items: center;padding: 20px;background-color: #f9f9f9;
}/* 设置表单控件 */
.search input[type="text"], .search select {margin-right: 10px;padding: 5px 10px;border: 1px solid #ccc;border-radius: 4px;width: 200px;
}/* 设置查询按钮（提交按钮） */
.search button {padding: 5px 15px;margin-left: 10px;background-color: #007bff;color: white;border: none;border-radius: 4px;
}.search button[type="reset"] {background-color: #6c757d;
}.information_table {/* min-width: 100%; */width: 100%;border-collapse: collapse;/* margin: 0 20px; */
}.information_table td, .information_table th {border: 1px solid #ddd;padding: 8px;text-align: center;
}table a {color: orange;text-decoration: none;
}table a:hover {color: #007bff;text-decoration: underline;
}/* 页脚版权 */
.footer {background-color: #8f8c8c;color: white;text-align: center;padding: 20px 0;margin-top: 30px;
}.footer .company-name {font-size: 1.1em;font-weight: bold;
}.footer .copyright {font-size: 0.9em;
}
