Question

我正在设计我的jsf页面，但是当我运行它时，浏览器（Chrome）上没有显示任何内容我正在使用eclipse kepler，glassfish4和primefaces
这是html代码

   <div class="box">
        <p:graphicImage url="images/usericon.png" id="usericon"
            alt="utilisateur IsetN"></p:graphicImage>
        <br></br>
        <p:inputText placeholder="Login" required="true"></p:inputText>
        <br></br>
        <p:password value="#{passwordController.password}"
            promptLabel="#{msg['password.promptLabel']}"
            weakLabel="#{msg['password.weakLabel']}"
            goodLabel="#{msg['password.goodLabel']}"
            strongLabel="#{msg['password.strongLabel']}"    required="true"
            placeholder="Mot de passe" />
        <br></br>
        <p:commandButton value="Connexion" />
        <br></br>
        <h:link url="#">Aide?</h:link><br></br>
        </div>

这是风格

     .box{
         height:100px;
          width:100px;
         /*border-radius*/
         -webkit-border-radius:15px;
            -moz-border-radius:15px;
           border-radius:15px;
           background-color:#cdcdcd;
           /*box-shadow*/
           -webkit-box-shadow:0 8px 6px -6px #efefef;
          -moz-box-shadow:0 8px 6px -6px #efefef;
           box-shadow:0 8px 6px -6px #efefef;
           margin:50% 50% 50% 50%;
               }

注意：没有样式的组件效果很好。

Answer 1

适合我：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:fn="http://java.sun.com/jsp/jstl/functions">

<h:head>

    <style type="text/css">
.box {
    height: 100px;
    width: 100px;
    /*border-radius*/
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    background-color: #cdcdcd;
    /*box-shadow*/
    -webkit-box-shadow: 0 8px 6px -6px #efefef;
    -moz-box-shadow: 0 8px 6px -6px #efefef;
    box-shadow: 0 8px 6px -6px #efefef;
    margin: 50% 50% 50% 50%;
}
</style>


</h:head>

<h:body>

    <div class="box">
        <p:inputText placeholder="Login" required="true" value="#"></p:inputText>
    </div>

</h:body>
</html>

当我运行你的CSS时，我发现“保证金：50％50％50％50％;”把你的灰色框放在屏幕中间，但是我必须滚动才能看到它！我知道这很愚蠢，但你确定你的组件不仅仅显示在主滚动区域之外吗？

jsf页面上的css样式无法在服务器上正确呈现

1 个答案: