助手类

点击我

点击我

Helper类几乎可以应用于任何东西，但应该谨慎使用。这个文本有以下帮助类:'clearboth powderbg-pale v3pad h1pad text-center blueborder radius-16'

 
v6pad
 
v5pad
 
v4pad
 
v3pad
 
v2pad
 
v1pad
 
v6top
 
v5top
 
v4top
 
v3top
 
v2top
 
v1top
 
v6bottom
 
v5bottom
 
v4bottom
 
v3bottom
 
v2bottom
 
v1bottom
 
h6pad-leftright
 
h5pad-leftright
 
h4pad-leftright
 
h3pad-leftright
 
h2pad-leftright
 
h1pad-leftright
 
h6left
 
h5left
 
h4left
 
h3left
 
h2left
 
h1left
 
h6right
 
h5right
 
h4right
 
h3right
 
h2right
 
h1right
 

利润率

• 上，下，右，左
• M1top m1bottom m1right m1left
• M2top m2bottom m2right m2left

 
m0top m0bottom m0right m0left
 
m1top m1bottom m1right m1left
 
m2top m2bottom m2right m2left
 

边界

可以对整个元素应用边框，也可以对一个元素并排应用边框。如果需要，还可以覆盖边界宽度。

对于文本框，下面的样式是柔和的。

这条边是蓝绿色的。

这有一个灰色的边界。

这个有蓝色的边框。

以下款式均为品牌颜色。

这条边是蓝绿色的。

这有一个灰色的边界。

这个有蓝色的边框。

这有一个绿色的边界。

下面的样式说明了如何将边框应用到特定的边。当应用于单面时，必须指定宽度。可用宽度为:1、2、3。

右边有一个1px的蓝绿色边框。

左边有一个2px的灰色边框。

顶部有一个3px的蓝色边框。

底部有2px的绿色边框。

这是一个蓝绿色的边框。
 
边框为灰色。
 
边框为蓝色。
 
边框为蓝绿色。
 
边框为灰色。
 
边框为蓝色。
 
边框为绿色。
 
右侧有1px蓝绿色边框。
 
左边有一个2px的灰色边框。
 
上面有3px的蓝色边框。
 
底部有2px的绿色边框

背景颜色

当使用背景色时，放置在顶部的文本将尝试智能地改变颜色，以提供足够的对比度以提高可读性。这可以覆盖与文本颜色选项。

• transbg

• yellowbg

• yellowbg-light

• cloudbg

• greybg

• greybg-light

• greybg-pale

• whitebg

• tealbg

• tealbg-dark

• tealbg-light

• tealbg-pale

• greenbg

• greenbg-dark

• greenbg-light

• bluebg

• powderbg

• powderbg-pale

• bluebg-st

• tealbg-st

• yellowbg-st

• greenbg-st

• whitebg-st

 
 
 yellowbg
 
cloudbg
 
 greybg
 
< li> 
 
白球
 
茶球
 
茶球
 
茶球-暗">
tealbg-light
 
greenbg
 
greenbg-light
 
bluebg
 
powderbg
 
 
bluebg-st
 
tealbg-st
 
yellowbg-st
 
 
greenbg-st
 whitebg-st 

文本的颜色

 bluetooth 
 
 class="tealtext">tealtext
 
greentext
 
 sagetext
 
orangetext
 
blacktext
 
powdertext
 
yellowtext
 
cloudtext
 
whitetext

字体覆盖

如果需要，可以从默认样式重写字体。

这是一个样式被覆盖的段落- serif。
 
这是一个样式被覆盖的段落- Serif bold。
 
这是一个样式被重写的段落- origo。
 
这是一个覆盖了sans样式的头文件。
 
这是一个样式被覆盖的标题- Sans -bold

半径

半径可以应用于div(框)或按钮。简单地添加一个“半径”类圆角。

 
16px半径
 
12px半径
 
8px(正常)半径
 
4px半径
 

舍入

图像可以通过添加一个“圆润”类来四舍五入。它在方形图像上效果最好，否则你最终会得到一个椭圆形，这不是你想要的效果。

字体

.sans

.sans-bold

字体大小和行高

你可以覆盖字体大小，从12px-24px到2px，从24px-64px到4px。此外，你可以将字体设置为72px。这种方法不应该经常使用，只在特殊情况下使用。

这是一个常规段落。

这是正常的12号段落。

这是一个标准的14号段落。

这是一个标准的16号段落。

这是普通的18号段落。

这是普通的20号段落。

这是普通的22号段落。

这是一个标准的24号段落。

这是一个标准的28号段落。

这是一个标准的32号段落。

这是一个标准的36号段落。

这是一个标准的40号段落。

这是正常的44号段落。

这是正常的48号段落。

这是一个标准的52号段落。

这是一个标准的56号段落。

这是普通的60号段落。

这是一个标准的64号段落。

这是普通的72号段落。

这是一个普通的段落。这是一个普通的12号段落。这是一个普通的段落- size-14。这是一个普通的段落- size-16。这是一个普通的段落- size-18。这是一个普通的段落- size-20。这是一个普通的段落- size-22。
 
这是一个普通的段落。这是一个普通的段落- size-28。
 
 
 
这是一个普通的段落- size-72

您还可以以类似的方式调整行之间的默认间距。

这是一个常规段落。

