1. <dd id="5jlnw"><center id="5jlnw"></center></dd>
    <dd id="5jlnw"><track id="5jlnw"></track></dd>

    <th id="5jlnw"></th>
    <em id="5jlnw"><acronym id="5jlnw"></acronym></em>
    1. 立即注冊 找回密碼

      QQ登錄

      只需一步,快速開(kāi)始

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

      2018-6-13 12:56| 發(fā)布者: 豬八戒| 查看: 2137| 評論: 0

      摘要: discuz! 模板的教程之前已經(jīng)寫(xiě)過(guò)很多了,Discuz模板問(wèn)題我經(jīng)常都會(huì )說(shuō)推薦大家使用火狐的firebug來(lái)看看,很多同學(xué)在修改一些文件或者模板的時(shí)候都不會(huì )找問(wèn)題,看完今天的內容你應該會(huì )一些簡(jiǎn)單的使用了首先,推薦大家 ...
      discuz! 模板的教程之前已經(jīng)寫(xiě)過(guò)很多了,Discuz模板問(wèn)題我經(jīng)常都會(huì )說(shuō)推薦大家使用火狐的firebug來(lái)看看,很多同學(xué)在修改一些文件或者模板的時(shí)候都不會(huì )找問(wèn)題,看完今天的內容你應該會(huì )一些簡(jiǎn)單的使用了
      首先,推薦大家查看:火狐瀏覽器firebug的使用視頻教程,DiscuzX2.5模板全局樣式表 - common.css 注釋模板緩存、CSS繼承規范和CSS緩存機制這3篇教程

      然后,我們再來(lái)認識下Discuz!的樣式存放的規律。  樣式文件存放在 tempate/default/common目錄下common.css是共用的樣式文件,幾乎每個(gè)頁(yè)面都需要用到其中的樣式, module.css 是每個(gè)模塊中要用到樣式文件,下面我們來(lái)查看module.css樣式文件中的樣式分類(lèi)規律,module.css樣式,中添加有詳細的注釋?zhuān)ㄟ^(guò)注釋將樣式分類(lèi)。如:
      /** misc::invite,group,forum::viewthread,portal::view,home::space **/
              /* .usl -> 用于類(lèi)似群組中邀請好友中的好友列表 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 **/

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

      firebug 與 Discuz! 相結合

      現在,我們來(lái)了解firebug 中樣式的特征,

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

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

      最新評論

      相關(guān)推薦
      !jz_fbzt! !jz_lxwm! !jz_gfqqq!

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

      返回頂部
      色综合网站国产麻豆_国产在线精品福利尤物_两个人的视频全免费观看高清_日日干狠狠干