AGAMES 討論區

 找回密碼
 快速註冊
搜索
查看: 2512|回復: 0
打印 上一主題 下一主題

Discuz! 頁腳模板 footer 詳解 [複製鏈接]

七級帝王會員

☆Prince★}+}|電腦王子

Rank: 7Rank: 7Rank: 7

帖子
3799
EXP
6040 點
金幣
4990 個
好友
0
註冊時間
2008-3-27

友誼之星勳章

跳轉到指定樓層
樓主
發表於 2009-1-16 17:01:50 |只看該作者 |倒序瀏覽
Discuz! 頁腳模板 footer 詳解這部分主要包含兩大部分:尾部廣告和footer.
一、首先我們來看尾部廣告:

  1. <div id="ad_footerbanner1"></div>
  2. <div id="ad_footerbanner2"></div>
  3. <div id="ad_footerbanner3"></div>
複製代碼

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

  1. .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. #footlinks { float: right; margin-top: -3px; text-align: right; }
複製代碼

或許會有人問:明明這部分在footer裡邊現在上邊的,為什麼會顯示在右邊呢?這個就是通過css控制的哦,#footlinks采用右浮動方式展現在右邊,上外邊距為-3px,文字居右。
版權信息采用使用的段落樣式展現在左邊,不再贅述。
可能有人會問,我在後台設置了主表格的寬度,為什麼底部的內容是那麼的寬度,但是背景還是占據了整個寬度呢?這個前邊說了,#footer默認的寬度是100%的,所以如果要限制這個背景寬度,需要為#footer設置一個具體的寬度的哦。
Alta Multimedia - Facebook:http://www.facebook.com/altahkmm
您需要登錄後才可以回帖 登錄 | 快速註冊

Archiver|手機版|AGAMES 討論區

GMT+8, 2024-11-13 06:59 , Processed in 0.041542 second(s), 10 queries .

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回頂部