/* // 样式重置 */
/* // 样式重置 */
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);