样式叠加
黄色字体为注释内容
所有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>