其它

其它样式功能。

Fieldset

实列:fieldset演示
<fieldset class="vus-fieldset">
   <legend class="legend">实列:</legend>
   fieldset演示
</fieldset>

Demo

Demo演示
<div class="vus-demo">
   Demo演示
</div>

Figure

Vusui 是基于 HTML、CSS、JavaScript 的,它简单、灵活,使得 Web 开发更加快捷。它是一个CSS/HTML框架,是由动态CSS语言Sass写成。

Vusui v2.x
作者:洋洋,时间:2018 年 6 月

<figure class="vus-figure">
   <img src="../img/demo-img-300x300.jpg">
</figure>

Opacity 透明度

使用.vus-opacity-(0~1)类,设置透明度。

<div class="vus-opacity-0"></div>
<div class="vus-opacity-01"></div>
<div class="vus-opacity-02"></div>
<div class="vus-opacity-03"></div>
<div class="vus-opacity-04"></div>
<div class="vus-opacity-05"></div>
<div class="vus-opacity-06"></div>
<div class="vus-opacity-07"></div>
<div class="vus-opacity-08"></div>
<div class="vus-opacity-09"></div>
<div class="vus-opacity-1"></div>

Line-height 行高

使用.vus-lh-(1~2)类,行与行的间距。

vus-lh-1
关关雎鸠,在河之洲。窈窕淑女,君子好逑。
参差荇菜,左右流之。窈窕淑女,寤寐求之。
求之不得,寤寐思服。悠哉悠哉,辗转反侧。
参差荇菜,左右采之。窈窕淑女,琴瑟友之。
参差荇菜,左右芼之。窈窕淑女,钟鼓乐之。
vus-lh-1-1
关关雎鸠,在河之洲。窈窕淑女,君子好逑。
参差荇菜,左右流之。窈窕淑女,寤寐求之。
求之不得,寤寐思服。悠哉悠哉,辗转反侧。
参差荇菜,左右采之。窈窕淑女,琴瑟友之。
参差荇菜,左右芼之。窈窕淑女,钟鼓乐之。
vus-lh-1-2
关关雎鸠,在河之洲。窈窕淑女,君子好逑。
参差荇菜,左右流之。窈窕淑女,寤寐求之。
求之不得,寤寐思服。悠哉悠哉,辗转反侧。
参差荇菜,左右采之。窈窕淑女,琴瑟友之。
参差荇菜,左右芼之。窈窕淑女,钟鼓乐之。
vus-lh-1-9
关关雎鸠,在河之洲。窈窕淑女,君子好逑。
参差荇菜,左右流之。窈窕淑女,寤寐求之。
求之不得,寤寐思服。悠哉悠哉,辗转反侧。
参差荇菜,左右采之。窈窕淑女,琴瑟友之。
参差荇菜,左右芼之。窈窕淑女,钟鼓乐之。
vus-lh-2
关关雎鸠,在河之洲。窈窕淑女,君子好逑。
参差荇菜,左右流之。窈窕淑女,寤寐求之。
求之不得,寤寐思服。悠哉悠哉,辗转反侧。
参差荇菜,左右采之。窈窕淑女,琴瑟友之。
参差荇菜,左右芼之。窈窕淑女,钟鼓乐之。
<div class="vus-lh-1"></div>
<div class="vus-lh-1-1"></div>
<div class="vus-lh-1-2"></div>
<div class="vus-lh-1-3"></div>
<div class="vus-lh-1-4"></div>
<div class="vus-lh-1-5"></div>
<div class="vus-lh-1-6"></div>
<div class="vus-lh-1-7"></div>
<div class="vus-lh-1-8"></div>
<div class="vus-lh-1-9"></div>
<div class="vus-lh-2"></div>

鼠标状态

  • 改变鼠标指针状态。
  • .vus-cursor-default:默认。
  • .vus-cursor-pointer:指针。
  • .vus-cursor-disabled:禁用。
  • .vus-cursor-help:帮助。
default
pointer
disabled
help
<div class="vus-cursor-default">default</div>
<div class="vus-cursor-pointer">pointer</div>
<div class="vus-cursor-disabled">disabled</div>
<div class="vus-cursor-help">help</div>

Utils

  • 实用工具。
  • .vus-fluid = width: 100%; display: block; 块级。
  • .vus-mx-auto = margin: 0 auto; 居中。
  • .vus-fl = float: left;
  • .vus-fr = float: right;
  • .vus-fn = float: none;
  • .vus-show = display: block;
  • .vus-hide = display: none;
  • .vus-hidden = overflow: hidden;
  • .vus-visible = overflow: visible;
  • .vus-inline = display: inline;
  • .vus-inline-block = display: inline-block;
  • .vus-align-top = vertical-align: top;
  • .vus-align-middle = vertical-align: middle;
  • .vus-align-bottom = vertical-align: bottom;
  • .vus-align-baseline = vertical-align: baseline;
  • .vus-fl-*.vus-fr-*.vus-show-*.vus-hide-*.vus-fluid-*:预设了四个响应尺寸(xs/sm/md/lg)。
