·设为首页收藏本站📧邮箱修改🎁免费下载专区💎积分✅卡密📒收藏夹👽聊天室
🔄最新发布📃文档资料库🆔加群看共享切换到窄版
立即注册
DZ插件网»🏠首页 › Discuz! › 站长杂谈 › Discuz！模板CSS拓展
返回列表 发布新帖

Discuz！模板CSS拓展

204 0
发表于 2023-8-24 14:40:43 | 查看全部 阅读模式

马上注册，免费下载更多dz插件网资源。

您需要 登录 才可以下载或查看，没有账号？立即注册

×
CSS扩展
如果想在默认模板上简单的修改、附加扩展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: 400px; height: 300px; } 。属性的书写顺序：
      针对特殊浏览器的属性，应写在标准属性之前，例如：-webkit-box-shadow:; -moz-box-shadow:; box-shaow:;按照元素模型由外及内，由整体到细节书写，大致分为五组：
        位置：position,left,right,float盒模型属性：display,margin,padding,width,height边框与背景：border,background段落与文本：line-height,text-indent,font,color,text-decoration,...其他属性：overflow,cursor,visibility,...

    谨慎添加新的选择符规则，尤其不可滥用 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: block; height: 0; clear: both; visibility: hidden; } .cl { zoom: 1; }
    大标题字体：
    .wx, .ph { font-family: "Microsoft YaHei", "Hiragino Sans GB", STHeiti, Tahoma, SimHei, sans-serif; font-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。
浏览器, 复用, 缓存, important, css
我要说一句 收起回复
赞赏
回复

使用道具 举报

相关帖子
返回列表 发布新帖

回复
 懒得打字嘛，点击右侧快捷回复【查看最新发布】   【应用商城享更多资源】
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

创宇盾启航版免费网站防御网站加速服务

关于我们

关于我们 免责声明 应用市场 下载中心

服务支持

有问必答 优秀站点 常见问题 建站必看
投诉/建议联系

discuzaddons@vip.qq.com

未经授权禁止转载，复制和建立镜像，
如有违反，按照公告处理!!!
  • 联系QQ客服
  • 添加微信客服

联系DZ插件网微信客服|最近更新|Archiver|手机版|小黑屋|DZ插件网! ( 鄂ICP备20010621号-1 )|网站地图 知道创宇云防御

您的IP:13.58.161.216,GMT+8, 2024-11-6 07:57 , Processed in 0.338809 second(s), 77 queries , Gzip On, Redis On.

Powered by Discuz! X5.0 Licensed

© 2001-2024 Discuz! Team.

关灯 在本版发帖
扫一扫添加微信客服
 QQ客服返回顶部
快速回复 返回顶部 返回列表