Discuz! 頁腳模板 footer 詳解

dlalden

Discuz! 頁腳模板 footer 詳解這部分主要包含兩大部分:尾部廣告和footer.
一、首先我們來看尾部廣告：

1. 
   
2. <div id="ad_footerbanner1"></div>
   
3. <div id="ad_footerbanner2"></div>
   
4. <div id="ad_footerbanner3"></div>

複製代碼

這部分共包含3個廣告位，可以通過後台進行添加，我們看一下這一段的css：

1. 
   
2. .ad_footerbanner { text-align: center; clear: both; margin: 5px }

複製代碼

首先是text-align使廣告居中，然後是清除左右浮動，這樣子是保證底部廣告每一個都在一行，而不出現並排展示的情況，margin外邊距設置為5px。
二、再來看footer部分Footer也可以說是包含兩部分把，一部分是#footlinks，一部分是版權信息。Footer裡邊包含著一個.wrap，也就是說裡邊具體內容的寬度在.wrap的控制範圍內。先來看一下footer的css：

1. #footer { border-top: 1px solid {BORDERCOLOR}; background: {ALTBG2}; color: {TEXT}; padding: 12px 0; }

複製代碼

#footer沒有限定寬度，那麼默認的就為100％，上邊框設置為1px，背景色為｛ALTBG2｝，文字顏色為｛TEXT｝，內邊距上下為12px，左右為0。
再來看一下#footlinks：

1. 
   
2. #footlinks { float: right; margin-top: -3px; text-align: right; }

複製代碼

或許會有人問：明明這部分在footer裡邊現在上邊的，為什麼會顯示在右邊呢？這個就是通過css控制的哦，#footlinks采用右浮動方式展現在右邊，上外邊距為－3px，文字居右。
版權信息采用使用的段落樣式展現在左邊，不再贅述。
可能有人會問，我在後台設置了主表格的寬度，為什麼底部的內容是那麼的寬度，但是背景還是占據了整個寬度呢？這個前邊說了，#footer默認的寬度是100％的，所以如果要限制這個背景寬度，需要為#footer設置一個具體的寬度的哦。