Vue3+Element-Plus 登录组件头部布局实现 七

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