Top
分享按钮

样式叠加

黄色字体为注释内容

所有class都可以叠加使用,创造更个性化的样式效果和细节。您只要拷贝到class=""双引号中使用即可,注意样式之间用空格隔开

(1) 文字通用样式

横向对齐 纵向对齐 字体 文字样式 文字颜色 换行 下划线
tl居左 vertical-m垂直居中 f-f-helveticaHelvetica f-w-normal无粗细 f-c-black黑色 noWrap不换行 f-d-none
tc居中 vertical-b垂直居底部 f-f-song宋体 f-w-blod粗体 f-c-white白色 autoWrap自动换行 f-d-line
tc居右 vertical-t垂直居顶部 f-f-heiti黑体 f-s-italic斜体
f-f-yahei雅黑 f-s-normal无斜体
文字大小 文字缩进
f + 数字
格式如:f12
数字(px)取值:10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,35,40,45,50,55,60,65,70,75
f-i + 数字
格式如:f-i15
数字(px)取值:0,5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100

(2) 边距通用样式

四周外边距 外上边距 外下边距 外左边距 外右边距
ma + 数字
格式如:ma5
数字(px)取值:0,2,3,4,5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100
ma-t + 数字
格式如:ma-t20
数字(px)取值:2,3,4,5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100
ma-b + 数字
格式如:ma-b20
数字(px)取值:2,3,4,5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100
ma-l + 数字
格式如:ma-l20
数字(px)取值:2,3,4,5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100
ma-r + 数字
格式如:ma-r20
数字(px)取值:2,3,4,5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100
四周内边距 内上边距 内下边距 内左边距 内右边距
pa + 数字
格式如:pa5
数字(px)取值:0,5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100
pa-t + 数字
格式如:pa-t20
数字(px)取值:5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100
pa-b + 数字
格式如:pa-b20
数字(px)取值:5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100
pa-l + 数字
格式如:pa-l20
数字(px)取值:5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100
pa-r + 数字
格式如:pa-r20
数字(px)取值:5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100

(3) 色彩叠加

取消色彩的hover效果,请叠加.dsure-no-hover样式,比如dsure-bg-blue dsure-no-hover

dsure-bg-blue dsure-bg-black dsure-bg-silver dsure-bg-gray dsure-bg-red dsure-bg-purple
dsure-bg-green dsure-bg-aquamarine dsure-bg-olivedrab dsure-bg-pink dsure-bg-indigo dsure-bg-orange
dsure-bg-brown dsure-bg-yellow dsure-bg-cadetblue dsure-bg-lemonchiffon dsure-bg-lavender dsure-bg-burlywood

(4) 容器通用样式

容器对齐方式 容器类型 清除浮动
fl向左浮动 blo转变为块元素 clear用于两个层容器之间的清除浮动
fr向右浮动 clearfix用于父层容器上的清除浮动
box-center居中
设定容器最小高度
min-h + 数字
格式如:min-h300
数字(px)取值:100,150,200,250,300,350,400,450,500,550,600,650

(5) 边框/圆角效果

圆角、圆形效果9.0版本以下IE浏览器无效

边框 圆角效果
noborder无边框 dsure-radius-none无圆角
dsure-radius-small小型圆角
dsure-radius-medium中型圆角
dsure-radius-medium2x两倍中型圆角
dsure-radius-big大型圆角
dsure-radius-full100%圆形圆角

(6) 简单示范

四周内边距15像素 + 外上边距20像素 + 字体大小16像素 + 淡青黄背景 + 中型圆角
四周外边距20像素 + 字体为白色 + 黑色背景
四周内边距20像素 + 外上边距10像素 + 左浮动
内右边距10像素 + 外上边距10像素 + 右浮动
清除浮动
宽度为200像素的层容器居中对齐
 
HTML代码:

<div class="pa15 ma-t20 f16 dsure-no-hover dsure-bg-lemonchiffon  dsure-radius-medium">四周内边距15像素 + 外上边距20像素 + 字体大小16像素 + 淡青黄背景 + 中型圆角</div>
<div class="ma20 f-c-white dsure-no-hover dsure-bg-black">四周外边距20像素 + 字体为白色 + 黑色背景</div>
<div class="pa20 ma-t10 fl">四周内边距20像素 + 外上边距10像素 + 左浮动</div>
<div class="pa-r10 ma-t10 fr">内右边距10像素 + 外上边距10像素 + 右浮动</div>    
<div class="clear">清除浮动</div> 
<div style="width:200px" class="box-center"> 宽度为200像素的层容器居中对齐</div>