[郑州|结业弟子]JS-陈占乐|2018年05月18日的日报-技能树.IT修真院

发表于： 2018-05-18 22:48:59

2 560

今天完成的事情：

样式重置

根据关于CSS Reset 那些事这篇文章了解到样式重置的事情，并且对文件做了改动，保留了可能用到的样式。第一次使用还有不完善的地方，后续再改进。

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
footer,
header,
main,
nav,
section {
display: block;
}
audio {
display: inline-block;
vertical-align: baseline;
}
audio:not([controls]) {
display: none;
height: 0;
}
a {
background-color: transparent;
}
a:active,
a:hover {
outline: 0;
}
b,
strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
img {
border: 0;
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0;
}
button {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],
html input[disabled] {
cursor: default;
}
input {
line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
}

设置可能用到的less变量，主要是颜色等和自己对mixin的一些想法

// variable

// color
@bg-blue: rgb(41,189,224);
@bg-darkblue: rgb(105,209,233);
@bg-grey: rgb(240,240,240);
@bg-white: rgb(255,255,255);
@bg-yellow: rgb(251,180,53);
@bg-ligthyellow: rgb(253,215,147);
//font-color
@font-grey: rgb(154,154,154);
@font-white: rgb(255,255,255);
@font-yellow: rgb(251,180,53);
@font-black: rgb(120,120,120);

@img-url: "../img";

// mixins
.z-index(@z-index) {z-index: @z-index;}
.clr(@color) {color: @color;}
.bgc(@color) {background-color: @color;}

.bg(@img, @wdth-pstion:center, @hgt-pstion:center,@wdth, @hgt ) {
background: url("@{img-url}/@img") no-repeat @wdth-pstion @hgt-pstion;
background-size: @wdth @hgt;
}

.fixed() {
position: fixed;
}
.mixin(@-) {.fixed();}
.mixin(top) {
top: 0;
left: 0;
}
.mixin(bottom) {
bottom: 0;
left: 0;
}

.clearfix() {
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
}