前端小记1（网页共用头部尾部）

一、多个网页共用相同网页头部和尾部方法（以尾部为例且以下方式的普适性有待考证）：

1.写一个规范的html结构网页（html head body），并按需求编写网页尾部html结构。

2.编写对应css样式，除去字体大小，颜色搭配等，需特别注意尾部理应永远显示在网页的最下端，设置如下，分两种情况：

1>如果网页很短即没有上下的滚动条：

html,body{

    margin: 0;

    padding: 0;

    height: 100%;

}

.footer {

    position: absolute; /*相对于父元素contanier定位*/

    width: 100%;

    bottom: 0px;/*始终距离它的父元素的底部为0px.则是处于父元素的最底*/

    left:0px;

}

2>如果网页页面较长 1> 中的.footer position属性应设为relative。

3.将编写好的网页（含html，css）转成js。

4.在其他网页中引用即可，方式为：

<script type="text/javascript" src="js/footer.js"></script>             

其中src为引用路径。

共用头部的方法相对尾部来说较为简单，因为不用设置头部的位置css让它出现在网页的最上方，只需要保证引用时引用语句位于网页body的最上方。 

---------------------------------------分割线------------------------------------------------

按1. 2>中所述设置好后，还需要把页面内容装进<div class="container"></div>中（footer在此div外），然后调整container高度使之与内容高度适配，也就是使container撑开页面后是footer位于页面底端。

还没有实现写好一个footer后转为js，在其他页面引用时无论页面长短自动适配位于页面底端><.

最后

以上就是粗心热狗为你收集整理的前端小记1（网页共用头部尾部）的全部内容，希望文章能够帮你解决前端小记1（网页共用头部尾部）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。