调用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。删除它，问题都消失了。

：）