作者简介
作者名：1_bit
简介：CSDN博客专家，2020年博客之星TOP5，蓝桥签约作者。15-16年曾在网上直播，带领一批程序小白走上程序员之路。欢迎各位小白加我咨询我相关信息，迷茫的你会找到答案。系列教程将会在流量降低时转为付费位置，流量多时将不会，各位抓紧时间学习哟~
什么是低代码么是 IVX
??小媛：bit 哥，我学了很多东西，例如 php、java、html之类，可是都做不了一个应用怎么办/p>
??1_bit：你是指什么应用呢/p>
??小媛：网站、小程序、小游戏之类都不会做。 ??
??1_bit：那是因为你需要多锻炼呢，这样才能有一定的经验去完成一些项目的开发。
??小媛：啊！感觉时间好长啊，代码太难了。 ??
??1_bit：其实不难的，但是需要有一个锻炼过程积累经验。
??小媛：那有没有好一点的方式呢想快点学会制作这些东西。
??1_bit：有呀，现在的低代码就可以完成；低代码技术随着不断迭代，越来越好使，可能之后会是一种趋势，想要学一下吗/p>
??小媛：啥是低代码/p>
??1_bit：就是用少量代码，或者是不用代码去完成一个项目的制作。
??小媛：哇！这么厉害！紧教我，我想试试。 ??
??1_bit：哈哈哈，正好最近接触一个好东西，叫做 IVX，你可以通过画图制作界面，并且可以一键部署，完成网站、小程序、小游戏之类的应用哟。
??小媛：哇！这么厉害那什么是部署呢/p>
??1_bit：因为你做好一个应用后，需要给大家玩，就需要放到服务器上，对于新手来说可能就很麻烦，你通过 IVX 进行制作，就少去了这些步骤，而且又简单，完全省去了代码编写呢。我们今天就初步学一下，使用 IVX 做一个精美 Web 端简历吧。
??1_bit： 那我们先创建一个绝对定位的一个 WebAPP 、小程序应用吧。你选择绝对定位进行创建就可以了。
??小媛：那什么是组件呢??
??1_bit：组件我们可以当做是一种元素或是一种工具，就像我们在 Photoshop 中可以用很多工具画出圆框、方框等；在 IVX 中，组件就是网页元素例如按钮、文本框、图片框，又或是一些功能等，我们可以把这些东西画在编辑器中的白色页面之上，这样我们就可以通过 “画画” 的方式将这些元素给放置到画布上了。注意，只有绝对定位布局可以自己绘制内容。
??小媛：哇，明白了，好厉害呀，可以直接画出一个页面，但是绝对定位布局到底是什么呢/p>
??1_bit：先别急，我们通过实例继续讲解吧，然后再知道这个绝对定位布局是什么吧。
??小媛：行的。
??1_bit：接下来我们进行绘制内容吧。你看下图，我们将鼠标长时间停留在组件外观为 T 的组件上，将会发现这时会出现这个组件的详细信息，在这里我们只需要先知道这个组件为文本即可。
??小媛：接下来就放开鼠标左键就可以了吗/p>
??1_bit：是的，接下来我们放开鼠标组件就绘制出来了一个文本框，这个文本框也是对应着我们网页中的文本框元素。你可以看下图，我们发现此时前台下有一个文本1（蓝色框框选），这个文本1则是属于这个前台页面下的元素，我们点击这个元素将会在白色页面中显示这个文本框的大小，这个文本框大小与我们所绘制的文本框大小一致，而左侧红色框框选部分则为这个文本框的属性内容，我们可以更改属性内容更改这个文本框的颜色、背景色等。
??小媛：那如果是我的位置绘制错误了呢/p>
??1_bit：那也很简单，你直接鼠标左键单击这个文本框按住不放，移动鼠标就可以移动这个文本框元素的位置了。
??小媛：哈哈哈，明白了。
??1_bit：那我现在先告诉你什么是绝对定位。
??小媛：好勒。 ??
??1_bit：其实绝对定位就是指当期元素所在位置固定。例如我们这个白色的页面，拥有一个 x 和 y 坐标，而你所绘制的元素如果初始点所在位置是 (200,200)，那么这个元素就永远左上角在 (200,200) 这个位置进行绘制，下图红色框所框选的就是这个文本元素的起始点，而这个起始点所在的位置就是 (95,69)。
??小媛：明白了。我设置了这个文本框的 x 和 y 的值为 0 和 0 后这个文本框出现在了左上角耶，并且我更改了内容，就显示了呢。
??1_bit：之后接下来我拖拽这个文本框超出这个白色页面。
??小媛：你不是说不会显示完内容的吗什么现在还会显示/p>
??1_bit：因为我们这个是浏览器自动切换成了一个电脑浏览的界面，你还记得我们的屏幕在编辑器中是一个竖着的形状吗下图，那个可是一个 iPhone6 手机的屏幕。
??小媛：哇，真神奇，我第一次知道浏览器可以这样用。 ??
??1_bit：其实这个是剪切功能，如果你想显示被剪切的内容可以向我下图一样设置。
??小媛：你这个剪切设置在哪呀/p>
??1_bit：其实你可以点击前台就可以看见了。
??小媛：嗯，做好了这一步。
??1_bit：接下来我们可以选择一个合适的页面。
??小媛：明白。
??1_bit：我们继续往下，在最开始的效果图中我们可以知道，这个简历左侧是有一列内容，此时我们可以新建一个列。
??小媛：什么是列/p>
??1_bit：就是指内容是从上往下进行排列，例如横叫做一行，竖着叫做一列；我们左侧内容其实是竖着排列，每一行就只有一个元素内容，所以就是需要创建一个列，在列中创建这些元素进行显示就好了，你看看原图，左侧蓝色部分内容元素都是竖着的。
??1_bit：接着在屏幕上绘制就可以了。
??小媛：完成了，下一步怎么做呢/p>
??1_bit：接下来我们将新建的这个列靠左放置，可以修改这个列的 x 和 y 坐标。
??小媛：你之前说了，修改 x 和 y 的值就可以更改位置了，然后这个 x 和 y 的值是在属性面板中吧/p>
??1_bit：是的，此时我们点击这个列元素，然后将会出现一个属性面板，在属性面板中将 x 和 y 的值改为 0 和 0 就可以了。
??1_bit：我们接下来继续修改一下这个列的宽高，按照合适的宽高设置我们将会使整个页面看起来直观和舒服。
??小媛：原来 bit 哥还会设计呀/p>
??1_bit：没有没有，我是在网上仿一个简历而已，哈哈哈。
??小媛：哈哈哈，还是很厉害了。
??1_bit：我们继续吧，我们现在选择列1，在其属性面板中修改宽值为 250，高值为 1908。
??小媛：收到，已经修改了。
??小媛：图片元素是不是这个为我感觉这个好像都是用来代表图片。
??小媛：可是我自己的图片好大只啊。 ??
??1_bit：没关系，此时只需要点击图片，在起出现的属性面板中调整宽度就可以了。
??小媛：这个有什么功能呢/p>
??1_bit：我们可以看圆角位置，如果全部为橘色则表示这个图片的四个角都将受到边框圆角值的影响。例如此时我将边框圆角的值设为 50，你看看现在的图片会怎样。
??1_bit：对的，边框圆角值越大，角度越圆润，到达180 时将会变成一个圆形图片。
??小媛：真棒，完成了。
??1_bit：接着我们应该要为这个头像设置间隔顶部的距离。很简单，我们找到 列1，在属性面板中将 上内边距 设置为 15，此时就可以让图片进行与顶部实现间隔了。
个人信息内容编写
??1_bit：真聪明。我们继续，现在我们看一下在头像之下的元素都是一个图片加一行介绍；那这个时候一行有两个元素了，是使用列还是使用行呢/p>
??小媛：可是这样创建的行背景色不一样耶有跟顶部黏在一起太难看了。 ??
??1_bit：没错，是这个意思。那么我们现在往这个行里面添加一张图片吧；点击图片组件即可添加一张照片。想要素材的私聊我 bit 就可以了，我发给你们。
??小媛：感觉好丑啊。
??1_bit：没事，马上就好看了。我们点击这个行，在属性面板中设置该行的高为 40。
??小媛：明白了，效果是这样。
??小媛：可是还是没跟左边间隔，感觉怪怪的。
??1_bit：其实很简单，只需要设置这个文件的左外边距就可以了；你不是会的嘛/p>
??小媛：哈哈哈，突然忘记了，不过我现在设置好了。
??1_bit：那是因为你复制了元素，这个元素的内容、设置都将会一并的在黏贴对象中生效。
??小媛：唔，原来如此。
??1_bit：接下来很简单，我们直接更改一下名字，改完名字后再进去每一行的文本框中修改内容即可，然后图片信息只需要双击图片对象前面的小图标，就会弹出一个图片选择框，选择对应的图片后将会显示到个人信息预览中。
??小媛：那为什么最后一行换行了/p>
??1_bit：那是因为换行了，我们可以在这一行的属性面板中把自动换行给取消掉。
??小媛：啊哈哈，成功了。 ??
??1_bit：其实你发现一个现象没对象树面板中，越靠近底下的元素在页面上越靠前/p>
??小媛：哈哈哈，我觉得你在偷懒。 ??
??1_bit：其实这是第一节内容，熟悉软件、操作是最重要的，在这里能实现就这样实现就可以了的。
??小媛：你说的都对。 ??
??1_bit：问题不大，我们继续往下完成如下效果。
??小媛：就这么简单嘛。
??1_bit：是的，这个时候我们为文本框增加上边距、设置颜色之类的操作就可以了。在这里主要是设置分割线的长度和宽度；我们点击分割线，将会在属性面板中看到如下信息。
??1_bit：哈哈哈，下面另外一个英语就直接复制就可以了，然后改一下文本内容和长度就可以完成了。
??小媛：我还创建了一个文本框呢。
??1_bit：厉害了，那你觉得接下来怎么做/p>
??小媛：很简单，我改一下这个文本框字号大小，和文字颜色为 #254665 就可以了。
??1_bit：那下面的学历背景怎么做/p>
??小媛：加一个行，然后这个行中第一个元素是图片，第二个元素是一个列，这个列有两个值，一个是文本，一个是分割线，这样就完成了。
??1_bit：那你去试着写一下/p>
??小媛：没问题，首先我创建一个行，往里面添加一个图片。
??1_bit：那你怎么增加这个图片背景的颜色呢/p>
??小媛：我看属性有一个图片背景色，我想增加上去。
??1_bit：厉害，那现在在列了。
??小媛：在这一行的列里增加一个文本，内容为学历背景。这里都是之前用了很多次了，我就直接截图给你看了。
??1_bit：其实你现在已经做出了下面几个标题了哟。
??小媛：是的，下面几个标题都是一样的形式，只有图标和文本不同，我再复制这个行，然后修改一下文本内容和图片就可以了，然后我还为了方便区分设置了名称。
??1_bit：你继续往里面添加内容吧。
??小媛：我觉得我偷懒就可以了，因为我已经学会了，接下来我就用 3 个文本框添加内容吧。
??1_bit：行，因为技巧目前来说都是一样的。
??小媛：我直接赋值添加 1 个文本框，里面输入以下内容。
??小媛：我添加了一个文本框，然后将这个文本框放到了学历背景上面，因为之前有说，越往下的在页面上显示越靠前，所以在对象树中学历背景应该在内容之下，这样文本放之后就会正确显示在页面之下。
??小媛：再复制到其它地方，更改完了内容就完成了。工作简历内容为方便读者测试，已列出来。
??小媛：以下为个人喜好文案。
??1_bit：不错，你这个举一反三的例子挺强的，我都觉得你是不是学过了，过来逗我玩的。
??小媛：哈哈哈，没有，这说明我厉害，所有的页面编写完后，点击预览。
??1_bit：不错，第一节就熟练了，之后我们再做一些别的东西，包括如何发布这个网页。
??小媛：哈哈哈，多谢 bit 哥。
零基础真心想学习加我免费指导
微信名片 
来源：1_bit
声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！