模仿对象----https://rscard.px-lab.com/startuper/
自己写的简历预览----https://mrf3247.github.io/cv/rscard.html
心得记录
1.在制作.card的div时,使用max-width而不用width,是为了这个card的适应性更好.
2.在一个小按钮或者气泡如这里的HELLO中,尽量使用padding来做到水平垂直居中,这样的代码可调适性更强,bug也少,还省语句.写完记得加上line-hight跟计算的盒模型height一样,防止bug出现.为什么我也不清楚,看以后能不能看懂吧.
3.要做到那种有黑色半透明遮罩效果的背景图,需要新建一个div,给这个div一个背景图片,之后在div中再新建一个一样大小的div,使用rgba属性加上蒙版即可.
**CSS**
.banner{
height:515px;
background-image: url(https://rscard.px-lab.com/startuper/wp-content/uploads/sites/2/2016/02/rs-cover-2-2-1-1.jpg);
background-position:center center;
background-size:cover;
}
.banner .mask{
height:515px;
background-color:rgba(0, 0, 0, 0.8);
}
**HTML**
<div class="banner">
<div class="mask"></div>
<!-- 设置一个有黑色遮罩的banner,目标图片设置为background-image,然后在这个banner里新增一个一样大小的div设置rgba即可. -->
