1.fl() 左浮動,默認值為左浮動,可以添加右浮動。傳入left or right 。
2.fr() 右浮動,默認值為右浮動,可以添加右浮動。傳入left or right 。
3.chearfix() 清除浮動 ,對margin-top 影響父級的不兼容處理。
4.bc() 普通劇中,無默認值,其生成 margin-left: auto 和 margin-right:auto;
5.bc-d() 普通劇中 帶默認寬度 默認為500px,也可傳值 ,也可傳入變量。
6.rel() 相對定位。
7 .abs() 絕對定位。
8.fix() 固定定位。------以上三種都可穿值 包括 relative, absolute, fixed。
9.pos() 綜合方法 在選擇其中寫變量名稱並且傳入r/a/f都可。
使用方法:
div{
width:300px;
height:300px;
.pos(r);/*.pos(r或者f)*/
}
10.pos-box(@w,@h,@pos) 定位元素 默認值為 width:500px; height:400px;默認定位方式為 position:absolute; 也可直接傳值更改定位;-----未做ie6兼容處理 fixed
11.pos-box-cc(@w,@h,@pos) 定位居中元素 默認width:600px;height:360px;position:absolute; 也可直接傳值改變定位; -----已做水平和垂直居中處理,fixed 未做ie6兼容處理
12.wh() /.w-be-h() 寬高相等 inline元素 需要給.d-b()/ .d-ib()
13.z-index(@index:1) z-index 默認值為1
14.h100() 高度 100% 直接調用就行
15.txt-ver(@h)/.l-h(@h) 文字在某個容器垂直居中 -----必須傳入 @h//高度值
16.d-b()/.db() display:block;
17.d-i()/.di() display:inline;
18.d-ib()/.dib() display:inline-block;
19.d-ib7()/.dib7() display:inline-block ------添加了對ie6、7塊級元素不支持inline-block轉換的兼容
20.d-t()/.dt() display:table;
21.d-n()/.dn() display:none;
22.font-fm() font-famaily:"Microsoft Yahei","微軟雅黑"
23.font-fs() font-famaily:"SimSun","宋體";
23.font-apple() 'punctuation','PingFangSC-Regular'
24.font-all() 'punctuation','PingFangSC-Regular','Microsoft YaHei','微軟雅黑'
25.font-fa() font-family:'Arial'
26.font-fv() font-family:Verdana;
27.font-w700()/.font-wb(); 文字加粗
28.font-w400/.font-wn() 文字不加粗 /普通文字
29.font-s() font-size 字體大小 默認為12px ,可傳入任意數+px
30.font-s0() ~font-s100() font-size 文字大小 可以從0~100的任意數值
31.text-n() text-decoration 文字下划線 默認值為none, 可傳入值
32.tn() text-decoration:none;
33.tl()/.text-l() text-align:left;
34.tr()/text-r() text-align:right;
35.tc()/text-c() text-align:center
36.opa() 透明度 默認為80 1~100的數字
37.rgba() css3背景透明,可用於普通元素, 已經對低版本瀏覽器兼容 ,全兼容(r,g,b,a)括號必須全部穿參數
38.bg(@url,@x:0,@y:0) background:填充背景,只需要傳入url就行。------url必須用括號闊起來 建議用""號;
39.bg-m(@url,@x:0,@y:0,@repeat:no-repeat) background 填充背景 可傳入多參數
40.bgi(@url) background-image 填充背景 只需要傳入@url就行 url必須用括號括起來 推薦用“”;
41.bgp(@x,@y) background-position:0 0;需要傳入x,y 默認為0;
42.bgr-r() background-repeat:repeat;
43.bgr-x() background-repeat:repeat-x;
44.bgr-y() background-repeat:repeat-y;
45.bgr-no() background-repeat:no-repeat;
46.bga-fix() background-attachment:fixed; 背景固定
47.ellipsis-vasic() 文字省略號 需要配合寬度使用
48.ellipsis() 文字省略好 可傳入寬度 ----內部使用百分比,例如.ellipsis(7)出來的結果就是width:92%
49.triangle() css2的三角 已做ie6的兼容
i{
@fx:top;
.triangle(@fx);
}
50.triangle-compatible() 為三角添加一些附加屬性,便於批量三角添加
i{
@fx:top;
.triangle(@fx);
}
60.triangle-t(@w:5px,@color:#ccc)--上
61.triangle-r(@w:5px,@color:#ccc)--右
62.triangle-b(@w:5px,@color:#ccc)-下
63.trigngle-i(@w:5px,@color:#ccc)-左 css2的三角 默認大小為5,默認顏色為#ccc
64.border-radius() 圓角,默認圓角為5px,可在()內穿參數
65.border-top-left-radius()-上左
.border-top-right-radius()-上右
.border-bottom-right-radius()-下右
.border-bottom-left-radius()-下左
66.box-shadow() 盒子陰影 默認為0px ,0px , 5px , #ccc
67.text-shadow() 文字陰影 默認為 0 0 2 #333
68.linear-gradient() 漸變效果 可傳入多參數
69.css3move() css3動畫已將添加前綴 可傳參 默認參數all ease .3s
70.transition() css3動畫添加前綴 必須傳參
80.opacity() 透明度 默認為80,兼容ie低版本
81.background-clip()背景的繪制區域
border-box:從border區域向外裁剪背景
padding-box:從padding區域向外裁剪背景
concent-box: 從content區域向外裁剪背景
no-clip:從border區域向外裁剪背景
82.background-origin()背景的繪制區域
border從border區域開始顯示背景
padding從padding區域開始顯示背景
content從centent區域開始顯示背景