Top

Base Stylesheets

Notes appears as a yellow text.

(1) Text

Horizontal Alignment Vertical Alignment Font Family Font Style Font Color Wrap Underline
tlalign left vertical-mvertically center f-f-helveticaHelvetica f-w-normalnormal f-c-blackblack noWrapnowrap f-d-nonenone
tcalign center vertical-bvertically bottom f-f-songsimsun f-w-blodbold f-c-whitewhite autoWrapword wrap f-d-lineunderline
tcalign right vertical-tvertically top f-f-heitisimhei f-s-italicitalic
f-f-yaheiMicrosoft YaHei f-s-normalnormal
Font Size Text Indent
f + number
E.g. f12
(unit: pixels) values range£º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 + number
E.g. f-i15
(unit: pixels) values range£º0£¬5£¬10£¬15£¬20£¬25£¬30£¬35£¬40£¬45£¬50£¬55£¬60£¬65£¬70£¬75£¬80£¬85£¬90£¬95£¬100

(2) Margin

Margin with four directions Margin top Margin bottom Margin left Margin right
ma + number
E.g. ma5
(unit: pixels) values range£º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 + number
E.g. ma-t20
(unit: pixels) values range£º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 + number
E.g. ma-b20
(unit: pixels) values range£º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 + number
E.g. ma-l20
(unit: pixels) values range£º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 + number
E.g. ma-r20
(unit: pixels) values range£º2£¬3£¬4£¬5£¬10£¬15£¬20£¬25£¬30£¬35£¬40£¬45£¬50£¬55£¬60£¬65£¬70£¬75£¬80£¬85£¬90£¬95£¬100
Padding for four directions Padding top Padding bottom Padding left Padding right
pa + number
E.g. pa5
(unit: pixels) values range£º0£¬5£¬10£¬15£¬20£¬25£¬30£¬35£¬40£¬45£¬50£¬55£¬60£¬65£¬70£¬75£¬80£¬85£¬90£¬95£¬100
pa-t + number
E.g. pa-t20
(unit: pixels) values range£º5£¬10£¬15£¬20£¬25£¬30£¬35£¬40£¬45£¬50£¬55£¬60£¬65£¬70£¬75£¬80£¬85£¬90£¬95£¬100
pa-b + number
E.g. pa-b20
(unit: pixels) values range£º5£¬10£¬15£¬20£¬25£¬30£¬35£¬40£¬45£¬50£¬55£¬60£¬65£¬70£¬75£¬80£¬85£¬90£¬95£¬100
pa-l + number
E.g. pa-l20
(unit: pixels) values range£º5£¬10£¬15£¬20£¬25£¬30£¬35£¬40£¬45£¬50£¬55£¬60£¬65£¬70£¬75£¬80£¬85£¬90£¬95£¬100
pa-r + number
E.g. pa-r20
(unit: pixels) values range£º5£¬10£¬15£¬20£¬25£¬30£¬35£¬40£¬45£¬50£¬55£¬60£¬65£¬70£¬75£¬80£¬85£¬90£¬95£¬100

(3) Color

Utilize the.dsure-no-hover class to remove hover effect. Such as 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) Container

Alignment Display Clear Float
flfloat to the left blochanging an inline element to a block clearelements after a floating element will flow around it
frfloat to the right clearfixa clearfix is a way for an element to automatically clear its child elements, so that you don't need to add additional markup. It's generally used in float layouts where elements are floated to be stacked horizontally.
box-centerelements will take up the width you specify, then the remaining space will be split evenly between the two margins.
Minimum Height
min-h + number
E.g. min-h300
(unit: pixels) values range£º100£¬150£¬200£¬250£¬300£¬350£¬400£¬450£¬500£¬550£¬600£¬650

(5) Border&fillet

Only supports up to IE 9.

Border Fillet
noborderspecifies no border dsure-radius-nonespecifies no fillet
dsure-radius-smallround corners (small)
dsure-radius-mediumround corners (medium)
dsure-radius-medium2xround corners (double medium)
dsure-radius-biground corners (large)
dsure-radius-fullperfect circles in CSS

(6) Demonstrate

content...
content...
content...
content...
content...
 
HTML Code:

<div class="pa15 ma-t20 f16 dsure-no-hover dsure-bg-lemonchiffon  dsure-radius-medium">content...</div>
<div class="ma20 f-c-white dsure-no-hover dsure-bg-black">content...</div>
<div class="pa20 ma-t10 fl">content...</div>
<div class="pa-r10 ma-t10 fr">content...</div>    
<div class="clear"></div> 
<div style="width:200px" class="box-center"> content...</div>