模仿在线简历网站写一个页面(初级)

模仿对象----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即可. -->