Question

我编写了一个项目，并希望在其中添加模板。除一种外，所有样式均适用。它对我“ styleadmin.css”不起作用。虽然我认为一切都写得正确。您可以查看您是否犯了一个错误并且书写不正确。我希望样式“ styleadmin.css”可以在两个页面上使用-AdminDecorator.JSP和allStudentsAdmin.JSP

AdminDecorator.JSP

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>Mountain King - Bootstrap Template</title>
        <!-- Bootstrap core CSS -->
        <link href="bootstrap/css/theme.css" rel="stylesheet">
        <!-- Custom styles for this template -->
        <link href="css/styleadmin.css" rel="stylesheet">
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
        <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,300,700,100' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Raleway:300,700,900,500' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.7/typicons.min.css">
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="css/pushy.css">
        <link rel="stylesheet" href="css/masonry.css">
        <link rel="stylesheet" href="css/animate.css">
        <link rel="stylesheet" href="css/magnific-popup.css">
        <link rel="stylesheet" href="css/odometer-theme-default.css">
        <script>
        window.odometerOptions = {
          selector: '.odometer',
          format: '(,ddd)', // Change how digit groups are formatted, and how many digits are shown after the decimal point
          duration: 13000, // Change how long the javascript expects the CSS animation to take
          theme: 'default'
        };
        </script>

</head>
<!DOCTYPE html>
<body class="">
      <!-- Pushy Menu -->
      <nav class="pushy pushy-left">
        <ul class="list-unstyled">
            <li><a href="#home">Home</a></li>
            <li><a href="#feat">Features</a></li>
            <li><a href="#about">About me</a></li>
            <li><a href="#news">My Blog</a></li>
            <li><a href="#history">My History</a></li>
            <li><a href="#photos">Look my Photos</a></li>
            <li><a href="#contact">Get in Touch!</a></li>
        </ul>
      </nav>

      <!-- Site Overlay -->
      <div class="site-overlay"></div>

        <header id="home">
            <div class="container-fluid">
                <!-- change the image in style.css to the class header .container-fluid [approximately row 50] -->
                <div class="container">
                    <div class="row">
                        <div class="col-md-3 col-xs-10">
                            <a href="#" class="thumbnail logo">
                                <img src="images/your_logo.png" alt="" class="img-responsive">
                            </a>
                        </div>
                        <div class="col-md-1 col-md-offset-8 col-xs-2 text-center">
                          <div class="menu-btn"><span class="hamburger">&#9776;</span></div>
                        </div>
                    </div>

        </footer>
        <!-- Bootstrap core JavaScript
    ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="js/jquery.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap-scrollspy.js"></script>
        <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
        <script src="/js/ie10-viewport-bug-workaround.js"></script>
        <script src="http://masonry.desandro.com/masonry.pkgd.js"></script>
        <script src="js/masonry.js"></script>
        <script src="js/pushy.min.js"></script>
        <script src="js/jquery.magnific-popup.min.js"></script>
        <script src="js/wow.min.js"></script>
        <script src="js/scripts.js"></script>
        <script src="js/odometer.js"></script>


        <sitemesh:write property='body'/>
    <jsp:include page="/WEB-INF/template/admintemplate.jsp"/>  
    </body>
</html>

styleadmin.css

/*------------------------------------*\
    COMMONS CLASSES
\*------------------------------------*/

h1, h2, h3, h4, h5, h6
{
    font-family: 'Roboto Slab', serif;
}

h1, h2, h3, h4, h5, h6
{
    margin-bottom: 1.1em;
}

.features,
.blog,
.gallery,
.clients,
.prefooter .container-fluid
{
    padding-top: 3.3em;
    padding-bottom: 4.2em;
}

span.typcn::before, i.typcn::before
{
    font-size: 2em;
}

span.x2:before, i.x2:before
{
    font-size: 3.4em;
}

span.x3:before, i.x3:before
{
    font-size: 4.4em;
}

span.x4:before, i.x4:before
{
    font-size: 6em;
}


/*------------------------------------*\
    HEADER
\*------------------------------------*/

header .container-fluid
{
    background-image: url('https://unsplash.it/2560/1707?image=961');
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    padding-top: 36px;
}

.hamburger
{
    font-size: 2.3em;
    color: #000;
}

.hamburger:hover
{
  color: #FFF;
  cursor: pointer;
}


.logo
{
    background: none;
    border: 0px;
}

.jumbotron
{
    background: none;
    text-align: center;
}

.jumbotron h1,
.jumbotron h2,
.jumbotron h3,
.jumbotron h4,
.jumbotron h5,
.jumbotron h6,
.jumbotron small
{
    color: #FFFFFF;
}

.jumbotron p
{
    color: #FFFFFF;
    margin-bottom: 5%;
}


/*------------------------------------*\
    SECTIONS
\*------------------------------------*/

