时间戳

首页 > 解决方案 > 为什么 CSS 效果只出现在 JSP 预览上而不出现在浏览器上？

html - 为什么 CSS 效果只出现在 JSP 预览上而不出现在浏览器上？

问题描述

在我的 Java EE 应用程序中，我创建了一个 jsp 页面，如下所示：我正在创建一个以行显示航班的表格。航班在“flight_list”请求属性下的“fList”列表中。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../../resources/css/styles.css"
    type="text/css" />    
</head>
<body>
    <h1>List of Flights</h1>    
    <table>
        <tr>
            <th>From</th>
            <th>To</th>
            <th>Time</th>
            <th>Price</th>
            <th>Airplane</th>
            <th>Seating</th>
            <th>Number of Pilotes</th>
            <th>Pilots names</th>
        </tr>    
        <%
            List<Flight> fList = (List<Flight>) request.getAttribute("flight_list");

            for (Integer i = 0; i < fList.size(); i++) {
        %>
        <tr>
            <td><%=fList.get(i).getFlightOrigin()%></td>
            <td><%=fList.get(i).getFlightDestination()%></td>
            <td><%=fList.get(i).getFlightTime()%></td>
            <td><%=fList.get(i).getPrice()%></td>
        </tr>
        <%
            }
        %>
    </table>

</body>
</html>

和styles.css如下

h1{
    font-family: Trebuchet MS;
}

table {
  display: block;
  font-family: sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 115%;
  overflow: auto;
  width: auto;
}
  th {
    background-color: #1e90ff;
    color: white;
    font-weight: normal;
    padding: 20px 30px;
    text-align: center;
  }
  td {
    background-color: rgb(238, 238, 238);
    color: rgb(111, 111, 111);
    padding: 20px 30px;
  }

在这里你可以看到我的项目结构

  1. WebContent-->WEB-INF-->views-->flights-list.jsp
  2. WebContent-->资源-->css-->styles.css

项目结构

CSS 效果仅在 eclipse 中可见

CSS 文件仅在 JSP 预览选项卡上加载。问题是除非我将css代码放入其中，否则它们不会出现在浏览器上<style>...</styles> .

请帮助我在浏览器上正确加载页面。

标签： htmlcssjspjakarta-ee

解决方案

使用下面的链接标签在标题部分的 jsp 中加载/包含 .css/.js 文件

<head>
 <link rel="stylesheet" href="resources/css/styles.css" type="text/css"/>
 <script type="text/javascript" language="javascript" src="resources/javascript/foo.js"></script>
    ---
</head>

或者如果您想包含第三方 css/js，请从 url 指定完整路径：

 <link rel="stylesheet" href="htts://..../foo.css" type="text/css"/>
 <script type="text/javascript" language="javascript" src="htts://..../foo.css"></script>

推荐阅读