Question

我在我的项目中使用Polymer Paper Elements。我用括号。使用Brackets实时预览时，元素会按照我的要求显示。但是，当我通过导航并单击它来打开HTML文件时，这些元素无法显示！

有关可能发生的事情的任何想法吗？

提前致谢！

这是我的代码：

HTML

<head>
    <title>MainFrame</title>

    <script src="../bower_components/webcomponentsjs/webcomponents.js"></script>
    <script type="text/javascript" src="../bower_components/jquery/dist/jquery.js"></script>
    <script type="text/javascript" src="../js/Java.js"></script>

    <link href="stylesheets/Index.css" rel="stylesheet" type="text/css"/>

    <link rel="import" href="../bower_components/polymer/polymer.html">
    <link rel="import" href="../bower_components/font-roboto/roboto.html">
    <link rel="import" href="../bower_components/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
    <link rel="import" href="../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
    <link rel="import" href="../bower_components/iron-behaviors/index.html">
    <link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
    <link rel="import" href="../bower_components/iron-form-element-behavior/iron-form-element-behavior.html">
    <link rel="import" href="../bower_components/iron-input/iron-input.html">
    <link rel="import" href="../bower_components/iron-meta/iron-meta.html">
    <link rel="import" href="../bower_components/iron-validatable-behavior/iron-validatable-behavior.html">
    <link rel="import" href="../bower_components/paper-behaviors/index.html">
    <link rel="import" href="../bower_components/paper-button/paper-button.html">
    <link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html">
    <link rel="import" href="../bower_components/paper-input/paper-input.html">
    <link rel="import" href="../bower_components/paper-material/paper-material.html">
    <link rel="import" href="../bower_components/paper-ripple/paper-ripple.html">
    <link rel="import" href="../bower_components/paper-styles/paper-styles.html">
</head>

<body>                
    <div id="loginPop">
        <div id="closeLogin">
            <span></span>
            <span></span>
        </div>
        <div id="loginContainer">
            <div id="title">
                <div id="logologin"></div>MainFrame
            </div>

            <paper-input label="Email Address or ID" floatinglabel></paper-input>
            <paper-input type="password" label="Password" floatinglabel></paper-input>

            <div id="forgot">Forgot?</div>
            <div id="LoginPageOptions">
                <paper-checkbox id="staylogged">Stay Logged On</paper-checkbox>
                <div id="googlelogin">Login with Google+</div>
            </div>
            <div id="LoginPageButtons">
                <paper-button id="loginButton" raised>Login</paper-button>
                <paper-button id="signupbutton" raised>Sign Up</paper-button>
            </div>
        </div>

        <div class="anticlick" id="one"></div>
        <div class="anticlick" id="two"></div>
        <div class="anticlick" id="three"></div>
        <div class="anticlick" id="four"></div>
    </div>

CSS

/*-----------------------------------------  LOGIN POPUP  --------------------------------------*/

#loginpop {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    background-color: rgb(242, 242, 242);
    height: 100%;
    width: 100%;
}

#loginContainer {
    position: absolute;
    width: 16%;
    height: 20%;
    left: 42%;
    top: 35%;
    font-family: main;
    color: #2a2a2a;
}

#title{
    font-size: 35;
    width: 100%;
    text-align: center;
}

#forgot {
    position: absolute;
    font-family: roboto;
    color: #2a2a2a;
    font-size: 14;
    top: 129;
    left: 80%;
}

#LoginPageOptions{
    width: 100%;
    position: absolute;
    top:;
}

#staylogged {
    position: absolute;
    left: 0;
    --paper-checkbox-checked-color: var(--paper-black-500);
    --paper-checkbox-checked-ink-color: var(--paper-black-500);
}

#googlelogin {
    position: absolute;
    top: 0;
    right: 0;
}

#LoginPageButtons{
    position: absolute;
    top: 110%;
    width: 100%;
}

#loginButton {
    position: absolute;
    left: 20%;
    background: #000;
    color: #fff; 
}

#signupbutton {
    position: absolute;
    right: 20%;
}

.anticlick {
    position: absolute;
    opacity: 0;
    outline-style: dotted;
}

#one, #two {
    height: 100%;
    width: 37.5%;
    top: 0;
}

#three, #four {
    height: 30%;
    width: 100%;
}

#one{
    left: 0;
}

#two{
    right: 0;
}

#three {
    top: 0;
}

#four{
    bottom: 0;
}

/*--  CLOSE LOGIN POPUP  --*/
#closelogin {
    width: 40px;
    height: 40px;
    position: relative;
    top: 2.6%;
    left: 97%;
    cursor: pointer;
    z-index: 4;
}   

#closelogin span {
    position: absolute;
    height: 1px;
    width: 20;
    background: #000;
    margin: 24%;
}

#closelogin span:nth-child(1) {
    top: 10;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
}

#closelogin span:nth-child(2) {
    top: 10;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

以下是使用Brackets实时预览查看时的输出 Working

以下是点击索引文件查看时的输出 Not Working

聚合物元素不显示！（1.0）

0 个答案:

聚合物元素不显示！ （1.0）

0 个答案:

聚合物元素不显示！（1.0）