Appcan Ui中一些常用css代码帮助查询_Lib

Appcan Ui中一些常用css代码帮助查询

发布时间：2016-06-28

.uc 代表   radius

.uc-tl 左上角圆角 radius 0.6em t:top l:left

.uc-tr 右上角圆角 radius 0.6em t:top l:left

.uc-bl 左下角圆角 radius 0.6em b:bottom l:left

.uc-br 右下角圆角 radius 0.6em b:bottom r:right

.uc-t 上边两个角都是圆角 t:top
         css代码:
         border-top-left-radius:0.6em
          border-top-right-radius:0.6em

.uc-b 下边两个角都是圆角 b:bottom
   css代码:
      border-bottom-left-radius: .6em;
      border-bottom-right-radius: .6em

.uc-r 右边两个圆角为0.6em

border-top-right-radius:0.6em;

border-bottom-right-radius:0.6em;

.uc-l 左边两个圆角0.6em;

.uc-a 圆角的一个元素

.uc-n 不是圆角恢复默认

其实这些属性并不是那么重要，理解这里的意思后，可以自己使用css代码去写

不需要这么麻烦的去二次翻译。当然如果可以记住，这样会更好。

Css中记住一个属性吧，那就是背景填充，这样写,会根据padding的大小去自动的规划其背景色。

background-clip: padding-box

.us 就是指：box-shadon

box-shadon:右下阴影的模糊度颜色

可以为负数，这就向左

.us 黑色阴影指div或某一个元素的阴影部分

.us1 灰色阴影

.us-i 内阴影黑色

.uts 文字阴影

.ufl 左浮动

.ufr 右浮动

.tx-c 文字居中

.tx-l 文字左对齐 text-align:left;

.tx-r 文字右对齐

这一组是指文字的大小

.ulev2 1.5em;

.ulev1 1.2em;

.ulev0 font-size:1.0em;

.ulev-1 0.8125em;

.ulev-2 0.625em;

.ulev-3

.ulev-4 0.75em

知道即可，到时候根据项目去调整我们的字体大小。

margin-right:0.4em;

.umar-r

.umar-l

.umar-b

.umar-t

边框上右下左

.uba 边框

.ubt

.ubr

.ubb

.ubl

绝对定位

.uabs

隐藏

.uhide

.ulim 指定了最大的宽度不能超过5em

.uinn

.uinn1

.umw1 最小宽度

.umh1 最小高度

以下是项目中的源代码，如果哪里不清楚，可以查看。

.uc-tl 左上角 圆角 radius 0.6em t:top l:left

.uc-tr 右上角 圆角 radius 0.6em t:top l:left

.uc-bl 左下角 圆角 radius 0.6em b:bottom l:left

.uc-br 右下角 圆角 radius 0.6em b:bottom r:right

.uc-t 上边两个角都是圆角 t:top   
   css代码:
   border-top-left-radius:0.6em
   border-top-right-radius:0.6em

.uc-b 下边两个角都是圆角 b:bottom
   css代码:
      border-bottom-left-radius: .6em;    
      border-bottom-right-radius: .6em
 
.uc-r {
    -webkit-border-top-right-radius: .6em;
    border-top-right-radius: .6em;
    -webkit-border-bottom-right-radius: .6em;
    border-bottom-right-radius: .6em
}

.uc-l {
    -webkit-border-top-left-radius: .6em;
    border-top-left-radius: .6em;
    -webkit-border-bottom-left-radius: .6em;
    border-bottom-left-radius: .6em
}

.uc-a {
    -webkit-border-radius: .6em;
    border-radius: .6em
}

.uc-n {
    -webkit-border-radius: 0;
    border-radius: 0
}

.uc-tl1 {
    -webkit-border-top-left-radius: 0.3em;
    border-top-left-radius: 0.3em
}

.uc-tr1 {
    -webkit-border-top-right-radius: 0.3em;
    border-top-right-radius: 0.3em
}

.uc-bl1 {
    -webkit-border-bottom-left-radius: 0.3em;
    border-bottom-left-radius: 0.3em
}

.uc-br1 {
    -webkit-border-bottom-right-radius: 0.3em;
    border-bottom-right-radius: 0.3em
}

.uc-t1 {
    -webkit-border-top-left-radius: 0.3em;
    border-top-left-radius: 0.3em;
    -webkit-border-top-right-radius: 0.3em;
    border-top-right-radius: 0.3em
}

.uc-b1 {
    -webkit-border-bottom-left-radius: 0.3em;
    border-bottom-left-radius: 0.3em;
    -webkit-border-bottom-right-radius: 0.3em;
    border-bottom-right-radius: 0.3em
}

.uc-r1 {
    -webkit-border-top-right-radius: 0.3em;
    border-top-right-radius: 0.3em;
    -webkit-border-bottom-right-radius: 0.3em;
    border-bottom-right-radius: 0.3em
}

.uc-l1 {
    -webkit-border-top-left-radius: 0.3em;
    border-top-left-radius: 0.3em;
    -webkit-border-bottom-left-radius: 0.3em;
    border-bottom-left-radius: 0.3em
}

