网站规范用例




文字:
1. 标题 h1~h7,p,li,b,a... 已经写好规范,直接使用标签就可以
2. 正常情况不需要重新定义 class,如果需要重新定义,请用父 class 约束,如果是 js 要用到,class 名称前请加前缀 :js-,比如 js-nav
3. 反色背景下要用反色的 class, 默认字体颜色黑色,如果需要在反色背景下改颜色,请使用已经写好的class名称,比如白色 color-ff | 黑色 color-00 | 绿色 color-crosschex | 红色 color-intellisight


1. 一个页面中必须且仅添加一个 h1 标签,二级标题可以用 h2, 三级标题可以用 h5
2. 大段描述用 p 标签

Secure Workplace, Simplify Management

Secure Workplace, Simplify Management

Secure Workplace, Simplify Management

Secure Workplace, Simplify Management

Secure Workplace, Simplify Management
Secure Workplace, Simplify Management

Secure Workplace, Simplify Management



按钮:
1. 仅复制 class 就可以,不要再自定义其它class 名称,如果是 js 要用到,class 名称前请加前缀 :js-,比如 js-nav,如果需要重新定义,请用父 class 约束
2. 反色背景下要用反色的 button,可以在[次要按钮中选择],比如黑色背景下不可以使用黑色按钮



主要:

.anviz-primary-btn .anviz-crosschex-btn .anviz-intellisight-btn

次要:

.minor-blue-btn .minor-crosschex-btn .minor-intellisight-btn

禁用:

disabled .minor-blue-btn .minor-crosschex-btn .minor-intellisight-btn

描边按钮:

.anviz-line-primary-btn .anviz-line-crosschex-btn .anviz-line-intellisight-btn .minor-line-blue-btn .minor-line-crosschex-btn .minor-line-intellisight-btn

文字按钮:

.anviz-text-primary-btn .anviz-text-crosschex-btn .anviz-text-intellisight-btn .minor-text-blue-btn .minor-text-crosschex-btn .minor-text-intellisight-btn



class 名称命名规范:



1. 全部用小写,多个字母用 “-” 连接,不要用驼蜂
2. 名称最好能表达清楚当前位置的功能,比如:nav-link