编辑“Discuz:Discuz!6.0页脚模板footer详解”

{{Discuz! 6.0 top}}
<div style="clear:both;"></div>
<p style="text-indent:2em;">这部分主要包含两大部分:尾部广告和footer.</p>
<h4 style="color:#0954a6;">一、首先我们来看尾部广告：</h4>
<pre style="width:668px; border:1px solid #000;">
<div id="ad_footerbanner1"></div>
<div id="ad_footerbanner2"></div>
<div id="ad_footerbanner3"></div>
</pre>
<p style="text-indent:2em;">这部分共包含3个广告位，可以通过后台进行添加，我们看一下这一段的[[css]]：</p>
<pre style="width:668px; border:1px solid #000;">
.ad_footerbanner { text-align: center; clear: both; margin: 5px }
</pre>
<p style="text-indent:2em;">首先是text-align使广告居中，然后是清除左右浮动，这样子是保证底部广告每一个都在一行，而不出现并排展示的情况，margin外边距设置为5px。</p>
<h4 style="color:#0954a6;">二、再来看footer部分</h4>
<p style="text-indent:2em;">Footer也可以说是包含两部分把，一部分是#footlinks，一部分是版权信息。Footer里边包含着一个.wrap，也就是说里边具体内容的宽度在.wrap的控制范围内。先来看一下footer的css：</p>
<pre style="width:888px; border:1px solid #000;">
#footer { border-top: 1px solid {BORDERCOLOR}; background: {ALTBG2}; color: {TEXT}; padding: 12px 0; }
</pre>
<p style="text-indent:2em;">#footer没有限定宽度，那么默认的就为100％，上边框设置为1px，背景色为｛ALTBG2｝，文字颜色为｛TEXT｝，内边距上下为12px，左右为0。</p>
<p style="text-indent:2em;">再来看一下#footlinks：</p>
<pre style="width:668px; border:1px solid #000;">
#footlinks { float: right; margin-top: -3px; text-align: right; }
</pre>
<p style="text-indent:2em;">或许会有人问：明明这部分在footer里边现在上边的，为什么会显示在右边呢？这个就是通过css控制的哦，#footlinks采用右浮动方式展现在右边，上外边距为－3px，文字居右。</p>
<p style="text-indent:2em;">版权信息采用使用的段落样式展现在左边，不再赘述。</p>
<p style="text-indent:2em;">可能有人会问，我在后台设置了主表格的宽度，为什么底部的内容是那么的宽度，但是背景还是占据了整个宽度呢？这个前边说了，#footer默认的宽度是100％的，所以如果要限制这个背景宽度，需要为#footer设置一个具体的宽度</p>

== 参考来源 ==
*http://faq.comsenz.com/
{{Discuz! 6.0}}
[[category:Discuz风格模板]]