调用 servlet 后导航栏 css 发生变化

Question

之前：

之后

第一张图片是登录页面，但是当我点击登录按钮时，导航栏变成第二张图片，块之间出现空格。当调用 sevlet 并具有以下代码时会发生这种情况：

out.print("<p style='position:absolute;top:200px;left:300px;color:#CC0066;'>Sorry username or password error! </p>");
            RequestDispatcher rd=request.getRequestDispatcher("login.jsp");
            rd.include(request, response);

CSS代码是：

#menuli{
display: inline;
float: left;
color: #CCCCCC;
}

#menuA,#menuAL {
display: block;
width: 180px;
padding: 10px;
color: #FFFFFF;
font-size: x-large;
font-variant: normal;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
margin: 10;
text-decoration: none;
opacity: 0.9;
border-spacing:0;

border-collapse:collapse;
text-align: center;
background-color: #000033;
/*font-weight: bold;
/*border-radius: 20px;*/
}
#menuA:hover, #menuAL:hover
{
/*color: #699;*/

background-color: #003;
/*text-shadow: 10px 0px 10px;   */
font-weight: bold;
background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(65,62,110,1.00)),color-stop( 40.94% , rgba(7,5,53,1.00)),color-stop( 49.74% , rgba(9,8,56,1.00)),color-stop( 100% , rgba(12,11,60,1.00)),color-stop( 100% , rgba(54,56,116,1.00)));
background-image: -webkit-linear-gradient(270deg,rgba(65,62,110,1.00) 0%,rgba(7,5,53,1.00) 40.94%,rgba(9,8,56,1.00) 49.74%,rgba(12,11,60,1.00) 100%,rgba(54,56,116,1.00) 100%);
background-image: linear-gradient(180deg,rgba(65,62,110,1.00) 0%,rgba(7,5,53,1.00) 40.94%,rgba(9,8,56,1.00) 49.74%,rgba(12,11,60,1.00) 100%,rgba(54,56,116,1.00) 100%);
}
#menu
{
position: absolute;
top: 126px;
left: 139px;
}

JSP 代码为：

<div name="header" id="header">
    <img id="logo" style="position:absolute; left:145px; top:10px; "src="images/logo.jpg">
        <div id="menu" >
        <ul>
            <li id="menuli"><a id="menuA" href="index.jsp#header">Home</a></li>
            <li id="menuli"><a id="menuA" href="index.jsp#services">Services</a></li>
            <li id="menuli"><a class="prod" id="menuA" href="Display?course=6">Products</a>

            </li>
            <li id="menuli"><a id="menuA" href="index.jsp#contact">Contact</a></li>
            <li id="menuli"><a id="menuA" href="index.jsp#about">About</a></li>
        </ul>
    </div>
</div>

在任何 servlet 包含它之后的所有页面都会发生这种情况。

请查看图片链接。

Answer 1

在 servlet 中打印 html 内容被认为是不好的做法。您可以在请求中设置属性。所以不是这个，

out.print("<p style='position:absolute;top:200px;left:300px;color:#CC0066;'>Sorry username or password error! </p>");
            RequestDispatcher rd=request.getRequestDispatcher("login.jsp");
            rd.include(request, response);

使用，

request.setAttribute("message","Sorry username or password error!");
            RequestDispatcher rd=request.getRequestDispatcher("login.jsp");
            rd.include(request, response);

并尝试在jsp页面中打印消息，

只需将 scriptlet 用作 ,

<p style='position:absolute;top:200px;left:300px;color:#CC0066;'><%=message></p>

或使用 EL

<p style='position:absolute;top:200px;left:300px;color:#CC0066;'>${message}</p>

十年来，使用 scriptlet 也被认为是不好的做法。看到这个How to avoid java codes inside jsp

希望对你有帮助！！

Answer 2

解决了。我在导航栏的 CSS 部分中有margin:10px。删除它，问题都消失了。

:)