zoukankan      html  css  js  c++  java
  • DISCUZ论坛添加页头及页尾背景图片的几种方法

    先给大家分享页头添加背景图片的两种方法:

    1. 第一种效果,是给discuz的整体框架添加背景图片,见图示:
    111.jpg 

    添加方法如下:找到你现在使用模板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>
    复制代码


    这种方法适用于非宽屏的风格,且背景图片多为宽像素的某张图片。添加此代码后,可能需要调整位置,修改padding-top后面的像素即可。 


    2. 第二种效果,是给discuz论坛导航栏上方的logo位置区域添加背景图片,见图示:


    123.jpg 

    添加方法也超简单,找到header.htm中关于top部分的代码,找到banner所在的div层,默认应该是id=hd,在之后加入以下代码,最终代码展示为:

    1. <div id="hd" style="background-image: url(static/image/xxx.jpg); background-repeat:no-repeat; background-position:center; background-position:top">
    复制代码


    注意添加的图片高度要始终哦,而且不要和logo有冲突,这里也侧面证明了logo做成透明PNG格式的必要性。


    三、添加页尾即页面底部背景图片的方法

    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>
    复制代码
     
     
    http://blog.csdn.net/zhouyi0911/article/details/6694484
  • 相关阅读:
    如何监控IT正常运行时间?
    系统扩展正在取代macOS内核扩展,这会对您有何影响?
    IT管理员需要的10大网络工具
    自动化管理员工生命周期,集成Ultipro
    OpManager MSP:ManageEngine的新型MSP重点网络监控解决方案
    vue中axios的使用
    vue中axios的介绍
    移动端适配--关于根元素font-size和rem
    JavaScript---数组去重
    array数组的方法
  • 原文地址:https://www.cnblogs.com/coolid/p/6351277.html
Copyright © 2011-2022 走看看