这是我的登录信息:
html{
/* fallback */
background-color: #84AFB8;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(radial, center center, 0, center center, 0, from(#84AFB8), to(#b1d2e1));
/* Safari 5.1, Chrome 10+ */
background: -webkit-radial-gradient(circle, #84AFB8, #b1d2e1);
/* Firefox 3.6+ */
background: -moz-radial-gradient(circle, #84AFB8, #b1d2e1);
/* IE 10 */
background: -ms-radial-gradient(circle, #84AFB8, #b1d2e1);
/* Opera 11.10+ */
background: -o-linear-gradient(right, #84AFB8, #b1d2e1);
}
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: auto auto;
background-image: url("#{resource['images/activpos_login_background.png']}");
/* background-color:#b0c4de; */
}
我的xhtml代码中的登录页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets" >
<h:head>
<h:outputStylesheet library="css" name="login.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- <link rel="shortcut icon" type="image/x-icon" href="http://www.picpanda.com/images/wx4tneinur7acq4drlen.ico" /> -->
</h:head>
<h:body>
<!-- <ui:composition template="/pages/protected/templates/master.xhtml"> -->
<div id="mainContainer">
<div id="main">
<div id="logo" align="center">
<h:graphicImage name="images/activpos_logo.png" />
</div>
<div id="login" align="center">
<h:graphicImage name="images/activpos_login_body.png" />
<h:form id="loginForm" styleClass="text">
<p:focus context="loginForm" />
<p:growl showDetail="false" life="3000" />
<h:outputLabel value="Please Login" />
<h:panelGrid columns="1">
<br />
<br />
<!-- <h:outputLabel value="#{bundle.loginUserName}" /> -->
<p:inputText value="#{loginMB.username}" label="Username"
id="username" required="true" style="width: 240px;">
<f:validateLength minimum="1" />
<p:watermark for="username" value="Username" />
</p:inputText>
<br />
<!-- <h:outputLabel value="#{bundle.loginPassword}" /> -->
<p:password value="#{loginMB.password}" label="Password"
id="senha" required="true" autocomplete="off"
style="width: 240px;">
<f:validateLength minimum="1" />
<p:watermark for="senha" value="Password" />
</p:password>
<br />
<p:commandButton action="#{loginMB.login}" value="login" styleClass="loginImage" />
<!-- <h:graphicImage name="images/login.png" /> -->
<!-- </p:commandButton> -->
</h:panelGrid>
<br />
<br />
<p:commandLink action="#{loginMB.displayForgotPassword}"
style="color:black;" ajax="false" immediate="true">
<h:outputText value="Forgot password?" style="color:black;font-size:12px;" />
</p:commandLink>
</h:form>
<!-- <h:outputText value="Version 2.4.2" styleClass="version" /> -->
</div>
</div>
</div>
<div id="footerContainer">Copyright © 2014. All rights reserved.</div>
<!-- </ui:composition> -->
</h:body>
</html>
结果是页面css html并且未加载body标签。
但是当我点击忘记密码链接时,css html和body标签按预期加载。
public void displayForgotPassword() {
displayInfoMessageToUser("Please contact support@blah.com");
}
我几乎花了一天的时间来看看它是什么原因造成的。这是我的头号问题。
并且最后一个小问题是我的登录按钮中的css背景图像虽然我跟着Displaying command button with image only并且My own primefaces p:commanButton icon
提前致谢。