在多个HTML页面中重用页脚

时间:2015-08-08 23:24:29

标签: html css layout

我正在开发一个提供5个HTML页面的网页模板。我很惊讶在每个页面内都有相同的页脚部分,如下所示:

<footer>
    <div class="footerrow1">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 maxheight1 footercol1">
                    <a class="smallogo" href="index.html"><img src="img/logosmall.png" alt=""></a>
                    <ul class="social_icons clearfix">
                         <li><a href="#"><img src="img/follow_icon1.png" alt=""></a></li>
                         <li><a href="#"><img src="img/follow_icon2.png" alt=""></a></li>
                         <li><a href="#"><img src="img/follow_icon3.png" alt=""></a></li>
                         <li><a href="#"><img src="img/follow_icon4.png" alt=""></a></li>
                         <li><a href="#"><img src="img/follow_icon5.png" alt=""></a></li>
                    </ul> 
                </div>
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 maxheight1 footercol1">
                    <h5>our Location</h5>
                    <div class="smalladdress">
                        <p class="mainaddress">9870 St Vincent Place,<br>Glasgow, DC 45 Fr 45.</p>
                        <p>Freephone:<span>+1 800 559 6580</span></p>
                        <p>Telephone:<span>+1 800 603 6035</span></p>
                        <p>FAX:<span class="marginfax">+1 800 889 9898</span></p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 maxheight1 footercol1">
                    <h5>Overview</h5>
                    <ul class="list5">
                        <li><a href="#">what we do</a></li>
                        <li><a href="#">sales for services</a></li>
                        <li><a href="#">Development Process</a></li>
                        <li><a href="#">Clients</a></li>
                        <li><a href="#">our team</a></li>
                        <li><a href="#">Blog</a></li>
                    </ul>

                </div>
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 maxheight1 footercol1">
                    <h5 class="mbotform1">newsletter</h5>
                    <form id="form1">
                      <div class="success">Your subscribe request<br> has been sent!</div>
                        <fieldset>
                        <label class="email">
                            <input type="email" value="Enter Your Email">
                            <span class="error">*This is not a valid email address.</span></label>
                        <br class="clear">
                        <div class="btns"><a href="#" class="btn btn-primary btn-lg btn4" data-type="submit">Submit</a></div>
                      </fieldset>
                      </form>
                </div>
            </div>
        </div>
    </div>
    <div class="footerrow2">
        <div class="container">
            <p class="footerpriv" style="text-align:center">&copy; <span id="copyright-year"></span> <img src="img/linefooter.png" alt=""> <a class="privacylink" href="index-5.html">Privacy Policy</a></p>
        </div>
    </div> 
</footer>

如果我需要修改它,我需要修改5个HTML页面中的每一个。我是一名ASP.net MVC Web开发人员,我可以通过定义一个包含所有共享部分的布局视图来轻松处理这个问题。

所以我的问题是如何在我的网页模板的HTML页面中管理这个?

1 个答案:

答案 0 :(得分:1)

答案是否*(带星号)。

*包含功能的HTML有some support in HTML5,但它是very limited

事实上,很少有人支持Firefox ......&#34;没有计划支持HTML导入&#34; ...

您可能很幸运使用Web Components Library启用跨浏览器支持,但这可能比5页模板的价值更大。