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

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

【转】网页制作中的CSS+DIV：dl,dt,dd分别表示什么意思啊？请说明啊，谢谢有什么功能？...
网页制作中的CSS+DIV:dl,dt,dd分别表示什么意思啊?请说明啊,谢谢有什么功能? <dl>标记定义了一个定义列表,定义列表中的条目是通过使用<dt>标记(" ...
在.Net 模板页中使用CSS样式
使用了.Net2.0的母版后,由于每个网页都独立在body中,无法添加CSS,把CSS的引用写到母版中又会也会引起一些相对路径的问题.后来上网查看了一下,多数的解决方式是在后台代码的Load事件中,增 ...
调用html模板帝国cms,帝国CMS模板制作中常用的调用变量简单整理
当前栏目ID $GLOBALS['navclassid'] 当前父栏目ID $class_r[$cid]['bclassid'] 栏目路径 $class_r[栏目ID]['classpath'] 当前 ...
Discuz3.3精仿小米风格整站模板制作——1、新建模板方案
术语说明: 模板--模板是一堆按照规定命名方式的html文件,用于指定整个论坛不同页面的外观. 标签--标签和模板共同作用以实现论坛换肤功能,其中标签主要控制页面显示什么数据,显示多少条等. 风格-- ...
cmstop模板制作教程内容页变量
内容页变量变量代码说明 {$contentid} 内容ID {$catid} 内容所在栏目ID {$modelid} 内容模型ID,1=文章,2=组图,3=链接,4=视频,5=访谈,7=活动,8= ...
[系列教程] Discuz模板的制作方法
Discuz模板的制作相对还是比较简单,现在应用中心的上线又涌现出来一大批模板开发作者,不管大家做免费模板还是商业模板,都希望每个开发者可以维护好自己的模板,给站长们一个好模板.Discuz模板的创建 ...
学习网页制作中如何在正确选取和使用 CSS 单位
在 CSS 测量系统中,有好几种单位,如像素.百分比.英寸.厘米等等,Web 开发人员很难了解哪些单位在何处使用,如何使用.很多人习惯了总是使用同一种单位,但这一决定可能会严重限制你的设计的执行. 这 ...
HTML期末大作业~简单的程序员个人博客网站模板源码(HTML+CSS)~个人主页博客web网页设计制作~HTML简单个人网页制作~Web大学生网页成品...
HTML期末大作业~ 简单的程序员个人博客网站模板源码(HTML+CSS)~学生HTML个人网页作业作品下载 ~个人主页博客网页设计制作 ~大学生个人网站作业模板 ~简单个人网页制作临近期末, 你还 ...
phpcms 模板中php代码,PHPCMS 模板制作教程黑夜之舞出品
第一讲:了解PHPCMS2008模板的位置及结构首先从官网把phpcms2008最新版本下载下来,并安装好.安装好之后在后台里的网站配置--基本信息那生成文件扩展名 html设置好,然后更新首页和 ...
HTML实训大作业网页设计：我的简历——响应式个人简历网站模板(1页) HTML+CSS+JavaScript web网页设计制作成品
HTML实训大作业网页设计:我的简历--响应式个人简历网站模板(1页) HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品 >&g ...

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

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

最新文章

热门文章