1.登录组件头部布局
1.1 头部图像在login_box 这个div元素里面绘制
1.2 刷新页面,头像就已经有了。但是样式还比较不美观
1.3 接下来,设置头像相关样式。在.login_box里面,可以放一个语法嵌套。首先给avatar_box盒子设置一个宽高 ,然后让里面img 图片的宽度等于父盒子的宽高。宽高等于100%,这样就填满了父盒子
1.4 给图片设计一个边框
1.5 可以看到,有这个明显的边框
1.6 把它改成圆角,加上圆角属性
1.7 但是圆框比图片要小一些,所以接下来,也给图片加上一个圆角的效果
1.8 图片加上圆角
1.9 图片都已经变成圆角了
10.接下来,为了让图片更加好看一点,可以让边框和图片之间有一个间距。
2.0 这样图片和边框之间就有了间隙
2.1 为了更加好看,给图片背景加一个背景颜色
2.2 这样图片就好看一些了
2.3 再给边框加一个阴影
2.4 接下来,把头像位置摆正。我们是不是应该把avatar_box 这个盒子,向右以及向上移动一些。
向右移动,需要减去avatar_box 盒子一半的距离再减去自身的一半距离。向上就需要移动
avatar_box高度的一半
2.5 接下来,写样式。首先来一个绝对定位
2.6 效果
2.7 紧接着,让它往后移动图片这个盒子自身的-50%就可以了,就可以使用位移了。这个就往后撤了50%的距离。
2.8 位移的的效果,还需要向上移动一点距离。translate 第一个参数是横向距离,第二个参数是纵向距离。
2.9 只需要在原来的translate上面再加一个纵向-50% 。
3.0 效果出来了。但是上面的颜色有点难受。再给它的背景加一个颜色就好了
3.1 给盒子加背景颜色
3.2 最终效果
以上出自于:【黑马程序员】前端开发之Vue项目实战_Element-UI【配套源码+笔记】_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1x64y1S7S7?p=1