.number .container-fluid
{
    background-image: url('https://unsplash.it/3000/2000?image=685');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.opaline
{
    padding-top: 3em;
    padding-bottom: 3em;
    background-color: rgba(128, 215, 247, 0.660);
}

.opaline h1,
.opaline h2,
.opaline h3,
.opaline h4,
.opaline h5,
.opaline h6,
.opaline p
{
    color: #FFFFFF;
}

.opaline .boxes
{
    margin-top: 30px;
    padding-top: 20px;
    padding-bottom: 5px;
    border: 1px solid #FFF;
}

.boxes .odometer.odometer-theme-default
{
  font-family: 'Roboto Slab', serif;
}

.story .container-fluid
{
    background-image: url('https://unsplash.it/3000/2000?image=531');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.gallery
{
    background-color: #dddddd;
}

.prefooter .container-fluid
{
    background: linear-gradient(
      rgba(33, 37, 43, 0.6),
      rgba(33, 37, 43, 0.6)
    ),

    url(https://unsplash.it/4000/3000?image=528);
}

.prefooter h1,
.prefooter h2,
.prefooter h3,
.prefooter h4,
.prefooter h5,
.prefooter h6,
.prefooter p
{
    color: #FFFFFF;
}

/*------------------------------------*\
    FOOTER
\*------------------------------------*/

footer
{
    background-color: rgba(36, 50, 59, 1);
    padding-top: 2em;
    padding-bottom: 1.2em;
}

footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6,
footer p
{
    color: #FFFFFF;
}

.social
{
    padding-top: 50px;
}

AllStudentsAdmin.JSP

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
        <link href="/css/styleadmin.css" rel="stylesheet" type="text/css">
        <style><%@include file="/css/styleadmin.css"%></style>
        <title>Все студенты</title>
    </head>
    <body>
            <br>
            <br>
            <br>
            <br>
            <div class="it">
                <h3 style="color:greenyellow" >Список всех студентов</h3>
                ${message}

                <br>
                <br>
                <table class="table">
                    <thead>
                        <tr>
                            <th bgcolor="#000000"><font color="#green" scope="col"># </font></th>
                            <th bgcolor="#000000"><font color="#green" scope="col">Name </font></th>

                            <th bgcolor="#000000"><font color="#green" scope="col">Surname </font></th>
                            <th bgcolor="#000000"><font color="#green" scope="col">Avatar </font></th>
                            <th bgcolor="#000000"><font color="#green" scope="col">Edit </font></th>
                            <th bgcolor="#000000"><font color="#green" scope="col">Delete </font></th>

                        </tr>
                    </thead>
                    <tbody>
                        <c:forEach var="student" items="${studentList}">
                            <tr>
                                 <th bgcolor="#000000"><font color="#fff"  scope="row">1 </font></th>
                                 <td bgcolor="#000000"><font color="#fff">${student.name}</font></td>
                                 <td bgcolor="#000000"><font color="#fff">${student.surname}</font></td>

                                <td bgcolor="#000000">
                                    <c:if test="${empty student.avatar}">
                                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/No_image_available.svg/768px-No_image_available.svg.png"
                                             style="max-height: 200px; max-width: 200px;"/>
                                    </c:if>
                                    <c:if test="${not empty student.avatar}">
                                        <img src="${pageContext.request.contextPath}/avatar?avatar=${student.avatar}"
                                             style="max-height: 200px; max-width: 200px;"/>
                                    </c:if>
                                </td>

                                <td bgcolor="#000000">
                                    <a href="${pageContext.request.contextPath}/admin/editStudent/${student.id}">
                                        <button type="button" class="btn btn-primary">Edit</button>
                                    </a>
                                </td>
                                <td bgcolor="#000000">
                                    <a href="${pageContext.request.contextPath}/admin/deleteStudent/${student.id}">
                                        <button type="button" class="btn btn-primary">Delete</button>
                                    </a>
                                </td>
                            </tr>
                        </c:forEach>
                    </tbody>
                </table>

            </div>

    </body>
</html>

MySitemeshFilter

public class MySiteMeshFilter extends ConfigurableSiteMeshFilter {

  @Override
  protected void applyCustomConfiguration(SiteMeshFilterBuilder builder) {

            builder.addDecoratorPath("/*", "/WEB-INF/decorators/homeDecorator.jsp");

           builder.addDecoratorPath("/allStudents", "/WEB-INF/decorators/homeDecorator.jsp");

           builder.addDecoratorPath("/login", "/WEB-INF/decorators/loginDecorator.jsp");
           builder.addDecoratorPath("/admin/allStudentsAdmin", "/WEB-INF/decorators/adminDecorator.jsp");

Answer 1

您的AdminDecorator.JSP和allStudentsAdmin.JSP位于何处。如果CSS文件夹之外有1个级别，则必须编写。如果您可以共享实时URL，我可以帮助您提供确切的路径。

Answer 2

you can try this if you want to go back one folder right there ./ Or want to back up two folders right there ../ Thanks

为什么我的CSS文件在我的项目中不起作用

2 个答案: