discuz自制模板的css放在哪个文件夹里

html-css09

discuz自制模板的css放在哪个文件夹里,第1张

如果想在默认模板上简单的修改、附加扩展css,只需要在你对应的模板套系下手动添加一个对应的扩展css文件就可以了,例如你想修改或者添加common.css中的代码,只需要在自己创建的模板套系目录的对应位置:common文件夹下新建一个extend_common.css文件,然后将自己要修改或者扩展的css代码。将在生成缓存css时,自动追加到默认模板的css文件tmplate/default/common/common.css解析成你当前的模板id缓存文件。

CSS 继承规范:

Discuz! X系列产品中 CSS 文件会在缓存时按照以下顺序进行合并:

template/default/*.css 文件。

当默认模板是非默认模板时,template/模板目录/extend_*.css 文件 或 template/模板目录/*.css。

当某插件启用时,source/plugin/插件目录/template/extend_*.css 文件。

因此非默认模板目录中的 CSS 属性将继承默认模板中的 CSS 属性,插件目录中的 CSS 文件将继承前二者的 CSS 属性。

CSS 自身的集成顺序为:当 CSS 属性名称相同时,CSS 文件中,写在后面的替换前面的代码。

CSS书写规范:

属性写在一行内,属性之间、属性名和值之间以及属性与“{}”之间须有空格,例如:.class { width: 400pxheight: 300px} 。

属性的书写顺序:

位置:position,left,right,float

盒模型属性:display,margin,padding,width,height

边框与背景:border,background

段落与文本:line-height,text-indent,font,color,text-decoration,...

其他属性:overflow,cursor,visibility,...

针对特殊浏览器的属性,应写在标准属性之前,例如:-webkit-box-shadow:-moz-box-shadow:box-shaow:

按照元素模型由外及内,由整体到细节书写,大致分为五组:

谨慎添加新的选择符规则,尤其不可滥用 id,尽可能继承和复用已有样式

选择符、属性、值均用小写(格式的颜色值除外),缩写的选择符名称须说明缩写前的全称,例如 .cl ->Clearfix

勿使用冗余低效的 CSS 写法,例如:ul li a span { ... }

慎用 !important

建议使用在 class/id 名称中的词语

表示状态:a->active

表示结构:h->header,c->content,f->footer

表示区域:mn->main,sd->side,nv-navigation,mu->menu

表示样式:l-list,tab,p_pop

常用css实例:

兼容IE浏览器css hack

所有 IE浏览器适用:

.ie_all .foo { ... }

IE6 专用:

.ie6 .foo { ... }

IE7 专用:

.ie7 .foo { ... }

IE8 专用:

.ie8 .foo { ... }

浮动样式及浮动元素父元素高度自适应样式代码:

.z/.y 浮动 left/right .z { float: left} .y { float: right}

.cl:after { content: "."display: blockheight: 0clear: bothvisibility: hidden} .cl { zoom: 1}

大标题字体:

.wx, .ph { font-family: "Microsoft YaHei", "Hiragino Sans GB", STHeiti, Tahoma, SimHei, sans-seriffont-weight: 100}

外边距样式:

.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}

文字字体大小:

.xs0 { font-family: {SMFONT}font-size: {SMFONTSIZE}-webkit-text-size-adjust: none}

.xs1 { font-size: 12px !important}

.xs2 { font-size: 14px !important}

.xs3 { font-size: 16px !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}

module.css文件架构解析(此文件必须按照格式编写):

/** group::index **/

/* 群组 index 模块使用的CSS */

/** end **/

/** group::index,forum::index **/

/* 群组 index 和 论坛 index 模块使用的CSS */

/** end **/

/** forum **/

/* 论坛 所有模块使用的CSS */

/** end **/

实现模块化css分部加载!格式固定多个模块用”,“隔开例如:

/** misc::invite,group,forum::viewthread,portal::view,home::space **/

这个文件的分部加载是对应程序地址例如:forum.php?mod=forumdisplay,应当按照CURSCRIPT::$mod格式写即:forum::forumdisplay。

1,对于服务器单项目或是多项目共用的js或是css文件来说,可以直接放到/Public目录,在模板使用类似__PUBLIC__/js/common.js 路径调用.2,对于多项目,项目之间不进行共用的js和css文件,可以放置到 项目目录/Public 下,这个时候需要在项目config.php下添加一个模板解析,指向该路径.不建议这么做,因为这样意义不大.3,在 项目目录/Tpl/对应主题(默认default)/ 下建立一个Public目录,将项目的js和css放置到这里,如果项目进行了分组,可以在 该Public目录下js目录和css目录下进行分组,这样文件路径比较清晰. 在模板里 使用类似 ../Public/js/common.js 或是 ../Public/js/分组目录/common.js 引用文件 我使用tp开发,一直使用第三种.