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

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

一、菜单思路参考及制作

在 CSDN 首页中的菜单部分为一串横排的内容,并且可以进行拖动:
在这里插入图片描述
首先咱们添加一个行,命名为菜单:
在这里插入图片描述
接着肯定是需要设置上下的内边距内容:
在这里插入图片描述
接着直接往这个行中添加文本内容即可:
在这里插入图片描述
很明显,当前文本字号与我们所需要的效果差距比较大,设置对应的字号使其大小(13号字体)合适于当前页面:
在这里插入图片描述
由于每个字体都会左右相隔一段距离,那么此时直接设置这个文本的左右内边距即可:
在这里插入图片描述
接着我们复制这个文本在该行中进行显示:
在这里插入图片描述
页面呈现效果如下:
在这里插入图片描述
但是此时内容换行了,我们该怎样使内容同一行进行显示呢?并且可以滑动?

此时只需要设置包裹这些文本的行取消换行即可,点击菜单行,在属性中把自动换行关闭即可:
在这里插入图片描述
接着还需要设置当前这一行的剪切属性,剪切属性可以使当前这一行的内容可以滑动,但是会出现滚动条,咱们还需要将滚动条隐藏,使其更加美观:
在这里插入图片描述
效果如下:
在这里插入图片描述
此时你再预览将会发现页面可以进行滑动。

二、轮播图制作

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

在这里插入图片描述
首先添加一个行,命名为轮播,并且设置高度为 160px 背景色为透明:
在这里插入图片描述
在这里插入图片描述
接着添加轮播容器:
在这里插入图片描述
添加轮播内容后我们发现当前轮播内容超出了父容器高度,此时需要设置这个轮播容器的高度为 100%:
在这里插入图片描述
接着给这两个轮播页添加对应的对应的背景图片:
在这里插入图片描述
此时页面效果如下:
在这里插入图片描述
那如何增加对应的文本呢?

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

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

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

首先添加一个行命名为文本在这个轮播页之中:
在这里插入图片描述
由于其本身这个行具有背景色,所以导致轮播图遮挡:
在这里插入图片描述
此时直接设置这个行的背景色即可:
在这里插入图片描述
此时你可以设置当前行的高度为轮播页的高度:
在这里插入图片描述
再设置垂直方向的对其为底部,这样内容就会在底部显示,你添加文本也会在底部显示:
在这里插入图片描述
添加文本后设置其颜色和大小:
在这里插入图片描述
现在将会在底部显示,但是我们不要绝对的底部,此时你可以搜索当前行的高度也可以设置内边距即可,此时我设置左内边距以及高度缩小:
在这里插入图片描述
在这里插入图片描述
此时效果如下:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/286105.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【MATLAB统计分析与应用100例】案例009:创建一个RandStream类对象,调用其randn方法生成标准正态分布随机数

文章目录 1. 创建一个RandStream类对象s,其随机数生成器的算法为mlfg6331_64,初始种子为102. 调用对象s的randn方法生成10行10列的随机数矩阵x,其元素服从标准正态分布1. 创建一个RandStream类对象s,其随机数生成器的算法为’mlfg6331_64’,初始种子为10 % 对象s的randn方…

CentOS 安装NTFS-3G,让系统支持NTFS分区的方法

1、ntfs-3g依赖FUSE(Filesystem in Userspace) 先处理依赖 安装FUSE yum install fuse -y 2、下载并安装ntfs-3g (先确定正确安装了rpmforge 套件,然后安装下列套件: yum install fuse fuse-ntfs-3g 若rpmforge的设置…

现在是2016-09-23,查询2个月后的月份和入职的月份相同的数据

select * from emp where to_char(hiredate,mm)to_char(add_months( sysdate,2),mm); 结果: 转载于:https://www.cnblogs.com/feng666666/p/5900182.html

Git之创建远程分支和删除远程分支

1、创建远程分支browser-1.8.0 在没有创造browser-1.8.0之前,我们先查看下所有分支 git branch -a 可以知道我们目前在browser-1.7.0分支,然后我们创建本地分支browser-1.8.0 git branch browser-1.8.0 再看下所有分支 git branch -a 然后我们再切换到分支browser-1.8.…

ASIHTTPRequest源码简单分析

2019独角兽企业重金招聘Python工程师标准>>> 1.前言 ASIHttprequest 是基于CFNetwork的,由于CFNetwork是比较底层的http库,功能比较少,因此,在ASIHttprequest中实现了http协议中比较多的功能,包括代理、gzi…

Blazor University (28)表单

原文链接:https://blazor-university.com/forms/表单源代码[1]EditForm 组件是 Blazor 管理用户输入的方法,这种方法可以轻松地对用户输入执行验证。它还提供了检查是否满足所有验证规则的能力,如果没有满足,则向用户显示验证错误…

【遥感物候】1983-2012年时间序列中国地区GIMMS 3g NDVI下载(已进行旋转、格式转换、投影变换和裁剪)

文章目录 1. 数据集简介2. 数据集预览3. 数据集下载1. 数据集简介 本数据集为1983-2012年,长时间序列中国地区GIMMS 3g NDVI,空间分辨率为0.08333度,作者已完成了数据预处理:包括旋转、格式转换、投影变换和裁剪),作者可以此基础上直接进行NDVI时空变化趋势分析、基于NDV…

三、博客首页完成《iVX低代码仿CSDN个人博客制作》

制作iVX 低代码项目需要进入在线IDE:https://editor.ivx.cn/ 一、首页内容分析 此时我们分析一下首页内容: 通过以上内容可以得知,这些内容都统一包含在一个块之内,这个块之内包含了多个内容,这些内容主要是分为标题…

正则表达式 (grep)

正则表达式 (grep) grep (global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹配的行打印出来。搜索的结果被送到屏幕,不影响原文…

C语言试题四十九之只删除字符串前导和尾部的*号,串中字母之间的*号都不删除。 n 给出了字符串的长度,h字符串中前导*号的个数,e给出了字符串中最后的*个数

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 假定输入的…

|洛谷|DFS|P1101 单词方阵

http://www.luogu.org/problem/show?pid1101 循环找到一个y后向8个方向搜索&#xff0c;直到搜到g&#xff0c;然后按照方向反向填充即可 #include<cstdio> #include<algorithm> #include<cstring> #include<queue> #define ms(i,j) memset(i,j, size…

vuejs 和 element 搭建的一个后台管理界面【收藏】

介绍&#xff1a; 这是一个用vuejs2.0和element搭建的后台管理界面。 相关技术&#xff1a; vuejs2.0&#xff1a;渐进式JavaScript框架&#xff0c;易用、灵活、高效&#xff0c;似乎任何规模的应用都适用。 element&#xff1a;基于vuejs2.0的ui组件库。 vue-router&#xff…

【MATLAB统计分析与应用100例】案例010:matlab调用normrnd函数生成正态分布随机数

效果预览: 文章目录 1. 调用normrnd函数生成1000行3列的随机数矩阵x,其元素服从均值为75,标准差为8的正态分布(1)代码(2)运行效果2. 调用normrnd函数生成1000行3列的随机数矩阵x,其各列元素分别服从不同的正态分布(1)代码(2)运行效果<

四、博客详情页完成《iVX低代码仿CSDN个人博客制作》

制作iVX 低代码项目需要进入在线IDE&#xff1a;https://editor.ivx.cn/ 一、博客详情页分析 博客详情页大体分为顶部标题、发布时间、作者信息、博文内容&#xff0c;底部的评论我们在此不必做悬浮内容&#xff0c;咱们直接放到博文之下进行显示即可&#xff1b;顶部标题需要…

【原创】erlang 模块之 application

2019独角兽企业重金招聘Python工程师标准>>> kernel-2.15.2 中的内容 1 2 3 4 5 6 7 8 9 10 11 12 13 14 转载于:https://my.oschina.net/moooofly/blog/595122

RabbitMQ详解(三)

一、分发到多Consumer(fanout) 二、Routing路由(Direct) 三、主题路由(Topic)一、分发到多Consumer(fanout)将同一个Message deliver到多个Consumer中。这个模式也被称为"publish/subscribe" 创建一个日志系统&#xff0c;包含两部分&#xff1a;第一部分发出log(Pro…

重磅 | Linux内核5.19初步支持LoongArch架构

经过龙芯中科与内核社区一年多的紧密合作&#xff0c;北京时间2022年6月4日清晨&#xff0c;Linux内核社区正式合并LoongArch架构支持代码。随着Linux-5.19的rc1版本的正式发布&#xff0c;LoongArch体系结构主体部分的源码已合并到内核主线之中&#xff0c;其余相关代码正在进…

C语言试题五十之请编写一个函数void function(char *ss),其功能时:将字符串ss中所有下标为奇数位置上的字母转换为大写(若位置上不是字母,则不转换)。

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 请编写一个…

【MATLAB统计分析与应用100例】案例011:matlab读取Excel数据,调用regress函数作一元线性回归分析

数据拟合效果预览: 文章目录 1. 读取数据,绘制散点图2. 计算相关系数3. 绘制回归直线4. 剔除异常数据,重新调用regress函数作一元线性回归1. 读取数据,绘制散点图 ClimateData = xlsread(examp08_01.xls); % 从Excel文件读取数据 x &

“*** IS NOT TRANSLATED IN …….. 解决办法

首先引起提示的原因是因为Lint 代码检查工具发现你的项目中&#xff08;或者引用的三方库&#xff09;有部分string.xml文件内容做了国际化操作&#xff0c;但却不完整&#xff0c;有些文本内容并没有相应的国际化翻译&#xff0c;在android开发中常见于项目引用的Libraries第三…