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 {
  /* // 禁止用戶復(fù)制 */
  -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) 手形光標(biāo) */
  .cp {
    cursor: pointer;
  }body {
  background: #f4f4f4;
  }
  /* // 顏色設(shè)置 */
  .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;
  }
  /* // 字體相關(guān) */
  @0px: 0px;
  /* // margin-left */
  .font(@n, @i: 12) when (@i =< @n) {
  .f@{i} {
    font-size: @i+@0px;
  }
  .font(@n, (@i + 2));
  /* // +2得到的結(jié)果是1,3,5,7 */
  /* // .mg-l(@n, (@i + 2)); */
  }
  .font(36);
  /* // 指定數(shù)組
  // @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得到的結(jié)果是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得到的結(jié)果是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得到的結(jié)果是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得到的結(jié)果是1,3,5,7
    // .mg-l(@n, (@i + 2)); */
  }
  .pd-t(30);

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末颈娜,一起剝皮案震驚了整個濱河市鸳慈,隨后出現(xiàn)的幾起案子楷掉,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,542評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異畜挨,居然都是意外死亡筒繁,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,822評論 3 394
  • 文/潘曉璐 我一進(jìn)店門巴元,熙熙樓的掌柜王于貴愁眉苦臉地迎上來毡咏,“玉大人,你說我怎么就攤上這事逮刨∨荤裕” “怎么了?”我有些...
    開封第一講書人閱讀 163,912評論 0 354
  • 文/不壞的土叔 我叫張陵修己,是天一觀的道長恢总。 經(jīng)常有香客問我,道長睬愤,這世上最難降的妖魔是什么片仿? 我笑而不...
    開封第一講書人閱讀 58,449評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮尤辱,結(jié)果婚禮上砂豌,老公的妹妹穿的比我還像新娘。我一直安慰自己光督,他們只是感情好阳距,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,500評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著可帽,像睡著了一般。 火紅的嫁衣襯著肌膚如雪窗怒。 梳的紋絲不亂的頭發(fā)上映跟,一...
    開封第一講書人閱讀 51,370評論 1 302
  • 那天,我揣著相機(jī)與錄音扬虚,去河邊找鬼努隙。 笑死,一個胖子當(dāng)著我的面吹牛辜昵,可吹牛的內(nèi)容都是我干的荸镊。 我是一名探鬼主播,決...
    沈念sama閱讀 40,193評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼堪置,長吁一口氣:“原來是場噩夢啊……” “哼躬存!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起舀锨,我...
    開封第一講書人閱讀 39,074評論 0 276
  • 序言:老撾萬榮一對情侶失蹤岭洲,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后坎匿,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體盾剩,經(jīng)...
    沈念sama閱讀 45,505評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡雷激,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,722評論 3 335
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了告私。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片屎暇。...
    茶點(diǎn)故事閱讀 39,841評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖驻粟,靈堂內(nèi)的尸體忽然破棺而出根悼,到底是詐尸還是另有隱情,我是刑警寧澤格嗅,帶...
    沈念sama閱讀 35,569評論 5 345
  • 正文 年R本政府宣布番挺,位于F島的核電站,受9級特大地震影響屯掖,放射性物質(zhì)發(fā)生泄漏玄柏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,168評論 3 328
  • 文/蒙蒙 一贴铜、第九天 我趴在偏房一處隱蔽的房頂上張望粪摘。 院中可真熱鬧,春花似錦绍坝、人聲如沸徘意。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,783評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽椎咧。三九已至,卻和暖如春把介,著一層夾襖步出監(jiān)牢的瞬間勤讽,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,918評論 1 269
  • 我被黑心中介騙來泰國打工拗踢, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留脚牍,地道東北人。 一個月前我還...
    沈念sama閱讀 47,962評論 2 370
  • 正文 我出身青樓巢墅,卻偏偏與公主長得像诸狭,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子君纫,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,781評論 2 354