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

制作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,设置一个阴影颜色即可:

在这里插入图片描述
那么此时效果如下:
在这里插入图片描述

  • 1
    点赞
  • 2
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:Age of Ai 设计师:meimeiellie 返回首页
评论

打赏作者

1_bit

你的余额交给我吧

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值