jsp实现登录系统页面美化代码
时间: 2023-09-16 16:02:57 浏览: 175
JSP(JavaServer Pages)是一种用于在Java技术中生成动态网页的技术。实现登录系统页面美化的代码可以通过JSP和CSS样式来完成。
首先,在JSP页面中,我们可以通过HTML标签和JSP脚本来构建登录表单。可以使用input标签来提供用户名和密码输入框,以及一个提交按钮。
在页面头部的<style>标签中,我们可以定义样式来美化登录表单。可以设置表单的宽度、背景颜色、字体样式以及按钮颜色等。
示例代码如下:
```jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录系统</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
.container {
width: 300px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
}
.container h1 {
text-align: center;
color: #333;
}
.form-group {
margin-bottom: 10px;
}
.form-group label {
display: block;
font-size: 14px;
color: #555;
}
.form-group input {
width: 100%;
padding: 5px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 3px;
}
.form-group .btn-submit {
background-color: #007bff;
color: #fff;
padding: 10px;
font-size: 14px;
border: none;
border-radius: 3px;
width: 100%;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h1>登录系统</h1>
<form action="login.jsp" method="post">
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" name="username" id="username" required>
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" name="password" id="password" required>
</div>
<div class="form-group">
<input type="submit" value="登录" class="btn-submit">
</div>
</form>
</div>
</body>
</html>
```
以上就是一个简单的通过JSP实现登录系统页面美化的示例代码。在样式中,你可以根据需要进行调整和添加,以实现自己所需的美化效果。