前端小记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,在其他页面引用时无论页面长短自动适配位于页面底端><.

猜你喜欢

转载自blog.csdn.net/captainNYS/article/details/79873725