前言说明
制作模板时必须学会的就是css语法，css语法是一种相对比较简单的前台HTML基础语言，不涉及编程范畴。
这里只对重要的几个用法进行介绍！以方便各位童鞋能够在并不很了解CSS时就能完成部分需求！
如果需要查看更多CSS资料请点击此处
制作模板时CSS书写要点：
1、命名方式尽量不通用，使用自己的前缀。例如:（.header => .cr180_header / .footer => .cr180_footer / .nav => .cr180_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;
注意观察框中的小图标！ no-repeat 不平铺 repeat 平铺 repeat-x 横向平铺 repeat-y 纵向平铺 left 横向居左 center 横向居中 right 横向居右 top 垂直顶部 center 垂直居中 bottom 垂直底部 css背景属性测试 清除浮动 .cl（DiscuzX内置属性）清除浮动代码.cl位于common.css中，作用：防止框架中的子框架因为浮动原因，导致父框架市区高度 .cl 无.cl时 父框架
左边有浮动的框架，样式为 class="z"
另外一个框架 字号、加粗字体字号大小以px为单位，两个值差2px，
颜色代码从#ffffff到#000000中间的6位代码值，可在网上找CSS颜色代码表 12px 14px 16px 18px 20px font-weight:normal 不加粗 font-weight:bold 加粗 color:#000000 黑色 color:#999999 浅色 color:#ff0000 红色 color:#0000ff 蓝色 color:#006600 绿色 字号测试框架！请在上面选择条件 框架浮动框架浮动的意思是我们通俗说的两个框架并列展示,左浮动float:left、右浮动float:right
DiscuzX中内置左右浮动css代码，分别是：左浮动.z 右浮动.y 第一个框架不浮动 第一个框架左浮动 第一个框架右浮动 第二个框架不浮动 第二个框架左浮动 第二个框架右浮动 这是第一个框架 这是第二个框架 框架外边距与浮动时外边距框架外边距的意思是框架距离左边或者右边的距离 margin-left:10px; margin-right:10px;
第一个框架左边距0px(margin-left:0px;) 第一个框架左边距10px(margin-left:10px;) 第一个框架左边距20px(margin-left:20px;) 第一个框架左边距30px(margin-left:30px;) 第二个框架左边距0px(margin-left:0px;) 第二个框架左边距10px(margin-left:10px;) 第二个框架左边距20px(margin-left:20px;) 第二个框架左边距30px(margin-left:30px;) 两个框架均不浮动(float:none) 两个框架都左浮动(float:left) 两个框架都右浮动(float:right) 这是第一个框架 这是第二个框架
DiscuzX已经内置全局常用css代码
CSS多IE下兼容HACK写法(DiscuzX内置)所有 IE浏览器适用： .ie_all .foo { ... }
IE6 专用： .ie6 .foo { ... }
IE7 专用： .ie7 .foo { ... }
IE8 专用： .ie8 .foo { ... }
左浮动、右浮动
- .z { float: left; }
- .y { float: right; }
左右浮动造成的父级浮动溢出的解决
- .cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .cl { zoom: 1; }
行内分割竖线
- .pipe { margin: 0 5px; color: #CCC; }
文字字体大小
- .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; }
灰色文字
- .xg1, .xg1 a { color: LIGHTTEXT !important; }
- .xg1 .xi2 { color: HIGHLIGHTLINK !important; }
- .xg2 { color: MIDTEXT; }
高亮文字，1为橙色，2为蓝色
- .xi1, .onerror { color: NOTICETEXT; }
- .xi2, .xi2 a, .xi3 a { color: HIGHLIGHTLINK ; }
文字粗体
- .xw0 { font-weight: 400; }
- .xw1 { font-weight: 700; }
层下边线
- .bbda { border-bottom: 1px dashed COMMONBORDER; }
- .bbs { border-bottom: 1px solid COMMONBORDER !important; }
去除边框
- .bw0 { border: none !important; }
- .bw0_all, .bw0_all th, .bw0_all td { border: none !important; }
去除背景
- .bg0_c { background-color: transparent !important; }
- .bg0_i { background-image: none !important; }
- .bg0_all { background: none !important; }
外边距样式
- .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; }
|
