Discuz!官方免费开源建站系统

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索

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

[复制链接]
elevensky 发表于 2011-6-26 22:16:28 | 显示全部楼层 |阅读模式
相信修改过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样式好好研究一下,也是会很有帮助的。
QOUU 发表于 2011-6-26 23:06:45 | 显示全部楼层
本帖最后由 QOUU 于 2011-6-26 23:14 编辑

占位学习
能出个门户的教程吗?
http://www.mamacn.com/
回复

使用道具 举报

chen345210 发表于 2011-7-10 14:25:08 | 显示全部楼层
支持一下
回复

使用道具 举报

lianqu_1991 发表于 2011-7-16 13:08:59 | 显示全部楼层
支持一下
回复

使用道具 举报

aguo0453 发表于 2011-7-18 13:14:20 | 显示全部楼层
支持下
回复

使用道具 举报

benls 发表于 2011-7-31 23:27:37 | 显示全部楼层
学习学习,支持支持
回复

使用道具 举报

卟乐 发表于 2011-8-1 09:34:59 | 显示全部楼层
lz大爱,只是,discuz。htm文件里好多if语句里的代码是什么意思啊,就是[]里的
球教程,球解释,各种球
回复

使用道具 举报

xipick 发表于 2011-9-21 09:39:59 | 显示全部楼层
不懂啊
回复

使用道具 举报

happy_hp 发表于 2011-9-29 20:56:00 | 显示全部楼层
支持:
回复

使用道具 举报

wlwhg 发表于 2011-11-18 11:41:55 | 显示全部楼层
支持下。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|Discuz! 官方站 ( 皖ICP备16010102号 )star

GMT+8, 2024-11-22 05:12 , Processed in 0.066298 second(s), 6 queries , Gzip On, Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表