CSS文件未加载:

时间:2017-10-14 18:58:51

标签: javascript css twitter-bootstrap twitter-bootstrap-3 thymeleaf

我正在努力学习百里香。我是通过引用" petclinic spring项目"来实现的。我能够创建一个带有百万美元标签的html页面。我能够加载java脚本但无法加载css文件。我不确定我做错了什么。

下面是我的html文件

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:ddl="http://www.thymeleaf.org/dandelion"
      xmlns:dt="http://github.com/dandelion/datatables"
      ddl:bundle-includes="bootstrap3"
      lang="en">

<head>

<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<title th:text="#{app.title}">Niti</title>

<link href="../static/css/main.css" th:href="@{/css/main.css}"  rel="stlyesheet" />
<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stlyesheet" />
<link href="../static/css/jquery-ui.min.css" th:href="@{/css/jquery-ui.min.css}" rel="stlyesheet" />
<link href="../static/css/bootstrap-theme.min.css" th:href="@{/css/bootstrap-theme.min.css}" rel="stlyesheet" />

<script type="text/javascript" src="../static/js/jquery-3.2.1.min.js" th:src="@{/js/jquery-3.2.1.min.js}"></script>
<script type="text/javascript" src="../static/js/jquery-ui.min.js"  th:src="@{/js/jquery-ui.min.js}"></script>
<script type="text/javascript" src="../static/js/bootstrap.min.js"  th:src="@{/js/bootstrap.min.js}"></script>

</head>


<body>
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"  data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span> <span
                        class="icon-bar"></span> <span class="icon-bar"></span> <span
                        class="icon-bar"></span> <span class="icon-bar"></span> <span
                        sec:authorize="!isAnonymous()" class="icon-bar"></span>
                </button>
                <a class="navbar-brand" th:text="#{app.title}">Application Name </a>
            </div>

            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a href="../welcome.html" th:href="@{/}">
                            <span class="glyphicon glyphicon-home"></span> Home</a>
                    </li>
                    <li>
                        <a href="../timesheets.html" th:href="@{/timesheets.html}">
                        <span class="glyphicon glyphicon-search"></span> TimeSheets</a>
                    </li>
                    <li><a href="../expense.html" th:href="@{/expense.html}">
                        <span class="glyphicon glyphicon-th-list"></span> Expense</a>
                    </li>
                    <li><a href="../exception.html" th:href="@{/oups.html}" title="trigger a RuntimeException to see how it is handled">
                        <span class="glyphicon glyphicon-warning-sign"></span> Error</a>
                    </li>
                    <li><a href="../social.html" th:href="@{/social}">
                        <span class="glyphicon glyphicon-envelope"></span> Inbox</a>
                    </li>
                    <li sec:authorize="!isAnonymous()"><a href="../logout" th:href="|#|"
                        th:onclick="|javascript:if (confirm('Are you sure you want to log out?')) { window.location.href = '@{/logout}'} else { return false; }|"
                        title="Logout"> <span class="glyphicon glyphicon-remove"></span>Logout  </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>


</html>

下面是我的项目结构。

enter image description here

当我浏览localhost:8080并点击开发人员工具时,我没有看到css加载我只看到加载的javascript文件。对于CSS文件,我甚至没有看到错误。

enter image description here 有人能让我知道我在做什么错吗?

0 个答案:

没有答案