这是一个规则的段落行高lh-12。

这是一个规则的段落行高lh-14。

这是一个规则的段落行高lh-16。

这是一个正规的段落行高lh-18。

这是一个正规的段落，行高lh-20。

这是一个正规的段落行高lh-22。

这是一个规则的段落行高lh-24。

这是一个规则的段落行高lh-32。

这是一个规则的段落行高lh-36。

这是一个规则的段落行高lh-48。

这是一个正规的段落，行高lh-60。

这是一个规则的段落行高lh-72。

这是一个普通的段落。
 
这是一个规则的段落-行高lh-12。
 
这是一个规则的段落-行高lh-14。
 
这是一个规则的段落-行高lh-16。
 
这是一个规则的段落-行高lh-18。
 
这是一个常规段落-行高lh-20。
 
这是一个规则的段落-行高lh-22。
 
这是一个规则的段落-行高lh-24。
 
这是一个规则的段落-行高lh-32。
 
这是一个规则的段落-行高lh-36。
 
这是一个规则的段落-行高lh-48。
 
这是一个规则的段落-行高lh-60。
 
这是一个规则的段落-行高lh-72

定位

要在页面上将元素定位到左侧或右侧，可以添加一个类将该对象“浮动”到右侧或左侧。

由于默认情况下内容向左对齐，当使用'left'类时，后续内容将与该对象对齐。当使用“正确的”类时，内容将围绕该对象。

这个盒子向左浮动。

这段没有向左浮动。
可是，让爱丽丝大为吃惊的是，公爵夫人的声音在说她最喜欢的“教训”这个词的时候就消失了，连她的胳膊也开始颤抖了。爱丽丝抬头一看，王后站在他们面前，交叉着双臂，眉头紧锁，像雷雨一样。

 
  
 
此框向左浮动。
 
 
 
此段落没有向左浮动。可是，说到这里，使爱丽丝大为吃惊的是，公爵夫人的声音消失了……< / p > < / div >

还可以在单行中向左或向右移动内容，而不使用列。由于某些项(如段落)被认为是“块级”元素，因此必须强制内联显示以达到我们想要的效果。

这个盒子向左浮动。

这不是向左浮动的。

这个箱子是正确浮动的。

这是浮动的。

此段落不是浮动的，而是插入到右方框和段落之后。
可是，让爱丽丝大为吃惊的是，公爵夫人的声音在说她最喜欢的“教训”这个词的时候就消失了，连她的胳膊也开始颤抖了。爱丽丝抬头一看，王后站在他们面前，交叉着双臂，眉头紧锁，像雷雨一样。

 
  
 
此框向左浮动。
 
 
 
这不是左浮动。
 
  
 
此框右浮动。
 
 
 
这是右浮动。
 
此段落不是浮动的，它被插入到右边的方框和段落之后。但说到这里，使爱丽丝大为吃惊的是，公爵夫人的声音消失了……< / p > < / div >

清算

为了将内容从浮动元素中移走，你必须“清除”它们:你可以使用'clearleft'， 'clearright'或'clearboth'。

这是一列中的一段。

这是漂浮在左边的盒子里。

这没有被清除或浮动。

这是一个带有clearleft类的方框。

 
这是一列中的一段。
 
 
 
这是在一个左侧浮动的框中。
 
 
 
此字段未被清除或浮动。< / p > < / div >
 
This is in a box with a clearleft class.
 

当右浮动的元素非常大时，使用'clearright'非常有用。

这是一个漂浮的盒子。
可是，让爱丽丝大为吃惊的是，公爵夫人的声音在说她最喜欢的“教训”这个词的时候就消失了，连她的胳膊也开始颤抖了。爱丽丝抬头一看，王后站在他们面前，交叉着双臂，眉头紧锁，像雷雨一样。

这里没有清理干净。

这是一个带有clearright类的方框。

 
这是在一个右浮动的框中。可是，说到这里，使爱丽丝大为吃惊的是，公爵夫人的声音消失了……
 
 
 
不清除。< / p > < / div >
 
This is in a box with a clearright class.
 

这个盒子向左浮动。

这不是向左浮动的。

这个箱子是正确浮动的。

这是浮动的。

它有一个clearboth类，并且被插入到右边的方框和段落之后。
小黄人ipsum坦克yuuu!Ti aamoo !啊啊啊啊屁股追我要香蕉!

 
  
 
此框向左浮动。
 
 
 
这不是左浮动。
 
  
 
此框右浮动。
 
 
 
这是右浮动。
 
有一个clearboth类，插入到右方框和段落之后。
 Minions ipsum tank yuuu!Ti aamoo !啊啊啊啊屁股追我要香蕉!< / p > < / div >

文本的影子

这是一个有用的功能，如果你需要把文本放在图像背景的顶部。

自信地开辟你的道路。

上面的文字很难阅读;一个细微的阴影会有所帮助。有四种类型，每一种都使阴影逐渐变暗:

• textshadow-quarter
• textshadow-half
• textshadow-threequarter
• textshadow-full

四分之一-自信地开辟你的道路。

自信地开辟你的道路。

四分之三——自信地开辟你的道路。

充满信心地开辟你的道路。

使用下面的代码，更改为表示您喜欢的不透明度的类。

 
quarter -自信地开辟你的道路。< / h3 > < / div >