【道勤網(wǎng)】- bmrsportswear.com 軟件視頻自學教程|免費教程|自學電腦|3D教程|平面教程|影視動畫教程|辦公教程|機械設(shè)計教程|網(wǎng)站設(shè)計教程！【道勤網(wǎng)】

標題: 詳解如何給DISCUZ增加頁頭及頁尾背景圖片的多種方法教程 [打印本頁]
作者: discuz美化    時間: 2015-1-28 20:07
標題: 詳解如何給DISCUZ增加頁頭及頁尾背景圖片的多種方法教程
1. 第一種效果，是給discuz的整體框架添加背景圖片，見圖示：

添加方法如下：找到你現(xiàn)在使用模板common文件下的header.html文件，在<head></head>部分添加以下代碼：


  1. <style>body { background-image:url(你的背景圖片地址,如http://abc.com/imgs/bg.jpg); background-repeat:no-repeat; background-position: top center; padding-top:40px;}</style>
復(fù)制代碼
這種方法適用于非寬屏的風格，且背景圖片多為寬像素的某張圖片。添加此代碼后，可能需要調(diào)整位置，修改padding-top后面的像素即可。


2. 第二種效果，是給discuz論壇導(dǎo)航欄上方的logo位置區(qū)域添加背景圖片，見圖示：

添加方法也超簡單，找到header.htm中關(guān)于top部分的代碼，找到banner所在的div層，默認應(yīng)該是id=hd，在之后加入以下代碼，最終代碼展示為：
  1. <div id="hd" style="background-image: url(static/image/xxx.jpg); background-repeat:no-repeat; background-position:center; background-position:top">
復(fù)制代碼
注意添加的圖片高度要始終哦，而且不要和logo有沖突，這里也側(cè)面證明了logo做成透明PNG格式的必要性。


3、添加頁尾即頁面底部背景圖片的方法

OK，大同小異，為添加頁尾添加背景圖片的方法，是找到footer.htm模板文件，在代碼中footer_banner代碼下方即“ <!--{hook/global_footer}-->”添加以下代碼：
  1. <div style="background-image: url(http://你的背景地址.jpg); background-repeat:no-repeat; background-position:center; background-position:top>
復(fù)制代碼






歡迎光臨 【道勤網(wǎng)】- bmrsportswear.com 軟件視頻自學教程|免費教程|自學電腦|3D教程|平面教程|影視動畫教程|辦公教程|機械設(shè)計教程|網(wǎng)站設(shè)計教程！【道勤網(wǎng)】 (http://bmrsportswear.com/) Powered by Discuz! X3.4