一、博客首页搭建搭建《iVX低代码仿CSDN个人博客制作》

2022-06-20 08:44:57 浏览数 (1)

制作iVX 低代码项目需要进入在线IDE:https://editor.ivx.cn/

一、头部导航栏思路参考

首先我们可以查看CSDN的博客首页,从中查看一下布局:

在以上首页中,我们可以得知其顶部为一个整行,这个行内容左侧为一个logo,logo右侧为一个输入框,这个输入框输入文本后可以搜索对应的内容,在CSDN中搜索框可以搜索出用户名、下载等内容,在我们只做博客时使个人博客,咱们并不做过多的搜索,在功能设计时咱们只需要搜索出对应的博客内容即可。

接着打开APP 文本也可以去掉,只需要再加上右侧的头像即可,最右侧还有一个展开的菜单,在此咱们不不需要制作过多内容,所以该菜单也取消。

那如何使一部分内容靠左另一部分内容靠右呢?

我们查看首页的标题栏,我们可以把整个标题栏内容设置为左侧一个部分以及右侧一个部分:

左侧为logo 和搜索框,右侧为头像框。

二、头部导航栏制作

思路搞清楚了咱们开始制作头部导航栏吧,首先创建一个相对应用项目,随后点击前台创建一个页面:

点击页面后添加一个主要的行,该行将会包裹所有当前页面内容。

为何使用一个行包裹呢?因为在 iVX 中这样比较方便控制多余的内容,当然你也可以分开,在此还需要重命名页面1为首页:

接着给这个主要内容行设置高度为撑开,背景颜色透明:

设置撑开的原因是为了方便裁剪属性设置为 y 轴滚动,因为页面内容过多时咱们需要为滚动当前页面:

设置完毕后,接着咱们需要隐藏y轴(垂直方向滚动条)将会更加美观:

接着在这个主要内容行之中创建一个行,命名为头部:

接着给这个头部设置高度为包裹:

随后设置这个行的上下内边距,使这个头部行的内容跟头部底部有一定距离,更加美观,其实csdn 也是这样做的:

当然我们再次设置的不止有上下,当然还有左右内边距:

此时设置当前行背景色为白色:

接着设置一下整个页面的背景色为 ‘#e7e9ee’:

随后设置往头部之中添加两个行,一个命名为左一个命名为右:

左右两行的高度都设置为包裹,并且背景色透明、宽度都为 50%,他们的高度给他们自己的元素决定就好:

随后在左行中添加一个行当做logo:

接着设置当前logo 的宽度为 30px*30px、设置背景色为蓝色:

此时呈现效果如下:

若你想更为好看一点,那就设置一下他的圆角值并且取消一个角:

页面效果如下:

接着添加一个文本框在logo 右侧,此时直接添加文本框将会超格:

此时设置一下文本框的宽度以及左外边距使其距离左侧有一定距离:

接着设置一下输入框字体使其适应当前输入框大小:

最后更改一下搜索框的提示文本即可解决:

接下来制作右行的内容,此时设置右行的水平对齐为靠右,这样行内的内容就会往右靠齐:

接着往这个行中添加一个图片,设置宽高为 30px:

接着再设置一下圆角就可以了:

但此时还是跟CSDN 的头部有一点区别,总感觉csdn 的头部内容有一点阴影,那我们只需要设置当前行的阴影即可,找到整个头部行,设置阴影偏Y为3,模糊为1,设置一个阴影颜色即可:

那么此时效果如下:

0 人点赞