作者名：1_bit
简介：CSDN博客专家，2020博客之星TOP5，蓝桥签约作者。 2015-2016年，他进行线上直播，带领一批新手程序员走上了成为程序员的道路。欢迎各位新手加我咨询我相关信息。如果你感到困惑，你会找到答案。
1小时学会免编码制作精美网页简历（一）
1小时内，如何不编码完成网易云音乐网页制作大作业？ （IVX 第 2 章）
注：所有资源均可私聊比特哥~欢迎与热心博主比特哥私聊哟
👸小媛：位兄弟，最近有人让我做一个网页，但我不知道怎么做。花费300元。
🐶1_bit：第几页？给你300？
👸小媛：如果我在吃鸡网页上赚300，我可以吃半个月。这是一个例子。
🐶1_bit：哈哈哈，我想你一周就用完了。
👸小媛：快点教我吧。使用 IVX，无需编码，速度应该很快。
🐶1_bit：你自己写得不好吗？
👸小媛：我不太熟悉，请教我，我很乐意仔细听。 😄
🐶1_bit：你在说什么废话？其实我听后觉得很有道理。然后快速打开在线编辑环境https://www.sychzs.cn/。
👸小媛：位兄弟，我已经打开了，所以我就创建一个项目吧。我选择了相关应用。
🐶1_bit：…
👸小媛：第二步就是选择大屏幕。我已经切换屏幕了。
🐶1_bit：看，你能做到。
👸小媛：哈哈哈，第三步选择前台，点击页面新建页面。这样比较方便，容易操作。 😇
可见，请继续。
👸小媛：剩下的我就听不懂了，哈哈哈。 😂
🐶1_bit：剩下的就是开始写标题了。我们可以先看一下标题。你认为它包含哪些元素？
👸小媛：其实就是一个图片标志开头，然后是新闻和社区两个下拉列表，剩下的就是文字了。我标记的黄色是标题，绿色是下拉列表，剩下的就是文字。
🐶1_bit：那这个时候我们该怎么办呢？
👸小媛：创建一行，然后在行内创建一个行容器来存放logo？
🐶1_bit：其实我们可以先创建一行并重命名为main来包裹这个网页的所有元素，然后再创建一行来包裹logo图片。首先创建一个包裹所有内容的行，将其重命名为main，并将高度设置为包裹。
👸小媛：为什么要给包裹设置高度呢？ 😳
🐶1_bit：换行就是将所有内容换行。这一行有多少个元素？这些元素的堆叠高度刚好被容器包裹。此时，主行的高度等于堆叠的内容。 height，这样就不用设置这一行的高度了，不是很方便吗？
👸小媛：知道了。
🐶1_bit：接下来，我们在这条主线中创建一个容器，命名为title，用于存储标题行的元素。
👸小媛：标题行也需要设置包裹的高度吗？
🐶1_bit：聪明，是的。
🐶1_bit：接下来我们继续在标题行中创建一行名为logo的行来存放logo图片。该标志行的宽度占10%。我们只需要该行宽度的 10%。 。
👸小媛：这里不是需要设置包裹的高度吗？ 😩
🐶1_bit：不需要，因为稍后我们会把图片的显示改为上下居中。这个时候就必须有一个高度。比如我们这里设置这一行的高度为80px。如果图片高度是70px，就可以上下。距离为5px单位，这样就实现了垂直居中。如果设置封装，设置上下居中不方便。当然，左右居中也更好看。
👸小媛：知道了，现在要添加图片吗？
🐶1_bit：现在单击徽标行，然后单击左侧组件中的图片将其添加。这时会出现一个资源选择框，我们只需选择logo图片即可。
👸小元：明白了，我添加后，因为我刚才设置了属性，所以我的页面显示的是这个图片居中。
👸Xiaoyuan: 我觉得如果我们改变标题行和标志行的背景颜色可能会更好看。背景行的颜色已更改为 #252525 。
🐶1 _bit：然后让开始添加下拉列表。
🐶1_bit：这时候我们在标题行添加一行，名为menu，并设置该行的宽度为90%，高度为换行，所以这两行占据整行的 100%。
👸小媛：那你可以在这里创建一行，行里面是一个下拉列表，对吧？
🐶1_bit：是的，这时候创建一行，我们可以将其命名为menu1，然后在里面添加一个下拉列表。
👸小媛：添加到菜单中的menu1也需要设置行高为80px对吧？因为这样我们就可以让它上下居中，而且我们还可以将menu1行的宽度设置为10%。
🐶1_bit：是的。
👸小媛：下拉列表在哪里？
🐶1_bit：下拉列表位于扩展组件中。我们单击menu1并向其添加一个下拉列表（菜单）。
🐶1_bit：此时我们可以将下拉菜单的宽度修改为100%。
👸小媛：里面的菜单内容怎么添加？ 😏
🐶1_bit：这时候我们只需要点击menu1，在这一行创建一个一维数组，并将要显示的数据添加到这个数组中即可。
👸小媛：接下来我们该怎么办？
🐶1_bit：接下来我们可以将数据绑定到这个下拉菜单。单击下拉菜单，然后单击如下所示的黄色框来选择位置。
🐶1_bit：然后单击当前选项的内容框以从对象树中进行选择。
🐶1_bit：此时将鼠标移至一维数组上，点击选择。
🐶1_bit：然后在出现的选择属性栏中选择一个值。 ？
👸小媛：为什么要改成0呢？
🐶1_bit：因为0代表该数组中的第一个元素，如果为1，则代表第二个元素。
👸小媛：你的意思是数组是从0开始计数的？
🐶1_bit：是的，就是这个意思。
👸小媛：我改了一下，点击预览运行了一下，没有什么大问题。 😏
🐶1_bit：接下来，让我们更改这个下拉列表的属性。将背景颜色设置为透明，将边框设置为无。
👸小媛：这个时候我们需要改变线条的背景颜色吗？
🐶1_bit：嗯，这样改之后感觉很舒服。
👸小媛：我把menu1的背景颜色改成了#252525。
🐶1_bit：如何制作第二个下拉列表？
👸小媛：复制就行了。
🐶1_bit：哈哈哈，直接复制menu1，改名为menu2吧。然后将menu2中的一维数组1的名称更改为一维数组2，并将menu2中的下拉菜单的列表值更改为一维数组2。
👸小媛：还需要改一维数组2的值吗？
🐶1_bit：是的，我们可以改变这个值就可以了。
👸小媛：我跑了，为什么我的价值观是这样的？
🐶1_bit：你终于发现了吗？这时候就需要将下拉列表选项的内容修改为这个一维数组。同样，和以前一样，您再次选择。
{im g_5 0:aHR0chHM6Ly9pbWctYmxvZy5jc2RuaW1nLmNulzIwMjEwNTizMTIwMjU2MzQucG5nP3gtb3NzLXByb2Nlc3MmIzYxO2ltYWdlL3dhdGVybWFyayx0eXBlX1ptRnVaM3BvWlc1bm FHVnBk R2ssc2hhZG93XzEwLHRleHRfYUhSMGNITZMeTlpYkc5bkxtTnpaRzR1Ym1WMEwwRTNOVGN5T1RFeU1qZyYjNjE7LHNpemVfMTYsY29sb3JfRkZGRkZGLHRfNzA=/}
👸小媛：但是下拉菜单的白色背景太难看了。
🐶1_bit：那就改吧。很简单，只需更改选项的背景颜色即可。
👸小媛：嗯，解决了。剩下的全是文字。我可以直接复制menu1并将其重命名为menu3，删除menu3中的下拉菜单，然后将其更改为文本吗？
👸小媛：接下来，改变背景颜色就解决了。 😎
👸小媛：那就开始画大图吧？
🐶1_bit：是的，你会这么做吗？
👸小媛：很简单。只需命名行横幅，然后添加图片即可。当然，这个图像的高度必须是包的高度，图像的宽度必须是100%。
🐶1_bit：昂，是的，很好。
🐶1_bit：接下来开始制作公告页面。
👸小媛：来这里做什么？
🐶1_bit：我们创建一个新行，将其命名为 c1，并设置换行高度。该行可以添加背景。
👸小媛：你怎么没看到照片？
🐶1_bit：那是因为没有身高就不会显示。您只需在其中添加内容并将其拉伸即可。
👸小媛：你的意思是打开后自动有内容？
🐶1_bit：就是这个意思。
👸小媛：我明白了，那我现在就补充一下吧。 😎
🐶1_bit：这个时候你可以在这里添加两行，一行是左边的图片，另一行是文章列表。不过，这两行的宽度必须设置为50%，这样才能占据这一整行，记得设置高度为换行。
👸小媛：下一步就是在里面添加图片序列左排酒吧？然后在弹出的资源选择框中选择多张图片，点击打开。
🐶1_bit：对的，然后点击图片序列，修改一下这个图片距离这个行顶部的距离，在这里设置为100，然后设置这个行距离底部的距离，在这里设置为50，最后设置一下距离这个行右边的距离，设置为30，此时这个图片序列就不会紧挨着这个行的边缘了，当然也要设置这个图片的宽度为整个左边行的 70%，否则是没有间隙的哟。
👸小媛：设置完成了。
🐶1_bit：其实这个时候我们可以看看右边，其实是一列，我们在右边的行2中添加一个列，这个列添加几个文本就可以了。但是由于左边的图片已经距离了顶部 100 个单位，此时我们也需要将这个列距离顶部 100个单位，这也才可以让这个文字跟左边的图片对齐。
👸小媛：之后就在列中添加文本，然后改一下字体和颜色就ok了对吧？
🐶1_bit：是的。
👸小媛：解决，明白了。
🐶1_bit：接下来就做新闻公告吧。
👸小媛：这部分挺简单，也就是一个行，一个行有一个背景图片，然后这个行里面包含了3个行，第一个行是一个文本提示新闻公告，第二行就是 公共/新闻/活动/，第三个行就是更新公告的内容。
🐶1_bit：那你做一下吧。
👸小媛：但是那个更新公告我不会呢。
🐶1_bit：那就做之前的。
👸小媛：好勒。首先创建一个行，这个行命名为 c2，然后宽度为 100%，高度为包裹，并且设置一张背景图。水平对齐为居中。
👸小媛：然后在这一行内创建一个行命名为新闻公告，高度为包裹，设置一个上外边距这样才可以距离顶部一个距离，接下来我们。
👸小媛：接下来我们在这个新闻公告内创建一个文本，内容为新闻公告，修改文字字体大小和加粗就可以了。
🐶1_bit：说的不错，继续往下。
👸小媛：接下来继续创建一个行，然后宽度为 100%，水平对齐为居中，然后在这个行内添加3个文本，更改内容这样就对齐了。
🐶1_bit：哈哈哈，接下来就不会了？
👸小媛：接下来得看 bit 哥的了。😎
🐶1_bit：其实接下来也很简单的。创建一个行，然后在行中添加4个列，因为这些数据是垂直往下的。
🐶1_bit：首先我们可以创建一个行，在这个行中创建一个列，这个列需要设置上下左右的外边距，使其跟周围边缘有一定距离，保持美观，随后宽度设置为 23%，高度设置为包裹。
🐶1_bit：接下来不就是在这个列中添加一个图片，一个文本，和另一个文本了？
👸小媛：好像是耶？直接最后一个文本设置一下背景色就好了，然后所有宽度都为100%占据这个列的整一行就好了。
🐶1_bit：然后你在复制4个，不就ok了，但是要注意，要把这个行的水平对齐设置为等间距，这样就可以相等距离均分显示了？
👸小媛：哈哈哈，完美。
🐶1_bit：这一部分眼熟吗？
👸小媛：眼熟，就是在这里上面添加两行就可以了，每个行显示一个文本。
🐶1_bit：那你就复制以下加上去吧。
👸小媛：哈哈哈，搞定。
🐶1_bit：下面也超简单，你知道怎么做吗？
👸小媛：添加一个行，行里面添加一个文本，就显示这一次我们更新了什么；然后再添加一个行，行里有图片序列，然后宽度设置为 100% 呗，简简单单。
🐶1_bit：哈哈哈，做吧。
👸小媛：就这样咯，两个行包含两个元素，都设置宽度 100% 就可以了，跟前面一样的。
🐶1_bit：牛皮！那之后呢？
👸小媛：最后一个页尾，就一个行加一个分割线，包裹在另外一个行中；其实就是一个行设置水平对齐为居中，之后包含一个行，这个行的宽度设置为80%，这样往里面添加一个文本，就可以了，这个文本就是那一串英文。
🐶1_bit：可以的，不错，哈哈哈，恭喜你 300 块钱到手了。😎
👸小媛：最后面点击文件，选择部署，然后导出就可以下载了。
👸小媛：然后压缩包到手，哈哈哈。
🐶1_bit：恭喜，哈哈哈第一桶金。
👸小媛：多谢~完美！
