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

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

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

如果它在内部工作（在样式标记中），则可能需要在应用程序文件中配置css。例如，使用Gradle I将我的外部文件链接到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文件。

Answer 2

<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：这是我关于堆栈溢出的第一个答案。所以，对任何错误道歉。

CSS不适用于jsp

2 个答案: