5.7（红星照耀中国代码）
博客：2
代码量：200
1) index.jsp文件代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>登录</title>
<style>
body {
font-family: Arial, sans-serif;
background-image: url(images/dream.png);
background-size: cover;
background-position: center;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-container {
/* 为了让内容更清晰，我们添加了一个半透明的白色背景 */
border-radius: 8px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
text-align: center;
}
.login-container label {
display: inline-block;
width: 80px;
text-align: right;
margin-right: 10px;
}
.login-container input[type="text"],
.login-container input[type="password"] {
width: calc(100% - 100px);
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 16px;
}
.login-container input[type="button"] {
width: 100%;
padding: 10px;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
.login-container input[type="button"]:hover {
}
</style>
<script>
function submitButtonClickLogin() {
window.location.href = "login.jsp";
}
</script>
</head>
<body>
<div class="login-container">
<h1>理想照耀中国</h1>
<a href="login.jsp" style="color: rgba(37,106,132,0.8);font-size: 20px;">陈望道投身革命 江流为农妇鸣不平</a><br>
<a href="login.jsp" style="color: rgba(37,106,132,0.8);font-size: 20px;">张爵谦苦守文件 新中国成立</a><br>
<a href="login.jsp" style="color: rgba(37,106,132,0.8);font-size: 20px;">刘磊磊加入柔道队 苦练技术为国争光</a><br><br>
<form>
<input type="button" value="登录" onclick="submitButtonClickLogin()">
</form>
</div>
</body>
</html>
2) login.jsp文件代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>登录</title>
<style>
body {
font-family: Arial, sans-serif;
background-image: url(images/dream.png);
background-size: 100%;
background-position: center;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-container {
/* 为了让内容更清晰，我们添加了一个半透明的白色背景 */
border-radius: 8px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
text-align: center;
}
.login-container label {
display: inline-block;
width: 80px;
text-align: right;
margin-right: 10px;
}
.login-container input[type="text"],
.login-container input[type="password"] {
width: calc(100% - 100px);
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 16px;
}
.login-container input[type="button"] {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
.login-container input[type="button"]:hover {
background-color: #45a049;
}
</style>
<script>
function submitButtonClickLogin() {
var account = document.getElementById("account").value;
var password = document.getElementById("password").value;
window.location.href = "check.jsp?account=" + account + "&password=" + password;
}
</script>
</head>
<body>
<div class="login-container">
<h2>理想照耀中国</h2>
<form>
<input type="text" placeholder="请输入账号" id="account"><br>
<input type="password" placeholder="请输入密码" id="password"><br>
<input type="button" value="登录" onclick="submitButtonClickLogin()"><br>
</form>
</div>
</body>
</html>
3) Gushi.jsp文件代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>目录</title>
<style>
body {
font-family: Arial, sans-serif;
background-image: url(images/lixiang.png);
background-size:cover;
background-position: center;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-container {
border-radius: 8px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
text-align: center;
}
.login-container a {
display: block;
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 200px;
text-decoration: none; /* Remove default underline */
margin-top: -40px;
}
.login-container a:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="1.jsp" style="color: #d4680e;font-size: 50px;">陈望道投身革命 江流为农妇鸣不平</a><br>
<a href="2.jsp" style="color: #d4680e;font-size: 50px;">张爵谦苦守文件 新中国成立</a><br>
<a href="3.jsp" style="color: #d4680e;font-size: 50px;">刘磊磊加入柔道队 苦练技术为国争光</a>
</div>
</body>
</html>
