前端开发小技巧

来源：互联网发布：java中类与对象的关系编辑：程序博客网时间：2024/05/16 05:58

布局

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: 0auto;
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: #444url(../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可以同乱码填充

0 0