安徽安庆网站建设公司,淄博手机网站开发公司,seo信息网,洛阳建站公司效果作者简介
作者名#xff1a;1_bit 简介#xff1a;CSDN博客专家#xff0c;2020年博客之星TOP5#xff0c;蓝桥签约作者。15-16年曾在网上直播#xff0c;带领一批程序小白走上程序员之路。欢迎各位小白加我咨询我相关信息#xff0c;迷茫的你会找到答案。
实战目录
1…作者简介
作者名1_bit 简介CSDN博客专家2020年博客之星TOP5蓝桥签约作者。15-16年曾在网上直播带领一批程序小白走上程序员之路。欢迎各位小白加我咨询我相关信息迷茫的你会找到答案。
实战目录
1小时学会不打代码制作一个网页精美简历1 1小时不会代码的我如何完成 网易云音乐 大作业网页制作IVX 第2篇
注所有资源可以私聊 bit 哥拿~欢迎私聊热心博主 bit 哥哟
创建IVX项目
小媛bit 哥最近有人找我做一个网页但是我不会做300块钱呢。
1_bit啥网页给你300
小媛吃鸡的网页赚了300我就可以吃半个月了下面就是一个示例。 1_bit哈哈哈我觉得一周你就用完了。
小媛赶紧教我吧用 IVX不用打代码应该很快。
1_bit你自己写不好吗
小媛我不熟你教教我这样我也很乐意认真听。
1_bit你这是什么歪道理我竟然听了觉得很有道理那你赶紧打开在线编辑环境吧 https://editor.ivx.cn/。
小媛bit哥我已经打开了那我就创建一个项目咯我选择的是相对应用。 1_bit…
小媛第二步是不是选择大屏我已经切换屏幕了。 1_bit看吧你都会的。
小媛哈哈哈第三步是不是选择前台然后点击页面新建一个页面这样比较方便好操作。 1_bit你都会请继续。
小媛剩下的我不懂了哈哈哈。
标题头编写
1_bit剩下就开始编写标题头了我们可以先看看标题头你觉得有哪些元素 小媛其实开头就是一个图片 logo然后新闻和社区就是两个下拉列表其他的就是文本咯。我标记的黄色就是标题头绿色就是下拉列表其他的就是文本了。 1_bit那这个时候我们应该做什么呢
小媛创建一个行然后在行内创建一个行容器存放logo
1_bit其实我们可以先创建一个行重命名为 main包裹这个网页的所有元素然后再创建一个行用来包裹这个 logo 图片。首先创建一个包裹所有内容的行重命名为 main并且设置高度为包裹。 小媛为什么要设置高度为包裹呢
1_bit包裹的意思就是指将内容全部包裹起来这个行中有多少元素这些元素所堆叠的高度外面这个容器就刚好包裹住这时这个 main 行的高度就等于内容堆叠的高度这样就不用去设置这个行的高度了岂不是很方便
小媛明白了。
1_bit接下来我们在这个 main 行中创建一个容器名为标题用来存放标题这一行的元素。
小媛是不是 标题 这一行还需要设置高度为包裹呀
1_bit聪明是的。 1_bit接下来我们继续在标题行中创建一个行名为 logo 用于存放 logo 图片这个 logo 行宽度占比 10%我们只需要这个行的宽度百分之十就可以了。 小媛这里不需要设置高度为包裹吗
1_bit不需要的因为我们等一下要将图片的显示改为上下居中这个时候得有高度例如我们在这里设置这个行的高度为 80px若图片高度为 70px 就可以上下距离 5px 单位这样就实现了垂直居中如果你设置的是包裹那么设置上下居中就不方便了当然左右居中也比较好看。 小媛明白了现在是不是要在这里面添加一个图片
1_bit我们现在点击 logo 行再点击左侧组件中的图片添加进行中此时将会出现一个资源选择框我们选择 logo 图片就可以了。 小媛懂了我添加好后由于设置了刚刚的那些属性这时我的页面就显示这个图片居中了。 小媛我觉得我们改一下标题行、logo行的背景色可能会好看点我把标题行和背景行的颜色都改为了 #252525。 1_bit那接下来我们就开始添加下拉列表吧。 1_bit我们此时在标题行中添加一个行命名为 menu设置这个行的宽为 90%、高度为包裹这样这两个行就占据了整一行的 100%。 小媛然后就可以在这里创建一个行行里面就是下拉列表了吧
1_bit是的这个时候创建一个行我们可以命名为 menu1然后在里面添加一个下拉列表就可以了。
小媛往 menu 里面添加的 menu1 也需要设置一下行高为 80px 吧因为这样才可以上下居中并且我们还可以设置 menu1 行的宽度为 10%。 1_bit是的。
小媛下拉列表在哪呢
1_bit下拉列表在扩展组件里面我们点击menu1往里面添加一个下拉列表菜单就可以了。 1_bit此时我们可以修改下拉菜单的宽度为 100%。 小媛那怎么样添加里面的菜单内容呢
1_bit这个时候我们只需要点击menu1在这个行里面创建一个一维数组在这个数组中添加要显示的数据。
小媛那接下来怎么做呢
1_bit接下来我们可以为这个下拉菜单绑定数据。点击下拉菜单点击如下图黄色框选位置。 1_bit随后在当前选项中内容框中点击从对象树中选择。 1_bit此时将鼠标移动至一维数组中点击选择。 1_bit然后在出现的选择属性栏中选择某个值即可。 1_bit此时出现如下黄色框选内容将下标改为0即可。 小媛为什么要改成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是的我们改一下值就ok了。 小媛我运行了为什么我的值是这样的 1_bit你终于发现了吗这个时候你需要修改下拉列表选项的内容为这个一维数组同理跟之前一样你重新选一遍。 小媛可是下拉菜单的白色背景好丑啊。
1_bit那就改一下吧简简单单改一下选项背景颜色就可以了。 小媛唔解决。剩下的都是文本是不是再复制一个 menu1然后重命名为menu3在menu3里面删除下拉菜单然后改为文本就可以了 1_bit是的然后再复制几个 menu3 就解决了。 小媛接下来再改一下背景色就解决了。 Banner图编写
小媛然后就开始做那个大图了吧
1_bit是的会做吗
小媛简单呐直接一个行命名为 banner然后添加一张图片不就好了当然这个图的高度肯定为包裹图片宽度肯定为 100%。
公告页内容编写
1_bit昂可以不错。
1_bit接下来开始做通告页了。 小媛这里怎么做
1_bit我们新建一个行命名为 c1设置高度为包裹这个行可以添加一个背景。 小媛为什么没有看到图片
1_bit那是因为你没有高度肯定不显示了你在里面加内容撑开就可以了。
小媛你意思是说撑开后就自动有内容了
1_bit是这个意思。
小媛明白了所以现在就应该往里面加东西吧。
1_bit这个时候你在这里面加两个行一个放左边的图片另一边放一个文章列表就ok了但是这两个行一定要设置宽度都是为 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恭喜哈哈哈第一桶金。
小媛多谢~完美
