候經常用一些自己的 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 樣式好好研究一下,也是會很有幫助的。