DiscuzX已内置常用css代码与css样例

DiscuzX已内置常用css代码与css样例

浏览次数:
信息来源: 本站原创
更新日期: 2021-06-12
文章简介

DiscuzX已内置常用css代码与css样例
前言说明
制作模板时必须学会的就是css语法,css语法是一种相对比较简单的前台HTML基础语言,不涉及编程范畴。
这里只对重要的几个用法进行

DiscuzX已内置常用css代码与css样例
前言说明
制作模板时必须学会的就是css语法,css语法是一种相对比较简单的前台HTML基础语言,不涉及编程范畴。
这里只对重要的几个用法进行介绍!以方便各位童鞋能够在并不很了解CSS时就能完成部分需求!
如果需要查看更多CSS资料请点击此处
制作模板时CSS书写要点:

1、命名方式尽量不通用,使用自己的前缀。例如:(.header => .GoDiscuz_header / .footer => .GoDiscuz_footer / .nav => .GoDiscuz_nav ......)
2、全局框架中慎用 !important 例如:(.header .nav {width:100% !important;})
3、a标签状态属性css书写有顺序(a:link / a:visited / a:hover / a:active )
4、属性继承顺序(先id后class,载入顺序后前/右左)
5、如果你给框架定义了宽高时尽量使用overflow:hidden
6、如果子框架有浮动属性时,父框架最好定义宽高(哪怕是auto!)或清除浮动
7、为了提高日后维护效率,书写的代码一定要有缩进规范
8、IE6浏览器中浮动框架外边距加倍时,记得给出问题的框架增加_display:inline属性!


css基础样例
背景图片附加属性
背景图片属性书写格式例子(平铺方式、横向属性、纵向属性):no-repeat left top
纵横属性可以为数字0,也可以为负值-10px
完整写法:background:url(图片地址) no-repeat 10px -10px;
注意观察框中的小图标!
css背景属性测试
清除浮动 .cl(DiscuzX内置属性)
清除浮动代码.cl位于common.css中,作用:防止框架中的子框架因为浮动原因,导致父框架失去高度

父框架

左边有浮动的框架,样式为 class="z"
另外一个框架
字号、加粗
字体字号大小以px为单位,两个值差2px,
颜色代码从#ffffff到#000000中间的6位代码值,可在网上找CSS颜色代码表
字号测试框架!请在上面选择条件
框架浮动
框架浮动的意思是我们通俗说的两个框架并列展示,左浮动float:left、右浮动float:right
DiscuzX中内置左右浮动css代码,分别是:左浮动.z 右浮动.y
这是第一个框架
这是第二个框架
框架外边距与浮动时外边距
框架外边距的意思是框架距离左边或者右边的距离 margin-left:10px; margin-right:10px;
这是第一个框架
这是第二个框架
DiscuzX已经内置全局常用css代码

CSS多IE下兼容HACK写法(DiscuzX内置)

  1. 所有 IE浏览器适用:        .ie_all .foo { ... }
  2. IE6 专用:                .ie6 .foo { ... }
  3. IE7 专用:                .ie7 .foo { ... }
  4. IE8 专用:                .ie8 .foo { ... }
 

左浮动、右浮动

  1. .z { float: left; }
  2. .y { float: right; }
 

左右浮动造成的父级浮动溢出的解决

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

行内分割竖线

  1. .pipe { margin: 0 5px; color: #CCC; }
 

文字字体大小

  1. .xs0 { font-family: SMFONT; font-size: SMFONTSIZE; -webkit-text-size-adjust: none; }
  2. .xs1 { font-size: 12px !important; }
  3. .xs2 { font-size: 14px !important; }
  4. .xs3 { font-size: 16px !important; }
 

灰色文字

  1. .xg1, .xg1 a { color: LIGHTTEXT !important; }
  2. .xg1 .xi2 { color: HIGHLIGHTLINK !important; }
  3. .xg2 { color: MIDTEXT; }
 

高亮文字,1为橙色,2为蓝色

  1. .xi1, .onerror { color: NOTICETEXT; }
  2. .xi2, .xi2 a, .xi3 a { color: HIGHLIGHTLINK ; }
 

文字粗体

  1. .xw0 { font-weight: 400; }
  2. .xw1 { font-weight: 700; }
 

层下边线

  1. .bbda { border-bottom: 1px dashed COMMONBORDER; }
  2. .bbs { border-bottom: 1px solid COMMONBORDER !important; }
 

去除边框

  1. .bw0 { border: none !important; }
  2. .bw0_all, .bw0_all th, .bw0_all td { border: none !important; }
 

去除背景

  1. .bg0_c { background-color: transparent !important; }
  2. .bg0_i { background-image: none !important; }
  3. .bg0_all { background: none !important; }
 

外边距样式

  1. .mtn { margin-top: 5px !important; }
  2. .mbn { margin-bottom: 5px !important; }
  3. .mtm { margin-top: 10px !important; }
  4. .mbm { margin-bottom: 10px !important; }
  5. .mtw { margin-top: 20px !important; }
  6. .mbw { margin-bottom: 20px !important; }
 

内边距样式

  1. .ptn { padding-top: 5px !important; }
  2. .pbn { padding-bottom: 5px !important; }
  3. .ptm { padding-top: 10px !important; }
  4. .pbm { padding-bottom: 10px !important; }
  5. .ptw { padding-top: 20px !important; }
  6. .pbw { padding-bottom: 20px !important; }

转载请注明:帝国CMS模板 » DiscuzX已内置常用css代码与css样例

标签:
模板制作中必须知道的变量、循环、判断、文件嵌套
« 上一篇 2020年11月02日
DiscuzX2.5模板样式表-common.css
下一篇 » 2020年11月05日
最近发布作品
更多

如本文对您有帮助,就请抽根烟吧!