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

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

一、首页内容分析

此时我们分析一下首页内容:
在这里插入图片描述
通过以上内容可以得知,这些内容都统一包含在一个块之内,这个块之内包含了多个内容,这些内容主要是分为标题作者以及阅读:
在这里插入图片描述
从我以上截图可知,这个内容块有一个内边距,该内容创建一个行用于显示标题,之后设置一个行,内容为作者和阅读数,这两个内容占据一行并不进行换行,在此右侧的×我们并不进行考虑。

二、首页内容制作

分析完毕后此时我们创建一个行,命名为内容,用于包裹所有内容块:
在这里插入图片描述
接着设置这个内容块的高度为包裹,高度将随着当前内部内容的增加而增加:
在这里插入图片描述
你可能会疑问,为啥不设置内边距?其实你可以统一在这里设置内边距,但是我选择在内容中设置内容,这样我可以更清楚的看见这些内容适应于内边距的样子,又或者根本不用设置内边距。

接着再到这个内容航中添加一个行,命名为博文,这个博文行就为每个博文内容进行显示:
在这里插入图片描述
接着给与这个博文行背景色为白色,其他内容不需要进行改动:

在这里插入图片描述
此时再这个行中添加一个行,命名为标题,并且将其高度设置为包裹,背景色为透明:
在这里插入图片描述
在这里插入图片描述
接着更改这个标题行的宽度为 80%,然后设置整个博文行的水平对齐为居中,这样不就可以自动有内边距了吗?
在这里插入图片描述
在这里插入图片描述
添加文本后效果如下:
在这里插入图片描述
此时设置一下文本大小,随后加入文本后将会出现如下情况:
在这里插入图片描述
这是因为你并没有设置该文本大小,你需要设置文本宽度为100%,意思就是跟当前的容器大小一致,这样文本就会自动换行:
在这里插入图片描述
可是此时内容如果很多,就会发现有很多行,这样并不例如我们有一个整齐的排版,所以咱们此时需要限制当前文本的显示行数,此时在这个文本的属性中找到最大行数,设置为 2 即可:
在这里插入图片描述
此时记得发现显示多余内容时将会以省略号进行省略。

接着我们添加一个行,命名为信息:
在这里插入图片描述

接着调整对应的高度和背景色:
在这里插入图片描述
此时我们还需要设置一个很重要的属性,那就宽度,否则这个部分的内容将会左对齐显示,此时设置宽度小于父容器宽度后,由于父容器的水平对齐设置将会使整个行居中显示,其内容也随着容器变动:
在这里插入图片描述
接着在这个信息中添加两个文本设置好大小和文本此时效果如下:
在这里插入图片描述
此时内容应该上下还有内边距,在这里我们需要设置父容器博文的高度为垂直居中即可:
在这里插入图片描述

此时效果如下:
在这里插入图片描述
此时感觉距离左右两边太远,并且上下距离太高,这没关系我们进行调整后如下:
在这里插入图片描述
在设置阅读数距离左边的距离:
在这里插入图片描述
此时效果如下:
在这里插入图片描述
接着复制多个博文行查看效果:
在这里插入图片描述
此时效果总感觉怪怪的,少了原版的分割线和边框:
在这里插入图片描述
此时有两个方法,第一个是直接给与边框,第二个是直接给与一个上外边距,使其具有一定距离后将会显示背景色,这样就可以自动有边框内容了:

在这里插入图片描述
效果如下:
在这里插入图片描述
方法有很多,主要是看大家选择的方法。

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

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

相关文章

正则表达式 (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第三…

[转] ArcEngine 产生专题图

小生原文 ArcEngine 产生专题图 ArcEngine提供多个着色对象用于产生专题图&#xff0c;可以使用标准着色方案&#xff0c;也可以自定义着色方案&#xff0c;ArcEngine提供8中标准着色方案。 一、SimpleRenderer专题图 是使用单一符号进行着色分类&#xff0c;不涉及对要素的数据…

iVX无代码挑战五秒游戏制作

一、五秒挑战游戏简介及思考 制作iVX 低代码项目需要进入在线IDE&#xff1a;https://editor.ivx.cn/ 五秒挑战游戏指的是点击一个按钮开始计时&#xff0c;随后需要用户再次点击计时按钮&#xff0c;将会停止计时&#xff0c;当计时的时间等于五秒时将挑战成功&#xff0c;否…

C语言试题五十一之已知学生的记录是由学号和学习成绩构成,n名学生的数据已存入s结构体数组中。请编写函数fun,该函数的功能是:找出成绩最高的学生记录,通过形参返回主函数(规定只有一个最高分)。

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

CSS 巧用 :before和:after

前几天的晚上较全面的去看了下css的一些文档和资料&#xff0c;大部分的样式运用都没什么大问题了&#xff0c;只是有些许较陌生&#xff0c;但是也知道他们的存在和实现的是什么样式。今天主要想在这篇学习笔记中写的也不多&#xff0c;主要是针对:before和:after写一些内容&a…

MAUI 入门教程系列(4.通用主机)

前言对于ASP.NET Core 开发人员而言, 这并不陌生, 当ASP.NET Core应用程序启动时, 会创建默认的应用程序主机, 我们可以为应用程序配置所有的依赖关系、系统设置, 最终启动。如下所示:using IHost host Host.CreateDefaultBuilder(args).ConfigureServices((_, services) >…

【MATLAB统计分析与应用100例】案例012:matlab读取Excel数据,调用robustfit函数作稳健回归

稳健回归效果预览: 文章目录 1. 读取数据2. 调用robustfit函数作稳健回归3 .绘制残差和权重的散点图4. 绘制regress函数和robustfit函数对应的回归直线5. 拟合效果1. 读取数据 ClimateData = xlsread(examp08_01.xls); % 从Excel文件读取数据 x

Android单击、长按获取当前触点坐标下(TextView)文字字符

package com.*.*.*.utils;import android.graphics.Rect; import android.text.Layout; import android.widget.TextView;public class TextViewUtils {/**获取TextView某一个字符的坐标位置return 返回的是相对坐标parms tvparms index 字符索引*/public static Rect getTextV…

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

制作iVX 低代码项目需要进入在线IDE&#xff1a;https://editor.ivx.cn/ 一、签到系统思考 签到系统一般是指公布一个签到链接或者二维码&#xff0c;随后用户扫码后即可完成签到。 那如何制作呢&#xff1f;首先我们可以先不考虑签到页面的制作&#xff0c;既然签到暂时没有…