Question

下面的代码被设置为表单登录按钮和文本输入，我在其他表单中内联了一个（现在正在运行）按钮，Dreamweaver中的实时预览和实时视图都很好地显示了所有功能。在上载到实时站点后，新按钮会弹出顶部，并通过标题菜单“融合”。关于如何使它保持原样的任何建议？

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Random Login Form</title>
            <style>
            /* NOTE: The styles were added inline because Prefixfree
             * needs access to your styles and they must be inlined if
             * they are on local disk! */

                /* Change the white to any color ;) */
            input: -webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset;}

            body{
                margin: 0;
                padding: 0;
                font-family: Arial;
                font-size: 10px;
            }

            .body{
                width: auto;
                height: auto;
                z-index: 0
            }

            .header{
                position: absolute;
                top: 100px;
                right: 192px;
                z-index: 2;
            }

            .header div{
                float: left;
                color: #ffffff;
                font-family: 'Avant Garde', 'Avantgarde', 'Century Gothic', CenturyGothic, sans-serif;
                font-size: 16px;
                font-weight: 200;
                width: 700px;
                height: 26px;
                background: rgba(26,26,26,.3);
                border: 0px solid #660033;
                border-radius: 0px;
                padding-left: 6px; 
                padding-top: 5px;
            }

            .header div span{
                color: #5379fa !important;
            }

            .login{
                position: absolute;
                right: 20px;
                width: 640px;
                z-index: 2;
            }

            .login input[type=text]{
                width: 200px;
                height: 20px;
                background: rgba(255,255,255,1);
                border: 0px solid #660033;
                border-radius: 0px;
                color: #660033;
                font-family: 'Exo', sans-serif;
                font-size: 12px;
                font-weight: 400;
                padding: 0px;
            }

            .login input[type=password]{
                width: 200px;
                height: 20px;
                background: rgba(255,255,255,.4);
                border: 6px solid rgba(169,0,86,0.8);
                border-radius: 2px;
                color: #660033;
                font-family: 'Exo', sans-serif;
                font-size: 12px;
                font-weight: 400;
                padding: 0px;
                margin-top: 10px;           
            }

            .login input[type=submit]{
                width: 100px;
                height: 25px;
                background: #660033;
                border: 1px solid #F2F2F2;
                cursor: pointer;
                border-radius: 0px;
                color: #ffffff;
                font-family: 'Exo', sans-serif;
                font-size: 12px;
                font-weight: 400;
                padding: 2px;
                margin-top: 10px;
            }

            .login input[type=submit]:hover{
                background: #510028;
            }

            .login input[type=button]:active{
                opacity: 0.8;
            }

            .login input[type=text]:focus{
                outline: none;
                border: 1px solid #660033;
            }

            .login input[type=password]:focus{
                outline: none;
                border: 1px solid rgba(255,255,255,0.6);
            }

            .login input[type=button]:focus{
                outline: none;
            }

            ::-webkit-input-placeholder{
                color: #660033;
            }

            ::-moz-input-placeholder{
                color: #660033;
            }

            .enroll-btn {
                position: absolute;
                right: 195px;
                width: 150px;
                z-index: 2;
                height: 15px;
                background: #660033;
                border: 1px solid #F2F2F2;
                cursor: pointer;
                color: #ffffff;
                font-family: 'Exo', sans-serif;
                font-size: 12px;
                font-weight: 400;
                padding:4px;
                margin-top: 10px;
                text-align: center;
                text-decoration: none;
            }

            .enroll-btn:hover {
                background-color: #510028;
            }

            </style>
            <script src="js/prefixfree.min.js"></script>
    <body>          
        <script src="https://tether.netteller.com/citizensebank/login.js"></script> 
        <a href="https://www.netteller.com/login2008/Authentication/Views/OnlineEnrollmentAgreement.aspx" class="enroll-btn">Consumer Enroll Now</a>    
    </body>
</html>

html和css按钮不会与先前存在的表单对齐

0 个答案: