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

一、菜单思路参考及制作

在 CSDN 首页中的菜单部分为一串横排的内容,并且可以进行拖动:

首先咱们添加一个行,命名为菜单:

接着肯定是需要设置上下的内边距内容:

接着直接往这个行中添加文本内容即可:

很明显,当前文本字号与我们所需要的效果差距比较大,设置对应的字号使其大小(13号字体)合适于当前页面:

由于每个字体都会左右相隔一段距离,那么此时直接设置这个文本的左右内边距即可:

接着我们复制这个文本在该行中进行显示:

页面呈现效果如下:

但是此时内容换行了,我们该怎样使内容同一行进行显示呢?并且可以滑动?

此时只需要设置包裹这些文本的行取消换行即可,点击菜单行,在属性中把自动换行关闭即可:

接着还需要设置当前这一行的剪切属性,剪切属性可以使当前这一行的内容可以滑动,但是会出现滚动条,咱们还需要将滚动条隐藏,使其更加美观:

效果如下:

此时你再预览将会发现页面可以进行滑动。

二、轮播图制作

菜单栏之后是一个轮播图:

该轮播图占据整行,并且自动进行滚动,那如何制作呢?需要通过行和图片自己设置吗?这个不需要,咱们只需要再扩展组件中的特殊功能容器找到轮播组件即可:


首先添加一个行,命名为轮播,并且设置高度为 160px 背景色为透明:


接着添加轮播容器:

添加轮播内容后我们发现当前轮播内容超出了父容器高度,此时需要设置这个轮播容器的高度为 100%:

接着给这两个轮播页添加对应的对应的背景图片:

此时页面效果如下:

那如何增加对应的文本呢?

增加文本内容有两个方式,其中一种是在这个轮播容器之下新建一个行,在这个行中添加对应的文本。那你可能问,创建一个行不就在下面显示了,如何可以显示在当前轮播也之上呢?

其实咱们的行有很多作用,例如在行中设置内容后,设置上的上外边距为负,那么此时就可以往上移动,这样就可以覆盖在这个轮播容器之上了,但是文本却不能进行轮播,这种方法需要额外的制作很多的事情,例如你要设置动画,几秒播放一次,这个还好,更加麻烦的是你还需要设置鼠标拖动时你要如何进行响应,这并不是很划算,在此只是提供一个不一样的思路,咱们现在在这个轮播页中添加文本还是要从整个轮播容器中进行添加。

轮播容器中的轮播页是一个页面,那么一个页也是一个容器,所以咱们可以在这个轮播容器中添加文本内容,但是这个文本内容你还需要控制,最好的方法就是添加一个行,设置其内边距以及一个对齐方式,这样就可以很方便的控制文本了。

首先添加一个行命名为文本在这个轮播页之中:

由于其本身这个行具有背景色,所以导致轮播图遮挡:

此时直接设置这个行的背景色即可:

此时你可以设置当前行的高度为轮播页的高度:

再设置垂直方向的对其为底部,这样内容就会在底部显示,你添加文本也会在底部显示:

添加文本后设置其颜色和大小:

现在将会在底部显示,但是我们不要绝对的底部,此时你可以搜索当前行的高度也可以设置内边距即可,此时我设置左内边距以及高度缩小:


此时效果如下:

二、博客首页完成《iVX低代码仿CSDN个人博客制作》相关推荐

  1. iVX低代码平台系列详解 -- 概述篇(二)

    写在前面 ivx动手尝试电梯:ivx在线编辑器 iVX系列教程持续更新中 上篇文章可看:iVX低代码平台系列详解 – 概述篇(一) ivx目录 写在前面 一.iVX优势 1.快速学习 2.快速开发 3 ...

  2. 后台页制作01《ivx低代码签到系统制作》

    制作iVX 低代码项目需要进入在线IDE:https://editor.ivx.cn/ 一.签到系统思考 签到系统一般是指公布一个签到链接或者二维码,随后用户扫码后即可完成签到. 那如何制作呢?首先我 ...

  3. 发布功能完成02《ivx低代码签到系统制作》

    制作iVX 低代码项目需要进入在线IDE:https://editor.ivx.cn/ 一.发布功能思考.数据库.服务创建 上一节我们制作了后台的页面,那么此时我们应该需要制作发布功能了,那么在制作之 ...

  4. iVX低代码平台系列详解 -- 概述篇(一)

    iVX目录 iVX低代码平台概述 1.iVX是什么? iVX--首个通用无代码开发平台 iVX的三大属性和两大能力 2.iVX有什么用? iVX试图解决什么问题? 3.iVX研发目标是什么? 4.iV ...

  5. 签到功能完成03《ivx低代码签到系统制作》

    制作iVX 低代码项目需要进入在线IDE:https://editor.ivx.cn/ 一.签到页制作 上一节完成了签到内容的发布,那我们接下来如何制作一个签到页面并且签到呢? 此时我们先创建一个页面 ...

  6. 小程序中的权限设计_低代码布道师的博客-CSDN博客

    日常我们开发小程序的时候,经常需要考虑权限如何设计,比如在我的页面,管理员可以看到一些菜单,而普通用户可以看到另外一些菜单.那如何设计这种带权限的功能呢?本文就以低代码工具为例,看看低代码中是如何设计 ...

  7. 博客园页面定制html代码,你要的博客园主题都有!!!

    基于最近很多小伙伴加我微信想要我的博客园主题,那我就把博客园主题整理一下,送给喜欢的小伙伴,园友们喜欢可以收藏,关注,博客园主题仅供参考,博主顺便再多说一句,虽然我可以分享给你们,但是我更愿意你们加我 ...

  8. IVX低代码平台——小程序微信红包的应用的做法

    前言 本文将向大家展示低代码开发:通过使用用户组件鉴权避免非微信用户获取红包,并使用服务和事务记录用户申领红包的记录:符合获取红包的用户,则通过后台逻辑发送后台生成的金额至本人微信中. 文章目录 前言 ...

  9. 播客丨化繁为简,低代码漫谈

    绘声绘影 绘声绘影是网易云信独家打造的一档聚焦行业热点.个人成长方面的播客栏目. 栏目希望通过邀请不同背景.不同行业.不同阅历的企业研发.产品.运营等相关岗位负责人作为节目嘉宾,以自身职业视角交流行业 ...

  10. 美团优选、多多买菜等五家社区团购被罚650万元;打车手机越贵,接单车型越贵;微软推出低代码语言 Power Fx | 极客头条...

    「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注的重要新闻吧. 整理 | 丁恩华 出品 | CSDN(ID:CSDNnews ...

最新文章

  1. 方程组求解matlab实现(朴素高斯求解、LU分解、雅可比迭代方法、高斯-塞德尔方法、连续过松弛(SOR))
  2. 基于python的天气预报系统,基于python编写的天气抓取程序
  3. 云炬Android开发报错处理教程 Gradle下载超时please configure the proxy settings either in IDE or Gradle
  4. android下拉会谈效果,Android实现下拉展示条目效果
  5. TS - 问题解决力 - 上篇
  6. Java底层抛出异常_总结java的exception
  7. 阿里巴巴Druid数据源及使用
  8. 第 20 次 CSP认证 202009-3 点亮数字人生
  9. 基于STM32F427的模拟SSI协议绝对式编码器位置反馈通信
  10. 下面的android入门开发视频教程还不错
  11. 多线程编程中条件变量和的spurious wakeup 虚假唤醒
  12. wow 如何写dz 宏
  13. 编程入门:零基础想要学好C/C++编程?那你一定要看看这五个步骤!
  14. 取模 乘法和除法运算在CPU和GPU上的效率
  15. php fpdf生成个人简历,php生成PDF文件(FPDF)
  16. 使用SQL语句在表中插入date类型的数据
  17. 关于组培的一些想法(求知解惑),多肉科普
  18. 014 非常好用的广告净化器
  19. 蓝色基因超级计算机玩仙剑6,世界上最快的计算机——蓝色基因超级计算机
  20. Android 8 WiFi断流,小米8wifi断流怎么解决

热门文章

  1. vi vim 查找和替换字符串 命令
  2. 13个开源GIS软件
  3. 数据挖掘—网格搜索2
  4. Linux解决忘记密码的方法
  5. [ 数据集 ] VOC 2012 数据集介绍
  6. python脚本编写
  7. Python 脚本编写
  8. 交互原型案例Axure50套
  9. 图书速读 | 一分钟读完《如何成为学习高手》
  10. java大佬用什么编辑器_大佬们都在用的几款简单易用的文本编辑器