经过这两天画前端布局而写的经验

页面总览

当给出页面需求任务的时候，需要能做到看到页面就把页面先把整体规划好是什么样的布局：
像这个页面使用Container来布局就是一个很常见的Header+Main 的布局

所以一开始就先把题目部分作为Header 给画好，后面Main主体后面再细化分

细化分

我的步骤是先把main分为三个部分

在mian里面使用 el-col 属性来布置左右两边的栅格，总span是24 ，那一边就是12

再使用div来把两个框画好，在开始建设的时候，可以先用

border:1px solid #F00

属性来把div的边框很直观的显现出来
然后再来细化分left中的个人信息框和余额框，我们看到这两个框是水平往下的布局，就用 flex

display: flex

属性来设置布局为水平，这个属性超级超级好用，想把框放在哪，怎么放，两个框怎么对齐都能设置！

最后就是down的列表了，在el-col 设置为24的情况下就是占全部的一行栅格，再使用div一样先把边框设置好，再在里面使用Form 表单
列表里的数据为数据库的动态数据

效果图

效果非常好！！

总结

看到页面需求先把总体的Container大布局先确定好，然后把主体里面的小布局慢慢细分每个内容放入div，div的大小和布局先用border和flex来调整，再次夸赞一下flex是真好用呀！最后再div里面写入相对应的样式内容，将数据动态绑定上就好啦！

element 前端布局理解经验及好用的属性相关推荐

6轮字节前端校招面试经验分享
大家好,我是若川.最近金三银四,今天分享一篇字节前端校招面试经验的轻松好文,相信看完会有所收获.也欢迎点击下方卡片关注或者星标我的公众号若川视野因为我错过了2020年的秋招(ps: 那时候连数据结构 ...
flex 左右布局_面试必考点：前端布局知识
前端的页面布局知识是初中级前端工程师必须掌握的内容,在面试的时候无论大厂小厂都有很大概率被提问到,作为与页面最紧密的前端开发者,前端布局知识是必不可少的一环. 前言这里所要介绍的布局知识主要是在解决 ...
flex布局怎么设置子元素大小_Web前端（三）：前端布局
前端布局对前端开发而言是必不可少的环节之一.我所理解的前端布局可以分成两个大类,第一类是元素层面的布局,就是像absolute布局.flex布局等等,都是描述元素在页面上以何种形式呈现,即局部的布局: ...
web前端布局篇（切图）
web前端布局篇(切图) 这里的切图不是指ps里面的切图,而是指web前端工程师将设计图转化为静态页面的过程. 在布局的时候,我们通常会以设计图为蓝本,然后将设计图拆分,变成一个一个的HTML标签,搭 ...
Web前端布局实战：三国杀页面布局（上）
Web前端布局实战:三国杀页面布局(上) 互联网进入web 2.0时代,由单一的文字和图片组成的静态网页已经不能满足用户的需求,用户需要更好的体验.在web 2.0时代,网页有静态网页和动态网页.所谓 ...
java前端项目经验_web前端页面项目经验总结
项目时间:2016年4月5日--4月9日项目名称:阿七果子园web前端页面项目内容: 1.HTML5+CSS+JavaScript(banner+timer)+JQuery(small_banne ...
从上往下流式布局_教大家怎么写前端布局
一.静态布局(Static Layout) 1. 布局概念最传统.原始的Web布局设计.网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow: ...
前端工程师面试经验导图
前端工程师面试经验导图面试前端/后端(全栈)工程师,首先你需要知道面试官需要的是什么样的人才,面试官要考察的的是哪些知识点,好了,废话不多说直接上图. 每天一句中文式外语俄语 1.- Здравс ...
bootstrap 页面垂直居中_前端布局之——水平垂直居中
其他平台文章地址 github: 前端布局之--水平垂直居中 · Issue #3 · yaodebian/bloggithub.com csdn: https://blog.csdn.net/Ya ...

element 前端布局理解经验及好用的属性

页面总览

细化分

效果图

总结

element 前端布局理解经验及好用的属性相关推荐

最新文章

热门文章