Question

我从MailChimp嵌入了一个表单，并尝试使用CSS自定义按钮。当我在笔记本电脑上本地查看时可以使用，但是当我上传到github时可以更改位置并清除所有格式。请帮忙！！！我已经尝试了一切。请参阅下面的图片和我的代码以供参考。

图片1-本地：

图片2-在线：

<!DOCTYPE html>
<html>

<head>

    <title></title>
    <link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
            <style type="text/css">
                #mc_embed_signup{clear:left; font:14px Helvetica,Arial,sans-serif; }
                /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
                We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
            </style>
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css">


</head>

<body>

    <div id="container">

        <div class="box" id="text">

            <P>THE BIGGEST TECH EVENT OF THE YEAR</P>

        </div>



        <div class="box">

            <!-- Begin MailChimp Signup Form -->

            <div id="mc_embed_signup">

                <form action="https://website.us19.list-manage.com/subscribe/post?u=85ff9e186cc7716994921bf48&amp;id=fd58e3c77c" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

                    <div id="mc_embed_signup_scroll">


                        <div class="clear">

                            <button class="button" name="subscribe" id="mc-embedded-subscribe">Press Here</button>

                        </div>

                    </div>

                </form>

            </div>

            <!--End mc_embed_signup-->


        </div>



    </div>


</body>
</html>



html, body {
    margin: 0px;
    padding: 0px;
}

body {
    background: url(bg.jpg) no-repeat fixed center;
    background-size: cover;
}

#container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.box {
    width: 100%;
    text-align: center;
}

#text p {
    font-family: 'Oswald', sans-serif;
    font-weight: bold;
    font-size: 30px;
}

.box button {
    background-color: #000;
    color: #fff;
    width: 150px; 
    height: 40px;
    font-family: 'Oswald', sans-serif;
}

.box button:hover {
    cursor: pointer;
    background-color: #fff;
    color: #000;
    width: 150px;
    border: 1px solid #000
}

为什么在我的网站上的按钮在本地工作，但是在我在线上传时会更改位置和格式？

0 个答案: