我有一个样式恰到好处的主页 jsp。在底部我有一个按钮，可以将您带到另一个 JSP。此 JSP 似乎不响应任何 CSS 样式。我在每一页上都有几乎相同的布局，我想要基本相同的样式，第二页的工作方式与第一页不同；是什么赋予了 ？我也尝试将相同的样式表附加到两个页面，但问题是一样的，第一页的样式设置了第二页的样式。它与链接到的第二页有关系吗？
谢谢!
编辑:您应该知道文件在正确的文件夹中，所有 css 文件都在 css 文件夹中，如前所述，并且这两个页面位于网络应用程序的基本目录中。
第 1 页:
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Flash Card Shark!</title>
<link href="css/jquery-ui.css" rel="stylesheet" />
<link href="css/HomeScreenCustomSheet.css" rel="stylesheet" />
</head>
<body>
<h1>Brave the Treacherous Waters</h1>
<div class="centerLoginScreen">
<form action="${pageContext.request.contextPath}/Home" method="POST">
<p>username: <input type="text" name="username" class="username"/></p>
<p>password: <input type="pass" name="password" class="username" /></p>
<p><input type="submit" value="submit" id="loginbutton" class="buttons" /></p>
</form>
<div class="buttons">
<p><a href="registrationPage.jsp"><button id="registerbutton">Register a new account</button></a>
</div>
</div>
<script src="js/homescreen.js"></script>
</body>
</html>
第 1 页的样式表，这个有效:
.centerLoginScreen {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); /* Yep! */
width: 48%;
height: 59%;
display: inline-block;
text-align: center;
background-color: #ADD8E6;
}
input {
text-align: center;
position: relative;
width: 300px;
margin: auto;
}
.buttons {
text-align: center;
position: relative;
width: max-content;
width: 300px;
margin: auto;
}
第 2 页:
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Welcome To Flash Card Shark</title>
<link href="css/registrationPageCustomSheet.css" rel="stylsheet" />
</head>
<body>
<div class="centerRegistrationScreen">
<form action="registrationPage.jsp" method="POST">
<p>username: <input type="text" name="username"/></p>
<p>password: <input type="text" name="password"/></p>
<p>First Name: <input type="text" name="firstname" /></p>
<p>Last Name: <input type="text" name="lastname" /></p>
<p>Email: <input type="text" name="email" /></p>
<p><input type="submit" name="submit" /></p>
<sql:setDataSource dataSource="jdbc/FlashCardShark" url="jdbc:derby://localhost:1527/FlashCards"
driver="org.apache.derby.jdbc.ClientDriver" user="maxbisesi"
password="Basketball12"
var="registerDB" />
<sql:update dataSource="${registerDB}">
Insert into FlashUser(username,password,firstname,lastname,email) values(?,?,?,?,?)
<sql:param value="${param.username}"/>
<sql:param value="${param.password}"/>
<sql:param value="${param.firstname}"/>
<sql:param value="${param.lastname}"/>
<sql:param value="${param.email}" />
</sql:update>
</form>
</div>
</body>
第 2 页的样式表，对此表的更改不会执行任何操作:
.centerRegistrationScreen {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); /* Yep! */
width: 48%;
height: 59%;
display: inline-block;
text-align: center;
background-color: #ADD8E6;
}
input {
text-align: center;
position: relative;
width: 300px;
margin: auto;
}
最佳答案
尝试这样的事情
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/HomeScreenCustomSheet.css" />
或
<style><%@include file="/WEB-INF/css/HomeScreenCustomSheet.css"%></style>
关于html - JSP 不识别样式表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49352991/