系列教程 Discuz模板内置常用CSS代码分析

[复制链接]
ARCHY明星会员实名认证 发表于 2012-8-11 00:34:17 [系列教程] 显示全部楼层 |阅读模式 上一主题 下一主题
discuz使用视频教程
31
31

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
制作模板时必须学会的就是css语法,css是一种相对比较简单的前台HTML基础语言(css2中文手册下载)。学会使用内置常用CSS,可以减少代码,优化网页结构。

一、CSS书写规范

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

2、属性的书写顺序:

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

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

位置:position,left,right,float

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

边框与背景:border,background

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

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

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

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

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

6、慎用 !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

8、命名方式尽量不通用,使用自己的前缀。例如:(.header => .archy_hd / .footer => .archy_ft / ......)

二、CSS多IE下兼容HACK写法

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

三、常用CSS

1、左浮动、右浮动
  1. .z { float: left; }
  2. .y { float: right; }
复制代码
2、因为左右浮动造成的父级浮动溢出,及使用方法
  1. .cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .cl { zoom: 1; }

  2. <div class="cl">
  3.     <div class="z"></div>
  4. </div>
复制代码
3、大标题字体
  1. .wx, .ph { font-family: "Microsoft YaHei", "Hiragino Sans GB", STHeiti, Tahoma, SimHei, sans-serif; font-weight: 100; }
复制代码
4、行内分割竖线
  1. .pipe { margin: 0 5px; color: #CCC; }
复制代码
5、文字字体大小
  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; }
复制代码
6、灰色文字
  1. .xg1, .xg1 a { color: {LIGHTTEXT} !important; }
  2. .xg1 .xi2 { color: {HIGHLIGHTLINK} !important; }
  3. .xg2 { color: {MIDTEXT}; }
复制代码
7、高亮文字,1为橙色,2为蓝色
  1. .xi1, .onerror { color: {NOTICETEXT}; }
  2. .xi2, .xi2 a, .xi3 a { color: {HIGHLIGHTLINK} ; }
复制代码
8、文字粗体
  1. .xw0 { font-weight: 400; }
  2. .xw1 { font-weight: 700; }
复制代码
9、层下边线
  1. .bbda { border-bottom: 1px dashed {COMMONBORDER}; }
  2. .bbs { border-bottom: 1px solid {COMMONBORDER} !important; }
复制代码
10、去除边框
  1. .bw0 { border: none !important; }
  2. .bw0_all, .bw0_all th, .bw0_all td { border: none !important; }
复制代码
11、去除背景
  1. .bg0_c { background-color: transparent !important; }
  2. .bg0_i { background-image: none !important; }
  3. .bg0_all { background: none !important; }
复制代码
12、外边距样式
  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; }
复制代码
13、内边距样式
  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; }
复制代码




上一篇:Discuz!模板解析语法 - 变量/循环/判断/嵌套
下一篇:jQuery和Discuz js文件冲突解决办法。

大神点评20

非一般感觉明星会员实名认证 发表于 2012-8-11 10:07:34 [系列教程] 显示全部楼层
前排支持
神马都是浮云... ...
创业步步艰 发表于 2012-8-11 10:40:54 [系列教程] 显示全部楼层
必须前排支持啊 好教程
www.1288dh.com
创业步步艰 发表于 2012-8-11 10:41:17 [系列教程] 显示全部楼层
居然能抢到前排 不容易啊 我抢啊~~~~
www.1288dh.com
阳炎 发表于 2012-8-11 14:17:32 [系列教程] 显示全部楼层
看了 不错
chunmt 发表于 2012-11-19 16:47:24 [系列教程] 显示全部楼层
非常实用!谢谢!
天天加分 发表于 2012-11-30 13:04:45 [系列教程] 显示全部楼层
原来是这样子的啊
好玩的手机游戏http://www.88130.cn
wego 发表于 2012-12-23 07:44:06 [系列教程] 显示全部楼层
很实用的,支持!
◎_稻壳_★ 发表于 2013-4-12 01:51:23 [系列教程] 显示全部楼层
相当喜欢
Lxiatian 发表于 2013-4-18 12:52:05 [系列教程] 显示全部楼层
努力学习css......
理财了没 http://www.licailemei.com
beilinren 发表于 2013-4-19 23:36:13 [系列教程] 显示全部楼层
支持啊
swk666 发表于 2013-4-26 21:11:33 [系列教程] 显示全部楼层
付出的每一份行动,我都在关注,谢谢分享!
wai-v- 发表于 2013-6-19 18:55:13 [系列教程] 显示全部楼层
非常实用!谢谢!
ki1418 发表于 2013-7-2 12:34:40 [系列教程] 显示全部楼层
有沒有貴站請稍後的CSS分享?
luisyang明星会员实名认证 发表于 2013-7-15 01:31:42 [系列教程] 显示全部楼层
common.css
-----交流QQ:416713977-----PHPer
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

快速回复 返回顶部 返回列表