discuz模板制作中关于css使用的一些指导说明

猪八戒

相信修改过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样式好好研究一下，也是会很有帮助的。

道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户，那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信：q792472177免费电话、后台提交工单这些方式联系道勤主机客服！ 如果您不是我们的客户也没问题，点击页面最右边的企业QQ在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！