.uc-a1 {
    -webkit-border-radius: 0.3em;
    border-radius: 0.3em
}
.uc-a3 {
    -webkit-border-radius: 0.4em;
    border-radius: 0.4em
}
.uc-a2 {
    -webkit-border-radius: 1.2em;
    border-radius: 1.2em
}

.uc-tl, .uc-tr, .uc-bl, .uc-br, .uc-t, .uc-b, .uc-r, .uc-l, .uc-a, 
.uc-n, .uc-tl1, .uc-tr1, .uc-bl1, .uc-br1, 
.uc-t1, .uc-b1, .uc-r1, .uc-l1, .uc-a1, .uc-a2,.uc-a3 {
    -webkit-background-clip: padding-box;
    background-clip: padding-box
}

.us {
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3)
}
.us1 {
    -webkit-box-shadow: 0 1px 4px rgba(120, 120, 120, .3);
    box-shadow: 0 1px 4px rgba(120, 120, 120, .3)
}
.us-i {
    -webkit-box-shadow: inset 0px 2px 3px rgba(0, 0, 0, .4);
    box-shadow: inset 0px 2px 3px rgba(0, 0, 0, .4)
}

.uts {
    text-shadow: 0px 2px 2px #000;
}

.um, .um body {
    height: 100%;
    padding: 0px;
    margin: 0px;
    font-family: "Helvetica Neue", Helvetica;
}

.um-vp {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-user-select: none
}

.um-vp .up {
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    max-height: 100%;
    position: absolute;
    border: 0
}

.uh, .uf {
    display: block;
    width: 100%;
    font-size: 1em;
}

.up .uh, .up .uf, .pos_re {
    position: relative
}

.uh .ut, .uf .ut {
    padding: .72em 1em .72em;
    margin: 0;
}

.ufl {
    float: left !important;
}
.ufr {
    float: right !important;
}

.ulev2 {
    font-size: 1.5em !important;
}

.ulev1 {
    font-size: 1.2em !important;
}

.ulev0 {
    font-size: 1.0em !important;
}

.ulev-1 {
    font-size: 0.8125em !important;
}

.ulev-2 {
    font-size: 0.625em !important;
}
.ulev-3 {
    font-size: 1.0625em !important;
}
.ulev-4 {
    font-size: 0.75em !important;
}
.ulim {
    max-width: 5em;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.uinl {
    display: inline-block;
    position: relative;
}

.uinn {
    padding: 0.5em;
    margin: 0;
}
.uinn1 {
    padding: 0 0.5em;
    margin: 0;
}
.uinn2 {
    padding: 0.5em 1em;
    margin: 0;
}
.uinn3 {
    padding: 0.2em;
    margin: 0;
}
.uinn4 {
    padding: 0 0.2em;
    margin: 0;
}
.uinn5 {
    padding: 0.75em 0.5em;
    margin: 0;
}
.uinn7 {
    padding: 0.66em 0.375em;
    margin: 0;
}
.umh1 {
    min-height: 1em;
}

.umh2 {
    min-height: 1.2em;
}

.umh3 {
    min-height: 1.5em;
}

.umh4 {
    min-height: 2em;
}
.umh5 {
    min-height: 3em;
}
.umh6 {
    min-height: 4em;
}
.umh7 {
    min-height: 1.8em;
}
.umw1 {
    min-width: 1em;
}
.umw1-5 {
    min-width: 1.5em;
}

.umw2 {
    min-width: 2em;
}

.umw3 {
    min-width: 3em;
}

.umw4 {
    min-width: 4em;
}

.tx-l {
    text-align: left;
}
.tx-r {
    text-align: right;
}
.tx-c {
    text-align: center;
}

.ut-s {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap !important;
    outline: 0 !important
}

.ut-m {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: normal !important;
    outline: 0 !important
}

.uba {
    border: 1px solid;
}
.uba1 {
    border: 2px solid;
}
.uba2 {
    border: 3px solid;
}

.ubt {
    border-top: 1px solid;
}
.ubb {
    border-bottom: 1px solid;
}

.ubl {
    border-left: 1px solid;
}

.ubr {
    border-right: 1px solid;
}

.uhide {
    display: none !important;
}

.umar-b {
    margin-bottom: 0.4em;
}
.umar-t {
    margin-top: 0.4em;
}
.umar-l {
    margin-left: 0.4em;
}
.umar-r {
    margin-right: 0.4em;
}
.umar-a {
    margin: 0.4em;
}

.uof {
    overflow: hidden;
}
.uof-x {
    overflow-x: hidden;
}
.uof-y {
    overflow-y: hidden;
}

.uabs {
    position: absolute;
    left: 0;
    top: 0;
}

.uabs-r {
    position: absolute;
    right: 0;
    top: 0;
}

.utra {
    -webkit-transition: all 300ms ease-in 100ms
}
.line1 {
    -webkit-line-clamp: 1;
}
.line2 {
    -webkit-line-clamp: 2;
}

.line3 {
    -webkit-line-clamp: 3;
}

.ani-act {
    transform: scale(0.95,0.97);
    -webkit-transform: scale(0.95,0.97);
    -webkit-transition-duration: 300ms;
    opacity: .7;
}

.uh_ios7 .uh {
    padding: 1em 0 0;
}

/**以上代码可以查询**/

作为程序员一定要保持良好的睡眠，才能好编程