公共样式类表示例

样式表:common_style_classes.css

这个样式设定了一些类实现某一种特殊的样式属性,必要时直接使用而无需另外写样式定义。

显示控制类

使用 .inline 可转换为行内元素

  • Inline Item 1
  • Inline Item 2
  • Inline Item 3
使用 .hidden 可隐藏元素

使用 .noOutline 取消轮廓

透明设定类

使用 trans 或 transparent 类设置一个元素 80% 透明

.transparent 80% 透明

.transparent70 70% 透明

.transparent50 50% 透明

.hoverNoOpacity 取消鼠标指向时的透明

宽度设定类

.w120 代表 120px 宽度
.w120 代表 120px 宽度
.w240 代表 240px 宽度
.w240 代表 240px 宽度
.w360 代表 360px 宽度
.w20p 代表 20% 宽度
.w30p 代表 30% 宽度
.w40p 代表 40% 宽度
.w50p 代表 50% 宽度
.w70p 代表 70% 宽度
.w100p 代表 100% 宽度
.h120 代表 120px 高度
.h240 代表 260px 高度
.h360 代表 360px 高度

边距设定类

.mb10 代表下边距 10px
.mb20 代表下边距 20px
.mr10 代表右边距 10px
.mr20 代表右边距 20px
.mr20 代表右边距 20px

.noMargin 取消所有边距

填充设定类

.padding10 代表内填充 10px
.padding20 代表内填充 20px
.padding20mm 代表内填充 20mm

.noPadding 取消所有内填充

布局控制类

.clear 清除浮动
.fl 设置左浮动
.fr 设置右浮动
.center 或 .centered 设置居中
.clearfix 清除浮动并固实容器

当一个容器所包含的子元素全部为浮动元素时,应设置 .clearfix 类。

背景类

.no_bg 取消背景

黑色 .black_bg
灰色 .grey_bg
白色 .white_bg
信息(天蓝色) .info_bg
蓝色 .blue_bg
主要的 .primary_bg
绿色 .green_bg
成功 .success_bg
黄绿色.yellowgreen_bg
黄色 .yellow_bg
警告的 .warning_bg
红色 .red_bg
危险的 .danger_bg
错误的 .error_bg
粉红色 .deepskyblue_bg
彩虹背景 .rainbow_bg
心形图案背景 .heartsBg
蜂巢图案背景 .honeyCombBg

桌布 .tablecloth

星空背景 .starryNightBg

边框类

.border
设置边框

.lightBorder
设置浅色边框

.darkBorder
设置深色边框

.redBorder
设置红色边框

.pinkBorder
设置粉色边框

.orangeBorder
设置橙色边框

.yellowBorder
设置黄色边框

.greenBorder
设置绿色边框

.blueBorder
设置蓝色边框

.skyblueBorder
设置天蓝色边框

.greyBorder
设置灰色边框

.whiteBorder
设置白色边框

.roundBorder
.roundCorner
.roundBorder8
设置圆角边框(8px)

.borderRadius4
.roundBorder4
设置 4px 圆角边框

.borderRadius6
.roundBorder6
设置 6px 圆角边框

.borderRadius10
.roundBorder10
设置 10px 圆角边框

.no-radius 设置元素不使用圆角



文字对齐设定类

.align-left 左对齐
.align-right 右对齐
.align-center 居中

.align-justify 两边对齐。

text-align 属性规定元素中的文本的水平对齐方式。

该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔,可以支持值 justify;不同用户代理可能会得到不同的结果。

字体类

.wryh 或 .msyh 设置微软雅黑
.f16 设置 16px 字体
.f18 设置 18px 字体
.f80p 或 .fontSmaller 设置 80% 字体
.f90p 设置 90% 字体
.f110p 设置 110% 字体
.f120p 或 .fontBigger 设置 120% 字体
.f130p 设置 130% 字体
.bold 设置字体加粗
.lighter 设置字体变细
.underline 设置下划线
.textDelete 设置删除线

文字修饰类

.blink 闪烁文字

.tshadow 文字阴影

文字颜色类

.red 红色
.error 出错信息
.price 价格
.pink 粉红色
.orangered 橙红色
.orange 橙色
.yellow 黄色
.greenyello 黄绿色
.green 绿色
.success 成功信息
.olive 橄榄绿
.blue 蓝色
.skyblue 天空蓝
.purple 紫色
.grey 灰色
.more 更多链接
.datetime 日期时间
.phoneNumber 手机号码
.darkgrey 深灰色
.date 日期
.white 白色
.rainbowColor 彩虹色

文本分栏类

使用 .textColumn2 把文本分成2栏

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

使用 .textColumn3 把文本分成3栏

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

使用 .textColumn4 把文本分成4栏

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

图片样式类

.circle 圆形图片

常用在头像等地方。

.disk 圆盘

常用在音乐唱片等地方。

.shadow 阴影

也可以用在其他盒子元素上

.thumbnail 缩略图

动画类

.rotate2d 用于二维旋转

鼠标指针类

.hand 使用手型鼠标指针

过渡效果

样式改变时有渐变过渡效果