23-Less公共样式

/* // 样式重置 */

/* // 样式重置 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, 
form, fieldset, legend, button, input, textarea, th, td {
    margin:0;
    padding:0;
    line-height: 1;
  }
  /* //  */
  body, button, input, select, textarea {
               font:12px/1.5tahoma, arial, #666666; 
}
  h1, h2, h3, h4, h5, h6{ font-size:100%; }
  address, cite, dfn, em, var { font-style:normal; }
  code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
  small{ font-size:12px; }
  ul, ol { list-style:none; }
  a { text-decoration:none; }
  /* // */
  a:hover { text-decoration:underline; }
  sup { vertical-align:text-top; }
  sub{ vertical-align:text-bottom; }
  legend { color:#000; }
  fieldset, img { border:0; }
  button, input, select, textarea { font-size:100%; }
  table { border-collapse:collapse; border-spacing:0; }
  ul {
    list-style: none;
  }
  a {
    text-decoration: none;
    color: #333;
  }
  /* // 公共样式 */
  html, body {
  /* // 禁止用户复制 */
  -webkit-user-select: none;
  user-select: none;
  }
  .bd {
    border: 1px solid;
  }
  /* // (1) 宽度和高度 */
  .mw-980 {
    max-width: 980px;
    margin: 0 auto;
  }
  .h100pc {
    height: 100%;
  }
  .w100pc {
    width: 100%;
  }
  /* // (2) bfc */
  .ovh {
  overflow: hidden;
 }
  .ova {
  overflow: auto;
  }
  /* // (3) display */
  .inb {
  display: inline-block;
  }
  .dsn {
  display: none;
  }
  /* // (4) 定位 */
  .fixed {
  position: fixed;
  }
  .rel {
  position: relative;
  }
  .abs {
  position: absolute;
  }
  /* // (5) 浮动 */
  .fl {
  float: left;
  }
  .fr {
  float: right;
  }
  .clear:after {
    content: "";
    display: block;
    clear: both;
  }
  /* // (6)加粗 */
  .fw400 {
    font-weight: 400;
  }
  .bold {
    font-weight: bold;
    /* // 900 */
  }
  /* // (7)居中 */
  .tac {
  text-align: center;
  }
  /* // (8) 行高 */
  .lh15 {
  line-height: 1.5;
  }
  /* // (9) 盒模型 */
  .bzb {
    box-sizing: border-box;
  }
  /* // (10) 手形光标 */
  .cp {
    cursor: pointer;
  }body {
  background: #f4f4f4;
  }
  /* // 颜色设置 */
  .orange {
    color: #ff5f16;
  }
  .fff {
    color: #ffffff;
  }
  /* // (11) 背景颜色 */
  .bg-green {
    background: green;
  }
  .bg-gray {
    background: gray;
  }
  .bg-fff {
    background: #ffffff;
  }
  .bg-black {
    background: #222426;
  }
  /* // (12) 字体大小 */
  .f0 {
  font-size: 0;
  }
  /* // 字体相关 */
  @0px: 0px;
  /* // margin-left */
  .font(@n, @i: 12) when (@i =< @n) {
  .f@{i} {
    font-size: @i+@0px;
  }
  .font(@n, (@i + 2));
  /* // +2得到的结果是1,3,5,7 */
  /* // .mg-l(@n, (@i + 2)); */
  }
  .font(36);
  /* // 指定数组
  // @0px: 0px;
  // .ml-loop(@list, @i: 1, @val: extract(@list, @i)) when (length(@list)>=@i) {
  //  .ml@{val} {
  //    margin-left: @val + @0px;
  //  }
  //  .ml-loop(@list, (@i+1));
  // }
 // @marginLeft: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 
14, 15, 16, 17, 18, 19, 20, 24, 30, 40, 48, 50, 75;
  // .ml-loop(@marginLeft); */
  /* // (13) margin-left */
  @0px: 0px;
  /* // margin-left */
  .mg-l(@n, @i: 1) when (@i =< @n) {
  .mg-l-@{i} {
    margin-left: @i+@0px;
  }
  .mg-l(@n, (@i + 1));
  /* // +2得到的结果是1,3,5,7 */
  /* // .mg-l(@n, (@i + 2)); */
  }
  .mg-l(30);
  /* // (14) margin-top */
  .mg-t(@n, @i: 1) when (@i =< @n) {
  .mg-t-@{i} {
    margin-top: @i+@0px;
  }
  .mg-t(@n, (@i + 1));
  /* // +2得到的结果是1,3,5,7
  // .mg-l(@n, (@i + 2)); */
  }
 .mg-t(60);
  .mg-t-90 {
    margin-top: 90px;
  }
  /* // (15) padding-left */
  .pd-l(@n, @i: 1) when (@i =< @n) {
    .pd-l-@{i} {
      padding-left: @i+@0px;
    }
    .pd-l(@n, (@i + 1));
    /* // +2得到的结果是1,3,5,7
    // .mg-l(@n, (@i + 2)); */
  }
  .pd-l(30);
  /* // (16) padding-top */
  .pd-t(@n, @i: 1) when (@i =< @n) {
    .pd-t-@{i} {
      padding-left: @i+@0px;
    }
    .pd-t(@n, (@i + 1));
    /* // +2得到的结果是1,3,5,7
    // .mg-l(@n, (@i + 2)); */
  }
  .pd-t(30);

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,457评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,837评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,696评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,183评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,057评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,105评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,520评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,211评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,482评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2 335