一、博客首页搭建搭建《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,设置一个阴影颜色即可:

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

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

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

相关文章

【MATLAB统计分析与应用100例】案例008:调用rand函数生成均匀分布随机数

文章目录 1. 生成随机数分布直方图2. 生成随机数矩阵,服从均匀分布1. 生成随机数分布直方图 x = rand(10) % 生成10行10列的随机数矩阵,其元素服从[0,1]上均匀分布 y = x(:)

linux samba服务器

本文转自wanglm51051CTO博客,原文链接: http://blog.51cto.com/studyit2016/1890282,如需转载请自行联系原作者

modernizer的意义

modernizer是一个js文件,会检查当前的浏览器支持什么特性,就在Html标签上添加什么类,然后如果不支持添加no-xxx类,这样,就可以针对两种情况写两种css。 http://blog.chinaunix.net/uid-21633169-id-4286857.html转载于…

拆分备份(还原)比较大的数据库为多个bak文件

工作中由于个别数据库比较大,生成的备份文件也比较大,不方便存储或者转移,可以将文件备份为多个小的bak文件。 比如一个200G的数据库,可以拆分备份为10个bak文件,则每个bak文件约在20G左右。 备份代码: /…

C语言试题四十八之该函数可以统计一个长度为2的字符串在另一个字符串中出现的次数。

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

Rafy 框架 - 幽灵插件(假删除)

Rafy 框架又添新成员:幽灵插件。本文将解释该插件的场景、使用方法、原理。 场景 在开发各类数据库应用系统时,往往需要在删除数据时不是真正地删除数据,而只是把数据标识为‘已删除’状态。这些数据在业务逻辑上是已经完全删除、不可用的数据…

C#-Linq源码解析之Average

前言在Dotnet开发过程中&#xff0c;Average作为IEnumerable的扩展方法&#xff0c;十分常用。本文对Average方法的关键源码进行简要分析&#xff0c;以方便大家日后更好的使用该方法。使用Average 计算数值序列的平均值假如我们有这样的一个集合List<int> grades new L…

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

制作iVX 低代码项目需要进入在线IDE&#xff1a;https://editor.ivx.cn/ 一、菜单思路参考及制作 在 CSDN 首页中的菜单部分为一串横排的内容&#xff0c;并且可以进行拖动&#xff1a; 首先咱们添加一个行&#xff0c;命名为菜单&#xff1a; 接着肯定是需要设置上下的内边…

【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&#xff08;Filesystem in Userspace&#xff09; 先处理依赖 安装FUSE yum install fuse -y 2、下载并安装ntfs-3g &#xff08;先确定正确安装了rpmforge 套件&#xff0c;然后安装下列套件&#xff1a; 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); 结果&#xff1a; 转载于: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的&#xff0c;由于CFNetwork是比较底层的http库&#xff0c;功能比较少&#xff0c;因此&#xff0c;在ASIHttprequest中实现了http协议中比较多的功能&#xff0c;包括代理、gzi…

Blazor University (28)表单

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

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

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

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

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

正则表达式 (grep)

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

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…