首页 > 其他分享 >2024.9.25(周三)

2024.9.25(周三)

时间:2024-09-30 10:49:38浏览次数:8  
标签:25 5px color 2024.9 border 周三 background margin 背景图片

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <title>员工信息</title>
    <style>
        /* 整体页面布局和样式 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            background-image: url('img.jpg'); /* 添加背景图片 */
            background-size: cover; /* 使背景图片覆盖整个页面 */
            background-position: center; /* 背景图片居中 */
            background-repeat: no-repeat; /* 不重复背景图片 */
        }

        h1 {
            text-align: center;
            color: #f5f2f2;
        }

        form {
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            width: 400px;
            margin: 0 auto;
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        input[type="text"],
        input[type="number"],
        select {
            width: 100%;
            padding: 8px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }

        button {
            background-color: #007BFF;
            color: #fff;
            padding: 10px 15px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            display: block; /* Ensures button is a block element */
            margin: 0 auto; /* Centers the button */
        }

        button:hover {
            background-color: #0056b3;
        }

        /* 结果展示区域样式 */
        .result-section {
            margin-top: 20px;
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            width: 400px;
            margin: 0 auto;
        }

        h2 {
            color: #f3f0f0;
        }

        p {
            margin: 5px 0;
        }
    </style>
</head>
<body>

<h1>员工信息</h1>
<form method="post" action="processEmployee.jsp">
    <label for="employee_id">员工 ID</label>
    <input type="text" id="employee_id" name="employee_id" required>

    <label for="team_id">所属班组 ID</label>
    <input type="text" id="team_id" name="team_id" required>

    <label for="name">员工姓名</label>
    <input type="text" id="name" name="name" required>

    <label for="gender">性别</label>
    <select id="gender" name="gender" required>
        <option value="男">男</option>
        <option value="女">女</option>
    </select>

    <label for="hire_date">入职日期</label>
    <input type="text" id="hire_date" name="hire_date" required>

    <label for="position">职位</label>
    <input type="text" id="position" name="position" required>

    <label for="skill_level">技能等级</label>
    <select id="skill_level" name="skill_level" required>
        <option value="初级">初级</option>
        <option value="中级">中级</option>
        <option value="高级">高级</option>
    </select>

    <label for="contact_number">联系电话</label>
    <input type="text" id="contact_number" name="contact_number">

    <button type="submit">提交</button>
</form>

<%-- 结果展示部分 --%>
<%
    String employeeId = request.getParameter("employee_id");
    String teamId = request.getParameter("team_id");
    String name = request.getParameter("name");
    String gender = request.getParameter("gender");
    String hireDate = request.getParameter("hire_date");
    String position = request.getParameter("position");
    String skillLevel = request.getParameter("skill_level");
    String contactNumber = request.getParameter("contact_number");

    if (employeeId != null) {
%>
<div class="result-section">
    <h2>输入结果</h2>
    <p><strong>员工 ID:</strong> <%= employeeId %></p>
    <p><strong>所属班组 ID:</strong> <%= teamId %></p>
    <p><strong>员工姓名:</strong> <%= name %></p>
    <p><strong>性别:</strong> <%= gender %></p>
    <p><strong>入职日期:</strong> <%= hireDate %></p>
    <p><strong>职位:</strong> <%= position %></p>
    <p><strong>技能等级:</strong> <%= skillLevel %></p>
    <p><strong>联系电话:</strong> <%= contactNumber != null ? contactNumber : "无" %></p>
</div>
<%
    }
%>

</body>
</html>

 

标签:25,5px,color,2024.9,border,周三,background,margin,背景图片
From: https://www.cnblogs.com/Sunyiran/p/18441387

相关文章

  • 2024.9.27(周五)
    <%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPEhtml><html><head><title>物料信息</title><style>/*整体页面布局和样式*/......
  • 2024-2025-1 20241419《计算机基础与程序设计》第一周学习总结
    课程要求目标:基于VirtualBox虚拟机安装Ubuntu作业正文:基于VirtualBox虚拟机安装Ubuntu教材学习内容总结1.计算系统:由软件、硬件及其管理的数据组成的用于解决问题以及与其所处环境进行交互的一种动态实体。2.计算系统的分层:计算系统的各个具体组成部分。3.抽象:一种只保留......
  • 2024-2025-1 20241426《计算机基础与程序设计》第一周学习总结
    这个作业属于https://edu.cnblogs.com/campus/besti/2024-2025-1-CFAP;这个作业的要求在https://www.cnblogs.com/rocedu/p/9577842.html#WEEK01;这个作业的目标是:为了让我们充分熟悉教材,充分学习并理解计算机的相关技术和理论知识以及AI应用方法;正文:https://www.cnblogs.com/ljh......
  • 2024.9.29
    信2305-320234094刘奕阳importjava.util.Scanner;publicclassMESSystem{//产品工艺表privatestaticfinalString[][]PROCESS_TABLE={{"10","射蜡","柳泽羽"},{"20","修蜡","藤艺哲"},{"30&......
  • 2024-2025-1 20241318 《计算机基础与程序设计》第一周学习总结
    这个作业属于哪个课程<班级的链接>(如2024-2025-1-计算机基础与程序设计)这个作业要求在哪里<作业要求的链接>(如2024-2025-1计算机基础与程序设计第一周作业)这个作业的目标阅读浏览教材《计算机科学概论》并提出自己的问题,基于AI进行学习作业正文...本博客链接......
  • 学年(2024-2025-1) 学号(20241424)《计算机基础与程序设计》第一周学习总结
    学年(2024-2025)学号(20241424)《计算机基础与程序设计》第一周学习总结作业信息|这个作业属于2024-2025-1-计算机基础与程序设计)||-- |-- ||这个作业要求在2024-2025-1计算机基础与程序设计第一周作业)||这个作业的目标|<参考上面的学习总结模板,把学习过程通过博客(随笔)发表,博......
  • 【60天备战2024年11月软考高级系统架构设计师——第25天:分布式系统设计——BASE理论】
    BASE理论与CAP定理相对,主要用于高可用性需求较强的系统中。BASE理论提供了一种在高可用性和最终一致性之间进行权衡的方法。BASE理论的定义BASE理论是对CAP定理中一致性与可用性权衡的一种延展,它更倾向于牺牲强一致性以换取更高的可用性和容错性。BASE代表以下含义:Basica......
  • 2024-2025-1 20241327 《计算机基础与1程序设计》第1周学习总结
    作业信息|2024-2025-1-计算机基础与程序设计)||-- |-|2024-2025-1计算机基础与程序设计第一周作业)||快速浏览一遍教材计算机科学概论(第七版),课本每章提出至少一个自己不懂的或最想解决的问题并在期末回答这些问题|作业正文|...本博客链接 |教材学习内容总结-《计算机科学概......
  • 2024-2025第一周《计算机基础与程序设计》第一周学习总结
    这个作业属于哪个课程 2024-2025-1-计算机基础与程序设计(https://edu.cnblogs.com/campus/besti/2024-2025-1-CFAP))这个作业要求在哪里 [2024-2025-1计算机基础与程序设计第一周作业]这个作业的目标 本作业布置的目的是为了让我们充分熟悉教材,充分学习并理解计算机的相关技术和......
  • 2024-2025-1 20241410 《计算机基础与程序设计》第1周学习总结
    学期(如2024-2025-1)学号(如:20241300)《计算机基础与程序设计》第X周学习总结作业信息这个作业属于哪个课程<班级的链接>(如2024-2025-1-计算机基础与程序设计)这个作业要求在哪里<作业要求的链接>(如2024-2025-1计算机基础与程序设计第一周作业)这个作业的目标<写上......