必威体育Betway必威体育官网
当前位置:首页 > IT技术

Discuz!开发之模板制作CSS扩展规范与语法规范

时间:2019-07-19 01:10:00来源:IT技术作者:seo实验室小编阅读:60次「手机版」
 

discuz模板制作

在默认模板基础上简单的修改、附加扩展 CSS 时只需在对应的模板套系下添加一个对应的扩展 CSS 文件即可, 例如修改或扩展 common.css 中的代码, 只需在创建的模板套系目录对应位置:common/ 文件夹下新建一个 extend_common.css 文件, 然后追加需要修改或者扩展的 CSS 代码。在生成缓存 CSS 时, 扩展代码会追加到默认模板的 CSS 文件 tmplate/default/common/common.css 解析成当前的模板 id 缓存样式文件。

一、CSS 继承规范:

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

a.template/default/*.css 文件。

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

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

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

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

二、CSS书写规范:

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

2.2、属性的书写顺序:

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

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

位置:position, left, right, float

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

边框与背景:border, background

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

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

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

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

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

f.慎用 !important

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

表示状态:a->active

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

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

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

三、常用css实例:

3.1、兼容IE浏览器 css hack

所有 IE浏览器适用: .ie_all .foo { ... }

IE6 专用: .ie6 .foo { ... }

IE7 专用: .ie7 .foo { ... }

IE8 专用: .ie8 .foo { ... }

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

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

.cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .cl { zoom: 1; }

3.3、大标题字体:

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

3.4、外边距样式:

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

3.5、文字字体大小:

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

3.6、内边距样式:

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

/3.7、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。

相关阅读

discuz7.2sql注入漏洞

今天尝试了discuz7.2动力论坛的sql注入漏洞 原因是由faq.php文件源码存在漏洞引起的 下载官方discuz7.2源码,在本地搭建漏洞环境 h

Discuz! X3.2 二次开发基本流程

1.Discuz目录结构 1.1根目录文件 admin.php-----------------------------------------后台入口文件 api.php-----------------

巧用Discuz! X1.5排行榜功能 提高社区活跃度

许多站长在社区发展壮大的过程中,都为2个问题而烦恼:一是随着社区内容的越来越多,怎样才能将精华内容体现出来?二是如何促进会员的活

Discuz推出“微社区” 给微信加个论坛

Discuz!社区领域的领导者,近日开发出一款针对微信的社区(论坛)功能:“微社区”。作为基于微信的移动化论坛,适合微信公众号。简而言

图文解说:Discuz论坛基础设置第一弹

Discuz相信站长朋友们会很熟悉,几乎我们逛的大多数论坛都是采用这个程序做的,对从事seo行业的站长朋友们就更加熟悉了,外链发布最多

分享到:

栏目导航

推荐阅读

热门阅读