候经常用一些自己的 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 样式好好研究一下,也是会很有帮助的。