java 我的头是不是显示在我的网页以及我的标志

jjhzyzn0 于 2023-08-02 发布在 Java

关注(0)|答案(2)|浏览(100)

我不知道是什么问题，我没有语法错误，但我应该有一个导航栏在我的屏幕顶部，但它没有显示出来。语法中有什么需要修改的吗？我是否也在默认模板文件中遗漏了什么？我的网页显示良好，但我只是缺少我的图像和导航栏。
common.html文件

<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
    <div th:fragment="header">
        <h1>Welcome to my CST-339 Spring Boot Activity Application</h1>
    </div>
    <div class="bs-example">
        <nav class="navbar navbar-default">
            <div class="navbar-header">
                <button type="button" data-target="navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">GCU</a>
            </div>
            <div id="navbarCollapse" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="https://www.gcu.edu" target="_blank">Home</a>
                    </li>
                    <li>
                        <a href="https://www.lopeshops.edu" target="_blank">Shop</a>
                    </li>
                    <li>
                        <a href="https://www.news.edu" target="_blank">News and Events</a>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="/">Start Page</a></li>
                </ul>
            </div>
        </nav>
    </div>
    <h2 th:text="${title}">Default Message Text</h2><br />
    <img th:src="@{/static/images/gcu-logo.jpg}" /><br /><br />
<div th:fragment="footer">
    <h5 style="color:purple; text-align: center; position: fixed; bottom: 0; width: 100%;">Copyright 2020 Grand Canyon University</h5>  
</div>
</html>

字符串
defaultTemplate.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title> CST-339 Spring Boot Activity Application</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css.bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css.bootstrap-theme.min.css">
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
        <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.0/css/responsive.dataTables.css">
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="//cdn.datatables.net/responsive/2.2.0/js/dataTables.responsive.js"></script>
        <style type="text/css">.bs-example {margin: 20px; }</style>
    </head>
    
    <body>
        <div align="center">
            <div th:replace="~{layouts/common :: header}">My Header</div>
            <section layout:fragment="content">
                <p>My Body Contents</p>
            </section>
            <div th:replace="~{layouts/common :: footer}">My Footer</div>
        </div>
    </body>
</html>

型

Java

来源：https://stackoverflow.com/questions/76640004/my-header-is-not-showing-up-on-my-webpage-as-well-as-my-logo

2条答案

按热度按时间

t0ybt7op1#

假设您的徽标位于static/images文件夹中，显示它
更换

<img th:src="@{/static/images/gcu-logo.jpg}" /><br

字符串
与

<img th:src="@{images/gcu-logo.jpg}" /><br

型

赞(0）回复(0）举报 2023-08-02

klr1opcd2#

如果是导航栏
第一css链接不可访问而不是

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css.bootstrap.min.css
 https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css.bootstrap-theme.min.css

字符串
应该是

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css

型
第二：当设置样式class时，您缺少th，即对于单个类，应为th:class="class-name"，对于多个类，应为th:classappend="|class1 class2 class3|"
第三：要使导航按钮在菜单折叠时显示菜单，data-target值应该是.navbar-collapse而不是navbarCollapse
下面的完整示例加载可折叠的导航栏

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
 <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title> CST-339 Spring Boot Activity Application</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"/>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"/>
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.0/css/responsive.dataTables.css"/>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.2.0/js/dataTables.responsive.js"></script>
    <style type="text/css">.bs-example {margin: 20px; }</style>
</head>

<body>
    <!--    <div th:fragment="header">-->
    <h1>Welcome to my CST-339 Spring Boot Activity Application</h1>
    <!--    </div>-->
    <div th:class="bs-example">
        <nav th:classappend="|navbar navbar-default|">
            <div th:class="navbar-header">
                <button th:type="button" th:data-target=".navbar-collapse" th:data-toggle="collapse" th:class="navbar-toggle">
                    <span th:class="sr-only">Toggle navigation</span>
                    <span th:class="icon-bar"></span>
                    <span th:class="icon-bar"></span>
                    <span th:class="icon-bar"></span>
                </button>
                <a href="#" th:class="navbar-brand">GCU</a>
            </div>

            <div id="navbarCollapse" th:classappend="|collapse navbar-collapse|">
                <ul th:classappend="|nav navbar-nav|">
                    <li>
                        <a href="https://www.gcu.edu" target="_blank">Home</a>
                    </li>
                    <li>
                        <a href="https://www.lopeshops.edu" target="_blank">Shop</a>
                    </li>
                    <li>
                        <a href="https://www.news.edu" target="_blank">News and Events</a>
                    </li>
                </ul>
                <ul th:classappend="|nav navbar-nav navbar-right|">
                    <li><a href="/">Start Page</a></li>
                </ul>
            </div>
        </nav>
    </div>
</body>
</html>

型

赞(0）回复(0）举报 2023-08-02

我来回答

java 我的头是不是显示在我的网页以及我的标志

2条答案

相关问题

热门标签

最新问答