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

article/2025/10/14 17:06:40

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

一、菜单思路参考及制作

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

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

二、轮播图制作

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

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

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

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

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

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


http://chatgpt.dhexx.cn/article/8ibd4nfm.shtml

相关文章

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

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

博客中GIF动画超简单制作

前言: 在写博客的时候图片和视频是非常通俗易懂的,比文字表述更为清晰,有时候演示过程用动画效果更好,毕竟图片只是静态的,看不出整个过程。而录制成视频,体积大,保存发送也比较麻烦,最重要的事博客中不支持这种格式,所以制作成GIF动画,方便、占用空间又小、博客也支…

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

制作iVX 低代码项目需要进入在线IDE:https://editor.ivx.cn/ 一、头部导航栏思路参考 首先我们可以查看CSDN的博客首页,从中查看一下布局: 在以上首页中,我们可以得知其顶部为一个整行,这个行内容左侧为一个logo&am…

《博客页面制作》教程

《博客页面制作》教程 一、《博客页面制作》第一部分 效果图&#xff1a; 参考代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>博客制作-第一部分</title><style type"text/css"&g…

Perfetto —— 靠谱的trace利器

最近踩到的坑&#xff0c;报了一个cst的测试项fail&#xff0c;帧率不符合预期&#xff0c;对应的测项进程是android.view.cts 肯定是要抓sytrace看看了 但是&#xff0c;试了systrace和atrace去抓&#xff0c;只抓了launcher的绘制&#xff0c;并没有android.view.cts的绘制…

perfetto使用简介

perfetto使用简介 文章目录 perfetto使用简介一、使用方法1.1 打开perfetto的设置界面1.1.1 adb指令1.1.2 系统设置 1.2 打开录制跟踪记录功能1.3 打开跟踪记录功能后&#xff0c;运行需要调试的APP1.4 运行完操作之后点击,可点击下拉菜单停止跟踪记录1.5 导出trace文件 二、打…

Android性能优化之Perfetto

Perfetto 一. 通过System Tracing抓取 1. System Tracing Overview System Tracing即系统跟踪界面&#xff0c;用户可以通过如下两种方式进入系统跟踪界面&#xff1a; &#xff08;1&#xff09;设置 – 其他设置 – 开发者选项 – 系统跟踪&#xff08;Realme GT Neo 闪速…

[ES6] 01. Intro to ES6 and traceur compiler

---恢复内容开始--- ES6 is ECMAScript version 6, which JavaScript is based on. The next version of JavaScript is going to be based on version 6 of ECMAScript. Tracer is a way to compile that next version of JavaScript back into JavaScript of today, meaning …

Android性能优化工具

一、性能优化工具基础 1.1 概述 在Android开发中&#xff0c;开发者可通过"系统跟踪"观察Android设备的运行情况并生成跟踪报告&#xff0c;在此基础上进行分析优化。Android 平台提供了多种获取跟踪信息的工具&#xff1a; Android Studio CPU 性能剖析器Systrace…

搭建Babel运行环境,Traceur ES6模板,块级作用域,let和const命令

搭建Babel运行环境 Babel&#xff08;http://babeljs.io/&#xff09;可用于将使用ES6语法的脚本转化为ES5语法的脚本&#xff0c;基本功能的安装步骤如下&#xff1a; 1、安装node解释器和npm包管理工具 2、安装babel解释器 npm install -g babel &#xff08;建议这个过程完…

ES6转ES5,Traceur使用方式

ES6于2015年6月正式发布&#xff0c;各大浏览器的最新版本对 ES6 的支持可以查看https://kangax.github.io/compat-table/es6/。 目前各大浏览器和开发环境对支持ES6的支持情况参差不齐&#xff0c;在实际项目开发中&#xff0c;我们仍旧不得不降级使用ES5语法以兼容各平台。幸…

Traceur 使用方式

ES6于2015年6月正式发布&#xff0c;各大浏览器的最新版本对 ES6 的支持可以查看https://kangax.github.io/compat-table/es6/。 目前各大浏览器和开发环境对支持ES6的支持情况参差不齐&#xff0c;在实际项目开发中&#xff0c;我们仍旧不得不降级使用ES5语法以兼容各平台。幸…

Rxjava:interval的使用

以固定的时间间隔不断发射数据。 测试&#xff1a; Test public void testSimple(){Observable.interval(1, TimeUnit.SECONDS).subscribe(new Action1<Long>() {Overridepublic void call(Long aLong) {System.out.println("aLong " aLong);}});for (;;){…

FlinkSql系列6之 Interval Join

FlinkSql系列6之 Interval Join 前言 本次我们来学习flinksql的Interval Join,这个方式主要是针对两个流在一定时间区间内的join,支持事件时间和处理时间&#xff0c;而且这个流每次只会产生一条数据&#xff0c;是一个完全的追加流。 一、Interval Join是什么&#xff1f; I…

Flink Interval Join使用以及源码解析

1、Interval Join 概述 在之前的Join算子中&#xff0c;一般使用的是coGroup算子&#xff0c;因为一个算子可以提供多种语义&#xff0c;但是也是有一些弊端的。因为coGroup只能实现在同一个窗口的两个数据流之间进行join&#xff0c;在实际的计算过程中&#xff0c;往往会遇到…

mysql datesub interval_Mysql之INTERVAL与DATE_SUB与EXTRACT函数的使用

1. INTERVAL INTERVAL代表的是时间间隔 MySQL中的时间间隔类型有如下几种: 1.1 利用INTERVAL做时间的加减法 示例: 加法:SQL>SELECT DATE 2018-11-01 + INTERVAL 10 11 DAY_HOUR; 结果:2018-11-11 11:00:00 减法:SQL> select date 2018-11-11 11:00:00 -INTERVAL 10 11…

ORACLE中的INTERVAL

ORACLE中的INTERVAL 关于INTERVALINTERVAL类型INTERVAL YEAR TO MONTHINTERVAL DAY TO SECOND 关于INTERVAL oracle中提供了两种日期时间类型&#xff0c;分别是DATE和TIMESTAMP用来存储时间点的数据&#xff0c;同时还提供了INTERVAL来存储一段时间的数据。例如你2022年11月1…

Flink SQL之Interval Joins

1.Interval Joins&#xff08;区间Join&#xff09; 区间是双流join的优化&#xff0c;基于处理时间或事件时间&#xff0c;在一定时间区间内数据&#xff0c;相同的key进行join&#xff08;支持 Batch\Streaming&#xff09;。Interval Join 可以让一条流去 Join 另一条流中前…

MySQL INTERVAL 关键字指南

在本教程中&#xff0c;我们将了解 MySQL INTERVAL 关键字及其值以对日期和时间算术执行操作。那么&#xff0c;让我们开始吧&#xff01; 另请阅读&#xff1a;MySQL 中的 While 循环 – 完整参考 MySQL INTERVAL 简介 在 MySQL 中&#xff0c;INTERVAL 关键字用于添加或减…

Flink之IntervalJoin介绍

InterValJoin算子 间隔流&#xff0c;一条流去join另一条流去过去一段时间内的数据&#xff0c;该算子将keyedStream与keyedStream转化为DataStream&#xff1b;再给定的时间边界内&#xff08;默认包含边界&#xff09;&#xff0c;相当于一个窗口&#xff0c;按指定的key对俩…