Question

在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;
  }

您在这里看到了我的项目结构

WebContent-> WEB-INF->视图-> flights-list.jsp
WebContent->资源-> css-> styles.css

Project Structure

CSS效果仅在日食中可见

仅在“ JSP预览”选项卡上加载CSS文件。问题是，除非我将CSS代码放在<style>...</styles> .

中，否则它们不会出现在浏览器中

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

Answer 1

使用下面的链接标记在标题部分的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>

为什么CSS效果仅出现在JSP预览上而不显示在浏览器上？

和styles.css如下

1 个答案: