<big id="d1zzb"></big>

<p id="d1zzb"><del id="d1zzb"></del></p>

    <track id="d1zzb"></track>
    <pre id="d1zzb"></pre><ruby id="d1zzb"><strike id="d1zzb"><b id="d1zzb"></b></strike></ruby>
    <pre id="d1zzb"><strike id="d1zzb"></strike></pre><address id="d1zzb"></address>

    <track id="d1zzb"></track>

    <pre id="d1zzb"></pre>

      立即注冊 找回密碼

      QQ登錄

      只需一步,快速開始

      安裝使用 巧用firebug 對Discuz!模板進行樣式調試修改美化

      2018-6-13 12:56| 發布者: 豬八戒| 查看: 1466| 評論: 0

      摘要: discuz! 模板的教程之前已經寫過很多了,Discuz模板問題我經常都會說推薦大家使用火狐的firebug來看看,很多同學在修改一些文件或者模板的時候都不會找問題,看完今天的內容你應該會一些簡單的使用了首先,推薦大家 ...
      discuz! 模板的教程之前已經寫過很多了,Discuz模板問題我經常都會說推薦大家使用火狐的firebug來看看,很多同學在修改一些文件或者模板的時候都不會找問題,看完今天的內容你應該會一些簡單的使用了
      首先,推薦大家查看:火狐瀏覽器firebug的使用視頻教程,DiscuzX2.5模板全局樣式表 - common.css 注釋模板緩存、CSS繼承規范和CSS緩存機制這3篇教程

      然后,我們再來認識下Discuz!的樣式存放的規律。  樣式文件存放在 tempate/default/common目錄下common.css是共用的樣式文件,幾乎每個頁面都需要用到其中的樣式, module.css 是每個模塊中要用到樣式文件,下面我們來查看module.css樣式文件中的樣式分類規律,module.css樣式,中添加有詳細的注釋,通過注釋將樣式分類。如:
      /** misc::invite,group,forum::viewthread,portal::view,home::space **/
              /* .usl -> 用于類似群組中邀請好友中的好友列表 by Pony */
                      .usl { overflow: scroll; overflow-x: hidden; padding: 5px; width: 580px; height: 280px; }
                      .usl2 { width: auto; border: dashed {WRAPBORDERCOLOR}; border-width: 0 1px 1px; }
                              .usl li { overflow: hidden; float: left; margin: 3px; width: 134px; height: 64px; }
                              .usl a { display: block; padding: 4px; border: 1px solid {WRAPBG}; }
                                      .usl a:hover { text-decoration: none; border: 1px solid; border-color: #DDD #999 #999 #DDD; background: {COMMONBG}; }
                              .usl .avt { float: left; margin-right: 5px; width: 52px; height: 52px; border: 1px solid {COMMONBORDER}; background-color: {WRAPBG}; background-position: 2px 2px; background-repeat: no-repeat; zoom: 1; }
                              .usl .d { float: left; width: 65px; height: 54px; overflow: hidden; word-wrap: break-word; }
                              .usl li.a a, .usl li.a a:hover { border-color: #F90; background-color: #FFF1E1; }
                              .usl li.a .avt span { display: block; margin-left: 2px; width: 50px; height: 50px; background: url({IMGDIR}/mark.png) no-repeat left bottom; }
                      .usd { padding: 5px 10px 0; border: solid {WRAPBORDERCOLOR}; border-width: 1px 0; background-color: {COMMONBG}; }
                      .usd2 { border-width: 1px; border-style: dashed; }
                              .usd li { float: left; margin-right: 1%; width: 48%; }
      /** end **/

      仔細查看,注釋開始處 /** misc::invite,group,forum::viewthread,portal::view,home::space **/, 這表示這些樣式將邀請、群組、帖子內容頁、文章內容頁、個人空間中通過。Discuz! 的使用樣式不是直接使用的template/default/common下的樣式文件,而是讀取的緩存文件(通過將樣式文件進行解析),在這里不對樣式解析函數進行介紹,有興趣的可以閱讀 source/function/cache/cache_style.php 中的代碼。 解析之后的樣式文件是存在在 data/cache目錄下。

      firebug 與 Discuz! 相結合

      現在,我們來了解firebug 中樣式的特征,

      當將鼠標放在樣式的加載路徑上會彈出樣式的詳細地址,從第二張圖中我們能夠得到結論,這里的樣式是來自于common/common.css目錄, 從第一張圖中我們能夠得知 樣式是來自于 module.css 中并且 在分類的時候應該有forum::viewthread  

      先在firebug的樣式框中,對樣式進行調試  滿足要之后,我們到 template/default/common 目錄下找到中firebug樣式得知的樣式文件 ,搜索關鍵字,更改完樣式文件之后。最后 ,到后臺更新一次緩存




      鮮花

      握手

      雷人

      路過

      雞蛋

      最新評論

      相關推薦
      最新內容
      • 如何在discuz帖子中插入視頻,免費教你用Di
      • 對接華為聯運游戲或應用審核駁回:配置hms
      • Discuz! 如何在帖子里添加視頻或Flash,如
      • discuz如何關閉個人空間功能,原來這么簡單
      • discuz如何關閉個人空間
      相關推薦

       
       
      技術支持
      在線客服
      點擊這里給我發消息
      點擊這里給我發消息
      道勤建站群:
      3群建站-美工交流-道勤
      道勤美工群:
      3群建站-美工交流-道勤
      工作時間:
      8:00-18:00
      客服熱線:
      15056962695
      官方微信掃一掃
      !jz_fbzt! !jz_lxwm! !jz_gfqqq!

      關于我們|手機版|小黑屋|地圖|【道勤網】-www.staruniix.com 軟件視頻自學教程|免費教程|自學電腦|3D教程|平面教程|影視動畫教程|辦公教程|機械設計教程|網站設計教程【道勤網】 ( 皖ICP備15000319號|贊助我們  

      GMT+8, 2022-9-9 22:10

      Powered by DaoQin! X3.2 © 2016-2063 Dao Qin & 道勤科技

      返回頂部
      肉欲精油按摩

      <big id="d1zzb"></big>

      <p id="d1zzb"><del id="d1zzb"></del></p>

        <track id="d1zzb"></track>
        <pre id="d1zzb"></pre><ruby id="d1zzb"><strike id="d1zzb"><b id="d1zzb"></b></strike></ruby>
        <pre id="d1zzb"><strike id="d1zzb"></strike></pre><address id="d1zzb"></address>

        <track id="d1zzb"></track>

        <pre id="d1zzb"></pre>