Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/42.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 聚合物元素don';我没有表现出来!(v1.0)_Html_Css_Polymer_Paper Elements - Fatal编程技术网

Html 聚合物元素don';我没有表现出来!(v1.0)

Html 聚合物元素don';我没有表现出来!(v1.0),html,css,polymer,paper-elements,Html,Css,Polymer,Paper Elements,我在我的项目中使用聚合物纸元素。我用括号。当使用方括号实时预览时,元素将按我希望的方式显示。但是,当我通过导航到HTML文件并单击它来打开它时,这些元素将无法显示 你知道会发生什么吗 提前谢谢 这是我的密码: HTML 这是使用括号查看实时预览时的输出 单击索引文件查看时的输出 html导入需要服务器才能工作。括号live view必须模拟服务器。请查看Polymer Starter工具包,它有一个内置测试服务器:或者,您可以安装node.js,并使用类似的工具。 <head>

我在我的项目中使用聚合物纸元素。我用括号。当使用方括号实时预览时,元素将按我希望的方式显示。但是,当我通过导航到HTML文件并单击它来打开它时,这些元素将无法显示

你知道会发生什么吗

提前谢谢

这是我的密码:

HTML

这是使用括号查看实时预览时的输出

单击索引文件查看时的输出

html导入需要服务器才能工作。括号live view必须模拟服务器。请查看Polymer Starter工具包,它有一个内置测试服务器:或者,您可以安装node.js,并使用类似的工具。
<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>
/*-----------------------------------------  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);
}