CSS在jsp中不起作用

Question

我正在开发我的第一个项目，但我遇到了 CSS 问题。 我无法在 jsp 文件中移动值。我已经并且想要将它移动到页面中间，但它不起作用。如果您有不清楚的地方，也对我的英语感到抱歉。我将非常感谢您的帮助。

header.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>

<title>${title}</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>


<script src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous"></script>

<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.css">

<link rel="stylesheet" type="text/css" href="/styles/style.css">

footer.jsp

<footer class="footer">
<div class="container">
    <p><a href="/"> Test Web-Application </a></p>
    <p >&copy 2018 All rights reserved.</p>
</div>

index.jsp

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<jsp:include page="tmp/header.jsp"/>

<div class="container">
<div class="page-header">
    <h1 class="title_position">Test project (Overview)</h1>
</div>
<br>
<p class="lead">Test 1: Product <a href="/products">Products</a>and <a href="/users">Users</a>
</p>

<br>
<p class="lead">Test 2: <a href="/users">show Users</a> </p>

<div class="page-header">
    <table id="users">
        <thead>
        <tr>
            <th class="disabled-sorting">#</th>
            <th>Name</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${users}" var="users">
            <tr>
                <td>${user.id}</td>
                <td>${user.username}</td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>

<br>
<p class="lead">Test 3: <a href="/categories>">Show categories</a> </p>
<div class="lead">
    <tbody>
    <c:forEach items="${categories}" var="category">
        <tr>
            <td>${category.id}</td>
            <td>${category.categoryOfProduct}</td>
        </tr>
    </c:forEach>
    </tbody>
</div>
<br>
<div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default">This button do nothing</button>
    </div>
</div>
<br>

style.css

html {
position: relative;
min-height: 100%;  }


body {
margin-bottom: 60px;}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;}

.custom-container {
width: auto;
max-width: 680px;
padding: 0 15px;}

.custom-container .text-muted {
margin: 20px 0;}

.title_position {
text-align: center;
font-size: xx-large;}
.menu-size{
font-size: 20px;}

.registrationForm{
background: lime;
text-align: center;}

.production_Page{
margin-left: 500px;}

.indexPage{
margin-left: 500px;}

Answer 1

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/css/style.css">

在 header.jsp 中使用它

<mvc:resources mapping="/resources/**" location="/Web-content/"></mvc:resources> 

dispatcher-servlet.xml 中的这一行

这会将您的 Web 内容文件夹映射到“资源”一词（不带引号）。这就是为什么在上面的链接标签中使用资源来连接 Web 内容文件夹。

确保您的 css 文件目录结构类似于 webapp/Web-content/css/style.css 以使用上面的链接标记。

PS：这是我关于堆栈溢出的第一个答案。所以，对于任何错误，我们深表歉意。

Answer 2

当您使用 JSP 时，我假设您使用的是 Spring 等框架。我在开发 Gradle Spring MVC 应用程序方面有一些经验，所以如果是这种情况，我可以提供帮助。

首先，您是否尝试过在 html 表单中使用样式标记来检查它是否是由于具有外部 css 造成的？这将是您是否尚未为项目设置路径以查找 css 的指标。

如果这是它在内部工作的情况（在样式标签中），您可能需要在应用程序文件中配置 css。例如，使用 Gradle，我将外部文件链接到 application.properties 文件中。

这是一个例子：

spring.mvc.view.prefix = /WEB-INF/views/
spring.mvc.view.suffix = .jsp
spring.mvc.static-path-pattern=/WEB-INF/resources/*

网上有很多关于设置外部文件（例如 CSS 和 JavaScript）的教程。就像我之前所说的，如果它在内部工作，那么这是由于 JSP 无法找到外部 CSS 文件。