相信修改過 discuz 模板的同學都用改對 discuz 的 css 非常熟悉了。但經常碰到有些人在製作模板的時

候經常用一些自己的 css, 在這裡我想具體給大家介紹下關於,在 discuz 中 css 使用的一些建議,希望

大家能夠更好的最佳化程式碼。
首先我們應該好好讀讀 discuz 的 css 檔案,避免使用一些重複的樣式。
比如我們常用的,左右浮動,discuz 中的 css 檔案就很簡潔的定義了他的使用:
.z { float: left; } .y { float: right; }
這樣我們就不用去重複定義了。
相信對頁面前端製作有經驗的同學對浮動的自適應都有一定的瞭解。 discuz 中隊自適應做了一個非

常好的相容性類,.cl, 這個類能很好的解決這個問題。大家在寫樣式的時候,只要給你需要自適應的

標籤加一個.cl 類就可以了:
    .cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .cl {

zoom: 1; }
另外對於 css 的相容性,discuz 中用程式做了單獨的兼用規定。
關於 CSS Hack 的說明:

    所有 IE 瀏覽器適用:    .ie_all .foo { ... }
    IE6 專用:            .ie6 .foo { ... }
    IE7 專用:            .ie7 .foo { ... }
    IE8 專用:            .ie8 .foo { ... }

希望大家以後再相容行。可以有效的減少 css 的程式碼量。
另外在對標籤元素設定內外邊距的時候我們,可以用 discuz 已經定義好的邊距,這樣能省去我們重
新定義的繁瑣。
.mtn { margin-top: 5px !important; }
    .mbn { margin-bottom: 5px !important; }
    .mtm { margin-top: 10px !important; }
    .mbm { margin-bottom: 10px !important; }
    .mtw { margin-top: 20px !important; }
    .mbw { margin-bottom: 20px !important; }

    .ptn { padding-top: 5px !important; }
    .pbn { padding-bottom: 5px !important; }
    .ptm { padding-top: 10px !important; }
    .pbm { padding-bottom: 10px !important; }
    .ptw { padding-top: 20px !important; }
    .pbw { padding-bottom: 20px !important; }
以上只是我舉的一些例子,還有很多很多可以服用的樣式,希望大家以後再編寫 css 程式碼是有能夠盡

量向 discuz 已經定義好的樣式。希望大家對 discuz 的 css 樣式好好研究一下,也是會很有幫助的。