用jsp写一段网站首页登录的代码包括css样式和js
时间: 2023-02-27 21:45:33 浏览: 57
好的,下面是用 JSP 写的一段网站首页登录的代码,包含 CSS 样式和 JavaScript:
```
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录页面</title>
<style>
/* 为登录框添加样式 */
#login-box {
width: 400px;
height: 250px;
margin: 100px auto;
border: 1px solid #ccc;
box-shadow: 2px 2px 3px #ccc;
padding: 20px;
}
/* 为表单元素添加样式 */
form {
margin: 0;
padding: 0;
}
form p {
margin: 10px 0;
}
form label {
display: block;
margin-bottom: 8px;
}
form input {
width: 100%;
height: 26px;
line-height: 26px;
padding: 0 10px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 3px;
}
form button {
width: 100%;
height: 32px;
line-height: 32px;
margin-top: 20px;
border: none;
border-radius: 3px;
background-color: #00b38a;
color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<div id="login-box">
<h1>登录</h1>
<form>
<p>
<label for="username">用户名</label>
<input type="text" id="username" name="username">
</p>
<p>
<label for="password">密码</label>
<input type="password" id="password" name="password">
</p>
<p>
<button type="button" onclick="login()">登录</button>
</p>
</form>
</div>
<script>
// 登录函数
function login() {
// 获取表单数据
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// 发送 AJAX 请求
var xhr = new XMLHttpRequest();
xhr.open