相信修改过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样式好好研究一下,也是会很有帮助的。 
 
 
 |   
 
上一篇: Discuz  X2在线会员默认展开,快捷修改方法下一篇: 50点提高PHP编程效率 引入缓存提升性能 
 
 |