新的一天测试

2025-10-12 09:42:24 +08:00
parent d157e6c32b
commit 2e4fbfc22c
23 changed files with 0 additions and 0 deletions
--- a/01.前端Web(HTML+CSS)/14.tlias案例-搜索表单区域.html
+++ b/01.前端Web(HTML+CSS)/14.tlias案例-搜索表单区域.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tlias智能学习辅助系统</title>
+    <style>
+      body {
+        margin: 0;
+      }
+
+      /* 顶栏样式 */
+      .header {
+          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);
+      }
+      
+      /* 加大加粗标题 */
+      .header h1 {
+          margin: 0;
+          font-size: 24px;
+          font-weight: bold;
+      }
+
+      /* 文本链接样式 */
+      .header a {
+          text-decoration: none;
+          color: #333;
+          font-size: 16px;
+      }
+
+      /* 搜索表单区域 */
+      .search-form {
+          display: flex;
+          align-items: center;
+          padding: 20px;
+          background-color: #f9f9f9;
+      }
+
+      /* 表单控件样式 */
+      .search-form input[type="text"], .search-form select {
+          margin-right: 10px;
+          padding: 5px 10px;
+          border: 1px solid #ccc;
+          border-radius: 4px;
+          width: 200px;
+      }
+
+      /* 按钮样式 */
+      .search-form button {
+          padding: 5px 15px;
+          margin-left: 10px;
+          background-color: #007bff;
+          color: white;
+          border: none;
+          border-radius: 4px;
+          cursor: pointer;
+      }
+
+      /* 清空按钮样式 */
+      .search-form button.clear {
+          background-color: #6c757d;
+      }
+    </style>
+</head>
+<body>
+    <!-- 顶栏 -->
+    <div class="header">
+        <h1>Tlias智能学习辅助系统</h1>
+        <a href="#">退出登录</a>
+    </div>
+
+    <!-- 搜索表单区域 -->
+    <form class="search-form">
+      <input type="text" name="name" placeholder="姓名" />
+      <select name="gender">
+          <option value="">性别</option>
+          <option value="1">男</option>
+          <option value="2">女</option>
+      </select>
+      <select name="job">
+          <option value="">职位</option>
+          <option value="1">班主任</option>
+          <option value="2">讲师</option>
+          <option value="3">学工主管</option>
+          <option value="4">教研主管</option>
+          <option value="5">咨询师</option>
+      </select>
+      <button type="submit">查询</button>
+      <button type="reset" class="clear">清空</button>
+    </form>
+
+</body>
+</html>