vus-fl
vus-fr
vus-mx-auto
<div class="vus-fl">vus-fl</div>
<div class="vus-fr">vus-fr</div>
<div class="vus-mx-auto">vus-mx-auto</div>

Position

  • position 定位。
  • .vus-relative:相对位置。
  • .vus-fixed:固定位置。
  • .vus-absolute:绝对位置。
  • .vus-position-top = top: 0px;
  • .vus-position-right = right: 0px;
  • .vus-position-bottom = bottom: 0px;
  • .vus-position-left = left: 0px;
  • .vus-zindex--1 = z-index: -1;
  • .vus-zindex-0 = z-index: 0;
  • .vus-zindex-1 = z-index: 1;
  • .vus-zindex-2 = z-index: 2;
  • .vus-zindex-3 = z-index: 3;
  • .vus-zindex-4 = z-index: 4;
  • .vus-zindex-5 = z-index: 5;
暂无演示。
<div class="vus-relative">vus-relative</div>
<div class="vus-fixed">vus-fixed</div>
<div class="vus-absolute">vus-absolute</div>
<div class="vus-position-top">vus-position-top</div>
<div class="vus-position-right">vus-position-right</div>
<div class="vus-position-bottom">vus-position-bottom</div>
<div class="vus-position-left">vus-position-left</div>
<div class="vus-zindex--1">vus-zindex--1</div>
<div class="vus-zindex-0">vus-zindex-0</div>
<div class="vus-zindex-1">vus-zindex-1</div>
<div class="vus-zindex-2">vus-zindex-2</div>
<div class="vus-zindex-3">vus-zindex-3</div>
<div class="vus-zindex-4">vus-zindex-4</div>
<div class="vus-zindex-5">vus-zindex-5</div>

高度与宽度

  • 设置元素宽度和高度。
  • .vus-(w/h)-(5/10/15...90/95/100):宽度(width)或高度(height)5%至100%(注:每隔5个数为一个样式。如:vus-w-5、vus-w-10...vus-h-50、vus-h-55...以此类推)
  • .vus-(w/h)-auto:宽度或高度auto。
  • .vus-(w/h)-min-100:min-width: 100% 和 min-height: 100%。
  • .vus-(w/h)-max-100:max-width: 100% 和 max-height: 100%。
vus-w-30 vus-h-20
vus-w-50 vus-h-20
vus-w-20 vus-h-20
vus-w-15 vus-h-30
vus-w-15 vus-h-50
vus-w-30 vus-h-80
vus-w-20 vus-h-25
vus-w-15 vus-h-45
vus-w-5 vus-h-75
<div class="vus-w-15">vus-w-15</div>
<div class="vus-w-30">vus-w-30</div>
<div class="vus-w-auto">vus-w-auto</div>
<div class="vus-w-min-100">vus-w-min-100</div>
<div class="vus-w-max-100">vus-w-max-100</div>
<div class="vus-h-65">vus-h-65</div>
<div class="vus-h-90">vus-h-90</div>
<div class="vus-h-auto">vus-h-auto</div>
<div class="vus-h-min-100">vus-h-min-100</div>
<div class="vus-h-max-100">vus-h-max-100</div>

阴影

  1. 使用.vus-shadow-(2/4/6/8/10/12)类设置元素阴影效果。(注:每隔2个数为一个样式。)
  2. 使用.vus-shadow-2-(2/4/6/8/10/12)类设置元素阴影效果。(注:每隔2个数为一个样式。)
<div class="vus-shadow-2"></div>
<div class="vus-shadow-4"></div>
<div class="vus-shadow-6"></div>
<div class="vus-shadow-8"></div>
<div class="vus-shadow-10"></div>
<div class="vus-shadow-12"></div>
<div class="vus-shadow-2-2"></div>
<div class="vus-shadow-2-4"></div>
<div class="vus-shadow-2-6"></div>
<div class="vus-shadow-2-8"></div>
<div class="vus-shadow-2-10"></div>
<div class="vus-shadow-2-12"></div>

Transition 过渡动画

  • 使用.vus-anim-all类作为Transition动画样式,默认ease,速度:0.4s。
  • .fast:快速动画,速度:0.25s。
  • .slow:缓慢动画,速度:1s。
  • .linear:linear 规定以相同速度开始至结束的过渡效果。
  • .ease-in:ease-in 规定以慢速开始的过渡效果。
  • .ease-out:ease-out 规定以慢速结束的过渡效果。
  • .ease-in-out:ease-in-out 规定以慢速开始和结束的过渡效果。
  • 默认
  • fast
  • slow
  • linear
  • ease-in
  • ease-out
  • ease-in-out
<div class="vus-anim-all">默认</div>
<div class="vus-anim-all fast">fast</div>
<div class="vus-anim-all slow">slow</div>
<div class="vus-anim-all linear">linear</div>
<div class="vus-anim-all ease-in">ease-in</div>
<div class="vus-anim-all ease-out">ease-out</div>
<div class="vus-anim-all ease-in-out">ease-in-out</div>