如何在HTML模板中向所有页面显示网站元素？

Question

我开始研究small personal project，并且有一个小问题，不知道如何解决。我将此代码放入主页：

<div class="border-bottom bottom-position">
    <!-- social icons start -->
    <div class="social">
        <ul>
            <li>
                <a class="fa fa-facebook" href="https://www.facebook.com/DeilOfficial/"></a>
            </li>
            <li>
                <a class="fa fa-twitter" href="https://www.twitter.com/DeilOfficial"></a>
            </li>
            <li>
                <a class="fa fa-instagram" href="https://www.instagram.com/DeilOfficial/"></a>
            </li>
            <li>
                <a class="fa fa-youtube" href="https://www.youtube.com/channel/UCCzTTmHzjEfJ0UsSirOAG9A?sub_confirmation=1"></a>
            </li>
            <li>
                <a class="fa fa-soundcloud" href="https://soundcloud.com/deilofficial"></a>
            </li>
        </ul>
    </div>

    <form action="subscribe.php" id="subscribe" method="post" name="subscribe1">
        <input style="" class="subscribe-requiredField subscribe-email" id="" name="subscribe-email" placeholder="Email" type="text">
        <a style="" href="#">
            <button class="submit-button-2 rimu1 rimu2" id="submit-2" type="submit">Subscribe</button>
        </a>
    </form>

    <style>
        @media only screen and (max-width: 660px) {

            .border-bottom>div {
                width: 100%;
                display: block;
                text-align: center;
            }
        }

        @media only screen and (min-width: 661px) {

            .border-bottom {
                width: 100%;
                display: block;
            }
            .social {
                float: left;
                padding-left: 40px;
                margin-top: 20px;
            }
            form#subscribe {
                float: right;
                padding-right: 40px;

            }
        }


        form#subscribe {
            text-align: center;
            margin: 0 auto;
            margin-top: 20px;


        }

        span.subscribe-error {
            color: #fff;
        }

        span.subscribe-error {
            color: #fff !important;
        }

        form#subscribe {
            min-height: 78px;
        }

        .social {
            padding-top: 22px;
        }

        .credits {
            color: #fff;

        }
    </style>
</div>

问题是订阅表单和社交图标仅显示在主页上，而不显示在其他页面中。如何在主页上的同一个地方的其他页面上显示？

Answer 1

如果您只使用HTML和CSS，那么您没有选择将此代码复制到所有其他页面。但是，如果您使用PHP之类的任何语言，那么您可以使用以下方式

1. 创建名为“_bottom.php”的单独文件
2. 在上面的文件“_bottom.php”中写下你想要重复的代码
3. 只需在您想要相同代码的每个页面中呈现此文件

我不知道你是否熟悉PHP？但你也可以用同样的方式用于其他语言，但不能用于css html