zoukankan      html  css  js  c++  java
  • 关于less的一些方法

    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{

      300px;

      height:300px;

      .pos(r);/*.pos(r或者f)*/

    }

    10.pos-box(@w,@h,@pos) 定位元素 默认值为 500px; height:400px;默认定位方式为 position:absolute; 也可直接传值更改定位;-----未做ie6兼容处理 fixed

    11.pos-box-cc(@w,@h,@pos) 定位居中元素   默认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区域开始显示背景

     

  • 相关阅读:
    SSH框架
    buildroot使用详解
    java下的字符流
    Tomcat的相关配置
    web.xml常用元素配置
    四、Emmet:快速编写HTML,CSS代码的有力工具
    Amazium源码分析:(1)基本介绍
    三、Brackets:一个好用的Web前端开发编辑器
    二、CSS 基本介绍
    一、HTML4背景知识
  • 原文地址:https://www.cnblogs.com/huazai521/p/7202524.html
Copyright © 2011-2022 走看看