前端开发小技巧

布局

1.一般分为header、content、footer等内容（页头、正文、页脚）

2.使用reset.css初识化整个布局，让整个布局标准化，地址：https://github.com/necolas/normalize.css

标签及属性

display：inline-block 使li标签里的元素变成横向排列

text-decoration:none list-style:node  去除默认的样式

navbar

设置链接的热区：

display: inline-block;

height: inherit;

高度继承父元素，并且变为行内元素，这样点击不必要对准字母了

div居中

text-align: center;

margin: 0 auto;

position: relative;

top: 160px;

前两个使文字居中、div块居中，把位置设置成relative才能设置top属性

使一个模块中的两个div左右分配

.article-preview > div{

float: left;

}

.article-preview:after{

content: "";

display: block;

clear: both;

}

第一个>的作用是设置子标签（不包括子标签的标签）的样式

第二个是清除浮动的作用

模块背景颜色差异化

.article-preview:nth-child(odd){

background-color: rgba( 255 , 255, 255, 0.05);

}

奇数的背景会加上一层蒙版

背景图片固定效果

.main-wrapper{

background: #444 url( ../img/banner.jpg);

background-attachment: fixed;

background-repeat: no-repeat;

background-size: cover;

background-position: center;

}

背景和字体冲突显得模糊时

header{

background: rgba( 0, 0, 0, 0.4);

}

vscode使用技巧

1.在空白处输入 lorem可以同乱码填充