如何在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之类的语言，则可以使用以下方法

创建名为"_bottom.php"

• Write的单独文件您想要在上述文件中重复的代码"_bottom.php"

• Just

1. 在您想要相同代码的每个页面中呈现此文件

我不知道你是否熟悉PHP？但是，您也可以对其他语言使用相同的方法，但不是在css html中。