<%@ 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: #eee9e9; } 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: #eae3e3; } p { margin: 5px 0; } </style> </head> <body> <h1>设备信息</h1> <form method="post" action="processEquipment.jsp"> <label for="equipment_id">设备 ID</label> <input type="text" id="equipment_id" name="equipment_id" required> <label for="equipment_name">设备名称</label> <input type="text" id="equipment_name" name="equipment_name" required> <label for="team_id">所属班组 ID</label> <input type="text" id="team_id" name="team_id" required> <label for="purchase_date">购买日期</label> <input type="text" id="purchase_date" name="purchase_date" required> <label for="manufacturer">制造商</label> <input type="text" id="manufacturer" name="manufacturer" required> <label for="last_maintenance_date">上次维护日期</label> <input type="text" id="last_maintenance_date" name="last_maintenance_date"> <label for="next_maintenance_date">下次维护日期</label> <input type="text" id="next_maintenance_date" name="next_maintenance_date"> <label for="status">设备状态</label> <select id="status" name="status" required> <option value="正常">正常</option> <option value="故障">故障</option> <option value="维修中">维修中</option> </select> <button type="submit">提交</button> </form> <%-- 结果展示部分 --%> <% String equipmentId = request.getParameter("equipment_id"); String equipmentName = request.getParameter("equipment_name"); String teamId = request.getParameter("team_id"); String purchaseDate = request.getParameter("purchase_date"); String manufacturer = request.getParameter("manufacturer"); String lastMaintenanceDate = request.getParameter("last_maintenance_date"); String nextMaintenanceDate = request.getParameter("next_maintenance_date"); String status = request.getParameter("status"); if (equipmentId != null) { %> <div class="result-section"> <h2>输入结果</h2> <p><strong>设备 ID:</strong> <%= equipmentId %></p> <p><strong>设备名称:</strong> <%= equipmentName %></p> <p><strong>所属班组 ID:</strong> <%= teamId %></p> <p><strong>购买日期:</strong> <%= purchaseDate %></p> <p><strong>制造商:</strong> <%= manufacturer %></p> <p><strong>上次维护日期:</strong> <%= lastMaintenanceDate != null ? lastMaintenanceDate : "无" %></p> <p><strong>下次维护日期:</strong> <%= nextMaintenanceDate != null ? nextMaintenanceDate : "无" %></p> <p><strong>设备状态:</strong> <%= status %></p> </div> <% } %> </body> </html>
标签:周四,26,5px,color,2024.9,border,background,margin,背景图片 From: https://www.cnblogs.com/Sunyiran/p/18441391